1
2
3
4
5
6
7
8
9
10
11
12
| 1）、终端输入(创建,这是vue3创建)：
vue create -p dcloudio/uni-preset-vue 项目名称
npm run dev:mp-weixin
npm run build:mp-weixin
2）、提前安装好微信小程序开发工具
扫码二维码进入界面 => 然后添加项目 => 填写appid(测试号) => 创建
3）、将创建的项目拉到 HBuilder X中
|
通过HBuilderX可视化创建
1
2
3
4
5
6
7
| 1）、点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）
2）、选择uni-app类型，输入工程名，选择模板(默认模板)，点击创建，即可成功创建
3）、运行uni-app 点击工具栏的运行 -> 运行到浏览器/手机或模拟器/微信开发者工具
4）、发布uni-app 点击发行，选择原生app-云端打包/h5/小程序/...
|
两者区别
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
| cli创建的项目，是传统的node项目结构。工程代码在src目录下，编译器在项目下，编译结果在dist目录下。
(可以使用axios封装uni.request请求)
├─node_modules
├─public
├─src
│ ├─api
│ ├─config
│ http.js
│ ├─pages
│ index
│ ├─static
│ ├─App.vue
│ ├─main.js
│ ├─pages.json
│ ├─uni.scss
...
├─index.html
├─package.json
HBuilderX可视化创建的项目，是一种免node开发概念。工程代码在项目目录下，编译器在HBuilderX目录下而不是项目下，编译结果在项目的unpackage目录下
├─pages
│ index
├─static
├─App.vue
├─index.html
├─main.js
├─pages.json
│─uni.scss
通过HBuilderX开发 uni-app 项目时，在 uni-app 项目上右键“新建页面”，HBuilderX会自动在pages.json中完成页面注册
|
uni-app 生命周期
1）、应用生命周期
| 函数名 |
说明 |
| onLaunch |
当uni-app 初始化完成时触发（全局只触发一次） |
| onShow |
当 uni-app 启动，或从后台进入前台显示 |
| onHide |
当 uni-app 从前台进入后台 |
| onError |
当 uni-app 报错时触发 |
| onUniNViewMessage |
对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 |
| onUnhandledRejection |
对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound |
页面不存在监听函数 |
| onThemeChange |
监听系统主题变化 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
tips: 应用生命周期仅可在App.vue中监听，在其它页面监听无效
|
2）、页面生命周期
| 函数名 | 说明 |
| :—— | :—— |
|onInit | 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad |
|onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）|
|onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化 |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新 |
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据 |
| onTabItemTap | 点击 tab 时触发，参数为Object |
| onShareAppMessage | 用户点击右上角分享 |
| onPageScroll | 监听页面滚动，参数为Object |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object|
| onBackPress | 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。 |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 |
| onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）|
| onShareTimeline | 监听用户点击右上角转发到朋友圈 |
| onAddToFavorites | 监听用户点击右上角收藏 |
3）、组件生命周期
即vue2/vue3生命周期
