ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-06-29 23:02:46  阅读:268  来源: 互联网

标签:web 13 Vue app 程序 api uni App


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。

标签:web,13,Vue,app,程序,api,uni,App
来源: https://www.cnblogs.com/lenbor/p/13210937.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有