uni-app 入手体验

本是古典何须时尚 2021-09-03 10:51 568阅读 0赞

> `uni-app` 是一个使用 [Vue.js][] 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

## 一： 开发准备 ##

### 1.1 编译工具 ###

HBuilderX: [https://www.dcloud.io/hbuilderx.html][https_www.dcloud.io_hbuilderx.html]

微信小程序开发工具： [https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]

### 1.2 环境配置 ###

1.  打开微信开发者工具>设置>安全设置>打开服务端口

![e646b75b7ba397e439328f3ca9d98a83.png][]

1.  HBuilderX>运行>小程序模拟器>运行设置>设置微信小程序开发工具路径

### 1.3 开发文档 ###

uni-app 开发文档：

微信小程序开发文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/][https_developers.weixin.qq.com_miniprogram_dev_framework_quickstart]

## 二：入门 ##

### 2.1 创建项目初始uni-app ###

打开HBuilderX 新建uni-app 项目

![1a75c2f8fe58c4352bafcaead8bf7a26.png][]

打开之后看到目录，现在我们来看看目录有什么呢？

![4cad1dbc221a79431f4730fd215bd060.png][]

### 2.2 表达式测试 ###

![21d392a6e9bf5e8b5e72027a492597f0.png][]

### 2.3 属性绑定 ###

![39cc56079e52a5f784fb3fb90650d084.png][]

### 2.4 方法调用 ###

![777fdaaebbc0dcf1ecffd3118db85d2d.png][]

### 2.5 常用指令 ###

![1dec8cad7178943105eb95c2a2af563b.png][]

### 2.6 常用生命周期 ###

#### 2.6.1 应用生命周期 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">函数名</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">onLaunch</td> 
   <td align="left">当<code>uni-app</code> 初始化完成时触发(全局只触发一次)传入一个option，里面可以获取场景值</td> 
  </tr> 
  <tr> 
   <td align="left">onShow</td> 
   <td align="left">当 <code>uni-app</code> 启动，或从后台进入前台显示，传入一个option，里面可以获取场景值</td> 
  </tr> 
  <tr> 
   <td align="left">onHide</td> 
   <td align="left">当 <code>uni-app</code> 从前台进入后台</td> 
  </tr> 
  <tr> 
   <td align="left">onUniNViewMessage</td> 
   <td align="left">对 <code>nvue</code> 页面发送的数据进行监听，可参考 <a href="https://uniapp.dcloud.net.cn/use-weex?id=nvue-%E5%90%91-vue-%E9%80%9A%E8%AE%AF" rel="nofollow">nvue 向 vue 通讯</a></td> 
  </tr> 
 </tbody> 
</table>

**注意**

*  应用生命周期仅可在`App.vue`中监听，在其它页面监听无效。
 *  onlaunch里进行页面跳转，如遇白屏报错，请参考[https://ask.dcloud.net.cn/article/35942][https_ask.dcloud.net.cn_article_35942]

例子：

onShow: function(option) { 
     console.log('App Show');
     console.log(option);
     },

#### 2.6.2 分页生命周期 ####

![a51f0e7b08a89222d55c36caf8dc01b9.png][]

#### 2.6.3 组件生命周期 ####

![40b333ffd56a2fc75a49afa367852ebf.png][]

### 2.7 路由跳转 ###

![fa262e8b852f07fb49e1a3f164441164.png][]

例子：写在方法里

/*
     非tabbar配置的页面我们使用 navigateTo
     跳转时保留老页面,一般用于需要返回
     */
     uni.navigateTo({ 
     url:"../one/one"
     })
     
     
     /* 跳转pages.json>tabbar>配置过的页面,使用 switchTab
     uni.switchTab({ 
     url:"../news/news"
     }) */

### 2.8 视图容器 ###

![8946a4cfdf2856b85937eaa0285d06b4.png][]

### 2.9 节点操作 ###

![71b933e8788ea566e72ddbdd485f6dec.png][]

### 2.10 网络请求  ![3650abcacbad5f0b61faf91216bf7670.png][] ###

uni.request({ 
     url: 'https://www.example.com/request',
     success: (res) => { 
     console.log(res.data);
     }
    });

### 2.11 扩展组件 ###

![12be7dbe9bd8a1c655de12a68715f310.png][]

### 2.12 vuex 组件数据管理 ###

uni- app 中已经有vuex 组件了。

![dac0d1808aaf20b0a9602a6a40d3cc90.png][]

在根目录下的main.js 中加入以下代码

import store from './store'
    Vue.prototype.$store=store;

在根目录下创建一个store文件夹，放入一个index.js 文件，里面写vuex配置

import Vue from 'vue'
    import Vuex from "vuex"
    Vue.use(Vuex)
    export default new Vuex.Store({ 
     // 全局属性变量
     state:{ 
     num:0,
     price:10,
     name:'苹果',
     testList:[]
     },
     // 全局同步方法, 调用方法,this.$store.commit("xxx")
     mutations:{ 
     add(state){ 
     state.num++;
     }
     },
     //Vuex属性计算,在视图里面当变量使用
     getters:{ 
     count(state){ 
     //这个函数的执行依赖一个可变的变量
     return state.num*state.price;
     }
     },
     //异步方法 调用方法,this.$store.dispatch("xxx") 
     actions:{ 
     testActions(context){ 
     // context里面包含了 state,mutations,getters,actions
     // console.log(context)
     // 执行一些异步参数,通用ajax
     setTimeout(()=>{ 
     context.state.testList=["猪猪侠","超人强","喜洋洋","老村长"]
     }, 2000);
     }
     }
     
    })

[Vue.js]: https://vuejs.org/
[https_www.dcloud.io_hbuilderx.html]: https://www.dcloud.io/hbuilderx.html
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[e646b75b7ba397e439328f3ca9d98a83.png]: /images/20210813/841d4497ae284b1ab8772083a7d28976.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_quickstart]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
[1a75c2f8fe58c4352bafcaead8bf7a26.png]: /images/20210813/dd0e341e26a3409ba65d0583a1785585.png
[4cad1dbc221a79431f4730fd215bd060.png]: /images/20210813/c321b6e4e37f4b3aa134befc446d9ad7.png
[21d392a6e9bf5e8b5e72027a492597f0.png]: /images/20210813/55042c6f7d5b42339dd1a7f3b629dfc7.png
[39cc56079e52a5f784fb3fb90650d084.png]: /images/20210813/250d0fd8d5a244d1855f7cddbf78f168.png
[777fdaaebbc0dcf1ecffd3118db85d2d.png]: /images/20210813/155044e6d8644f11942b88186dea32fd.png
[1dec8cad7178943105eb95c2a2af563b.png]: /images/20210813/58026cec945d4762a4ab1a11efe857e4.png
[https_ask.dcloud.net.cn_article_35942]: https://ask.dcloud.net.cn/article/35942
[a51f0e7b08a89222d55c36caf8dc01b9.png]: /images/20210813/0dcda514a4164681982c7b6f131d0cfb.png
[40b333ffd56a2fc75a49afa367852ebf.png]: /images/20210813/58484b2a3ce24d67991d1852134ba33c.png
[fa262e8b852f07fb49e1a3f164441164.png]: /images/20210813/899e6530131c41daa714969552d0e1ba.png
[8946a4cfdf2856b85937eaa0285d06b4.png]: /images/20210813/b3c766940e634f0d801a6dbb0bf5f4b1.png
[71b933e8788ea566e72ddbdd485f6dec.png]: /images/20210813/2e1e2f815b984a9899ea6dfacb8935ea.png
[3650abcacbad5f0b61faf91216bf7670.png]: /images/20210813/a9ff0abdf64a49e084964bdd8f6d60f6.png
[12be7dbe9bd8a1c655de12a68715f310.png]: /images/20210813/cb812c024b974f84a316dfd900db4546.png
[dac0d1808aaf20b0a9602a6a40d3cc90.png]: /images/20210813/3a715372ca644cd391619e9261adb7c1.png