新星计划 uni-app 学习2

uni-app 学习资料：uni-app官网

教程地址：uni-app官网

官方给的很多视频地址，省的自己找。

前一阵子在apicloud群里吃瓜，该平台不再指出svn管理项目，集中到开发的ide里设置git，还有一个用友割韭菜。看官网里承诺永远免费，希望如此。依托于平台的项目，平台有大的变动确实挺麻烦。

再次声明，目前学习uni-app,最近文档就是官网内容，类似于笔记，木有项目经验的内容。

一、跨端注意

1、H5正常但App异常的可能性

1. 非H5端不支持*选择器
2. 标签没改为非h5支持的标签
3. 组件和页面样式相互影响，h5启动scoped，非h5需要自己写
4. webview浏览器兼容性，默认rom的webview渲染，老手机有些css不兼容
5. 非h5原生组件兼容问题，要遮挡video、map等原生组件，请使用cover-view组件
6. 使用了非H5端不支持的API,小程序和App的js运行在jscore下而不是浏览器里，没有浏览器专用的js对象
7. 三方库导致
8. 从HBuilderX 2.6起，App端新增了renderjs,vue页面通过renderjs可以操作浏览器对象
9. 使用了非H5端不支持的vue语法
10. 不要在引用组件的地方在组件属性上直接写 style="xx"，要在组件内部写样式
11. url(//alicdn.net)等路径，改为url(https://alicdn.net)，因为在App端//是file协议
12. 本地测试，真机无法访问
13. 小程序要求连接的网址都要配白名单

注：

从 uni-app 2.5.3 起，Android端支持引入腾讯x5浏览器内核，可以抹平低端Android的浏览器兼容性问题，详见：uni-app官网

各浏览器及渲染差异：关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性 - DCloud问答

 renderjs | uni-app官网

2、H5正常但小程序异常的可能性

1. 同上
2. v-html在h5和app-vue均支持，但小程序不支持
3. 小程序要求连接的网址都要配白名单

3、小程序正常但App异常的可能性

1. 放弃老款手机支持
2. 不用使用太新的css语法，可以在caniuse查询
3. 从 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异常的可能性

1. 代码中使用了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创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码

   分包：manifest.json 应用配置 | uni-app官网