uni-app 学习资料:uni-app官网
教程地址:uni-app官网
官方给的很多视频地址,省的自己找。
前一阵子在apicloud群里吃瓜,该平台不再指出svn管理项目,集中到开发的ide里设置git,还有一个用友割韭菜。看官网里承诺永远免费,希望如此。依托于平台的项目,平台有大的变动确实挺麻烦。
再次声明,目前学习uni-app,最近文档就是官网内容,类似于笔记,木有项目经验的内容。
一、跨端注意
1、H5正常但App异常的可能性
- 非H5端不支持*选择器
- 标签没改为非h5支持的标签
- 组件和页面样式相互影响,h5启动scoped,非h5需要自己写
- webview浏览器兼容性,默认rom的webview渲染,老手机有些css不兼容
- 非h5原生组件兼容问题,要遮挡video、map等原生组件,请使用cover-view组件
- 使用了非H5端不支持的API,小程序和App的js运行在jscore下而不是浏览器里,没有浏览器专用的js对象
- 三方库导致
- 从HBuilderX 2.6起,App端新增了renderjs,vue页面通过renderjs可以操作浏览器对象
- 使用了非H5端不支持的vue语法
- 不要在引用组件的地方在组件属性上直接写 style="xx",要在组件内部写样式
url(//alicdn.net)
等路径,改为url(https://alicdn.net)
,因为在App端//是file协议- 本地测试,真机无法访问
- 小程序要求连接的网址都要配白名单
注:
从 uni-app 2.5.3 起,Android端支持引入腾讯x5浏览器内核,可以抹平低端Android的浏览器兼容性问题,详见:uni-app官网
各浏览器及渲染差异:关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性 - DCloud问答
2、H5正常但小程序异常的可能性
- 同上
- v-html在h5和app-vue均支持,但小程序不支持
- 小程序要求连接的网址都要配白名单
3、小程序正常但App异常的可能性
- 放弃老款手机支持
- 不用使用太新的css语法,可以在caniuse查询
- 从 uni-app 2.5.3 起,引入腾讯x5浏览器
4、小程序或App正常,但H5异常的可能性
- uni-app 从 2.4.7 起支持微信自定义组件
- App端使用了App特有的API和功能,比如plus、Native.js、subNVue、原生插件等
- 使用了小程序专用的功能,比如微信卡券、小程序插件、微信小程序云开发。对于云开发,建议使用可跨端的uniCloud。
5、App正常,小程序、H5异常的可能性
- 代码中使用了App端特有的plus、Native.js、subNVue、原生插件等功能
二、使用 Vue.js 的注意
1、uni-app
基于Vue 2.0
实现
2、data 属性必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据
3、开发者需按Vue 2.0
的写法实现数据绑定,不支持微信小程序的数据绑定写法
三、区别于传统 web 开发的注意
1、非H5端,不能使用浏览器自带对象,更不能使用jquery等依赖这些浏览器对象的框架
2、App端若要使用操作window、document的库,需要通过renderjs来实现
3、uni-app的tag同小程序的tag,和HTML的tag不一样。最好改成uni-app的标签
4、荐使用flex布局模型
5、单位方面,uni-app默认为rpx
6、页面文件与小程序策略相同,如/pages/list/list.vue
7、自定义组件:放到component
目录
8、静态资源:如图片,固定放到static
目录下。这是webpack
的规则
9、用vue2的数据绑定
10、每个页面支持使用原生title,首页支持使用原生底部tab。这些是要在pages.json里配置,这些并不是vue页面的一部分。当然vue里的js api也可以动态修改原生title
11、app和小程序里使用多页应用(mpa),每个页面重新加载。vue使用单页应用(spa),只有一个主页面的应用,一开始只需要加载一次js,css等相关资源。
12、位置坐标系统一为国测局坐标系gcj02
四、H5 开发注意
1、发行在网站根目录可修改,manifest.json文件中
2、可定义模板:
manifest.json 应用配置 | uni-app官网
"h5" : {
"title" : "桌面版",
"devServer" : {
"https" : false
},
"router" : {
"base" : "./"//改根目录
}
"template":模板路径
}
history后端配置:不同的历史模式 | Vue Router
3、H5 版 uni-app
全支持 vue
语法,所以可能造成部分写法在 H5 端生效,在小程序或 App 端不生效。
4、H5 校验了更严格的 vue
语法,有些写法不规范会报警
5、编译为 H5 版后生成的是单页应用(SPA)
6、跨域:uni-app H5跨域问题解决方案(CORS、Cross-Origin) - DCloud问答
7、uni-app
新增了2个css变量:--window-top
和 --window-bottom,用法bottom:var(--window-bottom),防止和
tabbar
重叠
8、CSS 內使用 vh
单位的时候注意 100vh
包含导航栏,使用时需要减去导航栏和 tabBar
高度,部分浏览器还包含浏览器操作栏高度
9、正常支持 rpx
,px
是真实物理像素。暂不支持通过设 manifest.json
的 "transformPx" : true
,把 px 当动态单位使用
10、使用罗盘、地理位置、加速计等相关接口需要使用 https 协议,本地预览(localhost)可以使用 http 协议
11、PC 端 Chrome 浏览器模拟器设备测试的时候,获取位置 API 需要连接谷歌服务器
12、组件内(页面除外)不支持 onLoad
、onShow
等页面生命周期
13、为避免和内置组件冲突,自定义组件请加上前缀(但不能是 u 和 uni),微信小程序下自定义组件名称不能以 wx 开头
五、小程序开发注意
1、体积过大
HBuilderX
创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码