移动端开发基础【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
原文地址:https://www.cnblogs.com/lenbor/p/13210937.html