// cli和HXB创建项目的区别
1. cli创建的项目,编译器安装在项目下,并且不会跟随HBX升级,如需升级编译器要执行npm update
HBX可视化界面创建的项目,编译器在HBX的安装目录下的plugin的目录,随着HBX的升级会自动升级编译器
2. 用cli创建的项目可以拖到HBX运行,全部目录拖进去,编译时走的是项目下的编译器,如果只拖src目录
走得是HBX安装目录下plugin目录下的编译器
3. cli版本如果要安装less、scss、ts等编译器,需要手动npm安装,在HBX插件中安装无效,那只作用于用HBX创建的项目
4. 发布App时需要使用HBX
5. 在HBX中的路径'@'表示根路径,在cli中表示src目录
6. 使用HBX创建的项目没有package.json文件,需要在npm时执行npm init,建议先从插件市场获取,npm下载库很容易只支持H5
7. 在HBX中的目录相当于是用vuecli创建的目录的src,用vuecli创建的项目会多出node_modules和其他脚手架自带的文件,而用HBX则没有
8. 使用vuecli命令创建: 'vue create -p dcloudio/uni-preset-vue 项目名称'
9. 在HBX运行的代码是开发环境,发行是生产环境,在cli中用process.env.NODE_ENV判断
----------------------------------------------------------------------------------------------
// 静态资源的引入
1. static目录下的js不会编译,如果有es6代码,不经过转换直接运行,在手机设备上会报错,css、less、scss等资源
同样不要放在static目录下,建议这些公用资源放在common目录下,HBX1.9.0+支持在根目录创建ext.json、sitemap.json文件
2. 引入的静态资源在非H5平台,均不转为base64,H5平台小于4kb的资源会被转为base64,其余不转
3. 微信、QQ、头条、appv2端css、图片等文件不允许引用本地文件,这些资源小于40kb,一定会转base64
H5平台小于4kb会转base64,超出4kb不转,其他平台不转
4. 小程序不支持本地文件,包括背景图片和字体文件,需要用base64方式或使用网络地址
5. 在使用本地路径的背景图片或字体文件时,在大小小于40kb时,uni-app在不支持本地路径的平台会自动转成base64
6. 在图片或字体文件大于40kb时,会有性能问题,如开发者需要使用要自己转成base64或使用网络地址
7. 字体图标引入支持使用base64和网络地址,网络地址必须加https
8. 微信小程序不支持相对路径引入背景图片 // 真机不支持,开发工具支持
9. 在模板内引入静态资源时可以使用绝对和相对路径,支付宝小程序组件的image不能用相对路径
10. '@'开头的绝对路径以及相对路径会经过base64转换规则校验
11. 本地背景图片或字体文件引用路径推荐使用以'~@'开头的绝对路径
12. js文件引入不能使用'/'开头的方式引入,只能用'@'或相对路径
13. 样式导入 @import '相对路径'
----------------------------------------------------------------------------------------------
// 跨平台注意事项
1. 在非H5平台上的class和style动态绑定不支持直接绑定一个对象名 // 可以绑定{ flg: true }
2. 在H5平台v-for="(item, index) in 10",item从1开始,其他平台从0开始
在非H5平台循环对象不支持第三个参数 // v-for="(value, key, index) in obj", index不支持
3. 事件修饰符除了.stop各平台都支持,其他只有H5才支持
4. 只有App和H5支持v-html
5. uni-app只支持vue单文件组件,其他动态组件,自定义render和字符串模板在非H5平台都不支持
6. 非H5平台不支持的列表:
slot // scoped
动态组件
异步组件
inline-template
x-Templates
keep-alive
tarnsition
7. 在H5平台默认启用了scoped,其他没有
8. H5平台联网可以使用localhot或127.0.0.1,在手机App则无法访问,要使用手机可访问的IP进行联网
9. 在H5中刷新了页面会导致回不去上一级页面,页面丢失情况
10. 小程序要求连接的网址都要配置白名单
11. 支付宝和百度小程序开发有其他问题,具体看uni-app跨端开发注意事项下的小程序开发注意
----------------------------------------------------------------------------------------------
// 右上角胶囊和固定值
1. 在使用自定义导航栏时H5和小程序有一个状态栏的区别,可使用uni.getSystemInfoSync()方法获取状态栏的高度
因为设备不同高度也不同,从而设置的自定义状态栏的高度
2. 微信、QQ、百度小程序导航栏有胶囊,使用uni.getMenuButtonBoundingClientRect()方法获得胶囊位置信息,需要条件编译
导航栏内容高度 = (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏的高度)
需要动态的改变导航栏内容的高度和宽度来显示胶囊
导航栏内容的宽度 = 胶囊位置的left值
一般状态栏为20px,导航栏为45px,有差异,所以要动态的改变
3. uni-app内置的css变量:
--status-bar-height // 系统状态栏高度
--window-top // 内容区域距离顶部的距离,只有H5有NavigationBar的高度,其他都是0
--window-bottom // 内容区域距离底部的距离,只有H5有Tabbar的高度,其他都是0
4. 固定值:
<NavigationBar />导航栏在App中是44px,在H5中是44px
<TabBar />底部选项卡在App中是50px且可以改,在H5中是50px
----------------------------------------------------------------------------------------------
// css注意事项
1. after和before伪类选择器仅微信小程序和App生效
2. 在uni-app中非H5平台不能用*选择器,page相当于body节点
3. 在App.vue引入的样式作用于全局
4. 在不修改公用样式库时可以不加scope
----------------------------------------------------------------------------------------------
// 开发必备
1. 在uni-app中支持easycom组件模式,即在components目录下,并符合components/组件名称/组件名称.vue的目录结构
就可以不用引用注册,直接在页面使用实现的是局部引入,优先级低于手动引入,打包后自动剔除没有使用的组件
2. 使用字体图标可以使用iconfot或在插件市场下载icons图标使用
3. 支持使用小程序组件,但是要放在指定文件夹内 // wxcomponents、mycomponents、swancomponents
4. uni.scss是一个特殊的文件,在代码中无需import即可在scss代码中使用,如果要用less、stylus要在vue.config.js中配置webpack策略
5. 在uni-app中通过uni.$emit('change')方法去触发一个全局的事件,通过uni.$on('change')方法监听,在回调中拿到传递的参数 // 在任何页面都可以
6. 获取上个页面传递的数据在页面的生命周期函数onLoad(e)中获取
7. 可以在App.vue上使用onError(err)来捕获app的error
8. <template />和<block />用于列表渲染和条件渲染,这两个不是组件,只是一个包装元素,不会在页面中进行渲染,只接受控制属性
9. 全局组件需要在main.js里使用vue.components进行全局注册
10. 在main.js中使用vue.use引用插件,vue.prototype添加全局变量,使用vue.component注册全局组件
11. 全局变量在App.vue中的globalData,在其他页面可以通过getApp().globalData获取引用,也可赋值
12. ref只能绑定在自定义组件上,原生组件绑定不了
13. 不要在引入的组件上使用style属性修改样式,要在组件内部写样式
14. 富文本解析组件可使用官方提供的rich-text或在插件市场中找u-parse
15. popup弹出层中嵌套<textarea>组件需要给组件加上fixed,因为<textarea>在position: fixed的区域中,需要指定属性fixed为true
16. 全局变量的几种方式:
公用模块,哪个页面要使用都要引入
挂载 vue.prototype
globalDate
vuex
17. 在H5中刷新页面会丢失调用页面栈
----------------------------------------------------------------------------------------------
// 名词解释
1. App端的nvue可以使用weex的组件和API,也可以使用uni-app的组件API
2. nvue后缀的文件内置了weex渲染引擎,weex为App提供了原生的渲染能力
3. HTML5+提供了原生App的插件、方法等
4. weex/nvue使用html做App,HTML5+引擎让js可以调用丰富的原生App能力,小程序和H5没有这个扩展
5. HTML5Plus === 5+ === 5+App === 5+SDK === 5+Runtime
----------------------------------------------------------------------------------------------
// 补充知识
1. jscore是一个标准js引擎,标准js是可以正常运行的,比如if、for、各种字符串、日期处理等
所谓浏览器的js引擎,就是在jscore或v8的基础上新增了一批浏览器专用的API,比如DOM
nodejs引擎则是在v8基础上补充了一些电脑专用的API,如本地IP
uni-app的App端和小程序端的js引擎,其实是在jscore的基础上补充了一批手机端常用的API,比如扫码
2. SDK相当于开发集成工具环境,API就是数据接口,在SDK的环境下调用API数据
3. uni小程序SDK是一个用于原生App中集成的SDK,它可以帮助原生App快速实现小程序的能力
4. uni-app有uniPush同一推送服务,内建了苹果、华为、小米、oppo、魅族等手机厂商的系统级推送、第三方推送和个推等
5. uni统计是自带免费的统计平台,可以在一张报表里看到所有端(IOS、Android、H5及各家小程序)的运营数据
6. uni-app支持接入uni-AD广告联盟,可以实现一次开发,多端变现
7. vue页面在App端渲染引擎是系统webview不是手机自带的浏览器,是rom的webview,在较老的手机上
如安卓4.4、IOS8不支持一些新出的css,小程序不存在浏览器兼容问题,它内置了自己定制的webview
8. 使用罗盘、地理位置、加速计等相关接口需要使用https协议,本地预览可以使用http
9. pc端chrome浏览器模拟器设备测试时,获取位置API需要连接谷歌服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
