• 移动端开发基础【14】App和Vue以及传统web开发注意事项


    1.App(v2)App(v3)差异说明

    App(v2)默认template中使用了未定义或未初始化的数据,运行的时候不会报错,而且不影响后续节点渲染。App(v3)运行时,会直接发出警告,并报错(标准的vue渲染逻辑,同H5),且影响后续节点数据的渲染,错误信息通常显示为undefined is not an object, evaluating(xxx.xxx.xxx)

    App(v2)默认隔离组件样式(组件间样式不会互相影响),但是,App(v3)版本默认不隔离。目前发现开发者v2升级v3反馈的样式问题大多是因为版本不隔离导致,v3版本将于2.6.14-alpha进行调整默认隔离组件间样式。

    2.使用 Vue.js 的注意

    (1)uni-app 是基于Vue 2.0实现的,开发者需要注意Vue 1.0 -> 2.0 的使用差异,详细的使用差异可以从 Vue 1.x 迁移上查看。

    (2)data 属性必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据

     

      (3)在微信小程序端,uni-app 将数据绑定功能委托给Vue,开发者需按Vue 2.0的写法实现数据绑定,不支持微信小程序的数据绑定写法,故如下写法不支持:

     <view id="item-{{id}}"></view>

    需修改为:

    <view v-bind:id="'item-' + id "></view>

    3.区别于传统 web 开发的注意

    有些开发者可能习惯于自由的web开发,但是,目前各家小程序都有了很多的限制。 并且这些限制在框架层更好的优化了用户体验,所以小程序的体验要优于web。 并且这些限制只是写法的限制,并不影响功能。 如果做过微信小程序开发,相信对这些限制应该已经很了解了。

    (1)JS注意。

    非H5端,不能使用浏览器自带对象,比如document、window、localstorage、cookie等,更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发,uni提供的api足够完成业务。

    uni的api在编译到web平台运行时,其实也会转为浏览器的js api。App端若要使用操作window、document的库,需要通过renderjs来实现。uni的api是多端可用的。在条件编译区,每个平台的专有api也可以使用,比如wx.、plus.等api可以分别在微信下和app下使用。出于降低小程序向uni-app迁移成本的考虑,wx的api在app里也可以直接运行,比如写wx.requst和uni.requst是一样的,但仍然建议仅在微信的条件编译区使用wx的api。

    (2)Tag注意。

    uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。出于降低h5应用向uni-app迁移成本的考虑,写成div、span也可以运行在app和小程序上,因为uni-app编译器会把这些HTML标签编译为小程序标签。但仍然建议养成新习惯。

    (3)Css注意。

    虽然大部分css样式在微信小程序和app中都可以支持,但推荐使用flex布局模型,这种布局更灵活高效且支持更多平台(比如nvue、快应用只支持flex布局)单位方面,uni-app默认为rpx。这是一种可跨端的通用单位 。

    (4)工程目录注意。

    每个要显示的页面,都要放到pages目录下,新建一个页面所在的目录,然后放同名目录的vue文件,比如project/pages/lista/lista.vue,并且在pages.json里配置。这与小程序的策略相同。自定义组件,放到component目录静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则。

    (5)数据绑定方式的注意。

    uni-app 基于Vue 2.0实现,开发者需注意Vue 1.0 -> 2.0 的使用差异,详见从 Vue 1.x 迁移。

    (6)每个页面支持使用原生title,首页支持使用原生底部tab,这些是要在pages.json里配置,这些并不是vue页面的一部分。当然vue里的js api也可以动态修改原生title。

    (7)虽然使用vue,但在app和小程序里,不是spa而是mpa

    (8)位置坐标系统一为国测局坐标系gcj02,这种坐标系可以被多端支持。老版5+的百度定位和百度地图使用的是百度私有坐标系bd09ll,这种坐标系需要转换。新版uni-app里的百度地图已经默认改为gcj02。高德地图不受影响,一直是gcj02。

    官网:http://www.lenbor.com
  • 相关阅读:
    【前端】用百度BAE和express部署自己的node后台
    【前端】JavaScript中prototype和__proto__的区别
    【其他】Objective-C 内存管理学习总结
    【Unity3D】Unity3D 让角色的头部望向鼠标
    【Unity3D】Unity3D 摄像机带透明截图
    【前端】前端冷知识
    【Unity3D】Unity3D SkinnedMeshRenderer换装系统
    【前端】HTML中最适合做按钮的元素
    IEnumerable和IEnumerator 详解 分类: C# 2014-12-05 11:47 18人阅读 评论(0) 收藏
    LINQ to Entities
  • 原文地址:https://www.cnblogs.com/lenbor/p/13210937.html
Copyright © 2020-2023  润新知