[移动开发]微信小程序（uni-app概述、HBuilderX工具创建、vue-cli脚手架创建、工程配置pages.json、uniapp基础语法、生命周期、组件通信、全局变量）

二、框架概述

1.uni-app概述

Dcloud

地址：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

Dcloud是uniapp框架开创者

Dcloud:国内领先的开发者服务公司，W3C会员，HTML5中国产业联盟发起单位。

提供了很多服务开发者的工具，比如

HBuilderX======》开发者工具(微信开发者工具)

uniapp======>开发框架（微信小程序原生框架）

uniapp起源

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式：h5）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架

很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。

DCloud于2012年开始研发小程序技术，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。

2015年，DCloud正式商用了自己的小程序，产品名为“流应用”

在2015年9月，DCloud推进微信团队开展小程序业务

微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。

造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。

既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台差异。

2.为什么要学习uni-app?

vue语法+微信小程序语法 多端移动端项目

1.uni-app是一套可以适用多端的开源框架，一套代码可以同时生成原生app端、小程序端和h5端等13大平台。
2.uni-app对前端开发人员比较友好，学习成本比较低，首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件语法一致，所以对于现在的主流前端人员来说学习几乎0成本
3.uni-app拓展能力强，封装了H5+,支持nvue，也支持原生Android，ios开发。可以将原有的移动应用和H5应用改成uni-app应用。

3.其他多端框架

美团的：mpvue(vue)
WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的风格去开发小程序。（vue）
?
Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架(react)
react-native(facebook：2015年) 多端开发框架（android  ios）(react)

三、项目创建

项目创建有两种方式，第一种是通过HBuliderx工具，另一种是使用vue-cli架手架，建议使用工具方式创建和管理uniapp项目

1.HBuilderX工具创建（推荐）

1.1下载工具

地址：https://www.dcloud.io/hbuilderx.html

下载完后直接安装即可；

注意如果安装无法启动参考一下连接说明：

地址：HBuilderX 文档

设置自动保存

此工具没有自动保存设置功能，正常需要写完代码后按住 ctrl+s 键保存，可以在插件市场安装自动保存插件

插件安装地址：自动保存 - DCloud 插件市场

1.2注册Dcloud开发者账号

地址：DCloud开发者中心

就等同于注册我们微信公众平台小程序账号，方便后期管理和发行我们创建的应用

注册成功后登录进去Dcloud提示我们通过邮箱进行验证，点击获取激活邮件，如果激活邮件无法点击尝试更换浏览器。

1.3账号登录HBuilderx工具

最后用注册的Dcloud账号登录HBuilderx工具如下：这样我们通过工具创建的项目就会使被Dcloud后台进行管理

1.4创建项目流程

我们可以点击HBuilderX工具中的文件创建，也可以在工具的左侧栏空白处右键创建；

1.5运行项目

我们开发项目主要是使用vue语法和微信小程序语法，所以最终是由HBuilderX工具帮助我们编译成能够运行在不同的平台下的代码包。记住，我们需要在HBuilderX工具中开发业务逻辑，效果需要在各个终端平台对应的开发者工具中进行查看。

1.5.1运行到h5

我们只需要选中该项目中的页面文件后点击工具栏的运行即可，选择相应的终端平台；

1.直接运行到系统自带浏览器

h5端本地运行不会生成本地代码包，和vue一样是跑在内存中；

2.运行到HBuilderx内置模拟器

第一次运行需要下载，根据提示连接直接下载即可；

注意：不会复现跨域问题，模拟器已经内部解决；

1.5.2运行到小程序端

我们在HBuilderX里面开发，在小程序开发者工具里面就可看到实时的效果。

下面以运行到微信小程序为例，步骤如下：

1.配置ide路径

首先在HBuilderx工具中配置微信小程序开发者工具的安装路径，

?

2.开启小程序工具的端口号

开启微信开发者工具端口号

?

3.配置appId

打开项目中manifest.json文件，选择微信小程序配置，填写小程序的appid，如下所示：

?

4.开始运行

?

运行成功会生成编译后的微信小程序代码包，位置如下所示：

?

注意:

若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径（mp-weixin）拷贝到微信开发者工具里面

2.vue-cli脚手架创建（了解）

步骤

2.1创建项目

注意前提：首先安装脚手架（安装过就不需要重复安装）

vue create -p dcloudio/uni-preset-vue my-project

?

2.2运行项目

注意项目创建完毕后，首先进入到项目根目录下执行 npm run serve ,此刻编译的是h5端项目，如果需要编译其他终端，停止此服务，执行以下npm run dev +平台码 运行即可

npm run dev: %PLATFORM%

PLATFORM：平台的意思

例如运行到微信小程序端：

npm run dev:mp-weixin

?

2.3发行项目

npm run build:%PLATFORM%

例如运行到h5端

npm run build:h5

2.4平台对照码

?

3.二者创建项目区别

三、工程目录结构

?

四、创建页面

五、工程配置pages.json

全局配置 和 页面配置

1globalStyle全局外观配置

文件位置：pages.json文件

globalStyle<====>window，同原生微信小程序全局配置中的window选项用于设置应用的状态栏、导航条、标题、窗口背景色等。

// 等同于微信小程序中的window配置项
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "app",
        "navigationBarBackgroundColor": "#f00",
        "backgroundColor": "#F8F8F8",
        "enablePullDownRefresh":true,
        "navigationStyle":"default"
    },

2页面配置

文件位置：pages.json文件

pages-------->{ path:'路径'，style:window }，用于设置页面的路由、状态栏、导航条、标题、窗口背景色等。

// 页面配置项
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            //页面路由 
            "path": "pages/index/index",
            // 页面的window配置项
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh":false
            }
        }
     ?  ,{
 ? ? ? ? ?  "path" : "pages/ceshi/ceshi",
 ? ? ? ? ?  "style" : ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
 ? ? ? ? ?  {
 ? ? ? ? ? ? ?  "navigationBarTitleText": "",
 ? ? ? ? ? ? ?  "enablePullDownRefresh": false
 ? ? ? ? ?  }
 ? ? ? ? ? ?
 ? ? ?  }
 ?  ],

3配置tabBar

文件位置：pages.json文件

// 配置tabbar
    "tabBar":{
        "selectedColor":"#ff053f",
        "list":[
            {
                "pagePath":"pages/index/index",
                "text":"首页",
                "iconPath":"static/images/icon/index.png",
                "selectedIconPath":"static/images/icon/indexFull.png"   
            },{
                "pagePath":"pages/ceshi/ceshi",
                "text":"我的",
                "iconPath":"static/images/icon/my.png",
                "selectedIconPath":"static/images/icon/myFull.png"  
            }
        ]
    }

七、uniapp基础语法

uniapp语法：vue语法（数据绑定 列表渲染 条件渲染 事件绑定等） + 微信小程序语法（ 组件 api 生命周期 页面事件函数等）

1数据绑定

使用vue语法  标签属性绑定： v-bind | : ? ? ? ?  标签内容绑定：{{}}

2条件渲染

使用vue语法 ?  v-if ?  v-else-if ? v-else ?

第四节

3列表渲染

使用vue语法 ? v-for ? :key

注意事项：

1.在H5平台 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。

2.在非H5平台 循环对象时不支持第三个参数，如 v-for="(value, name, index) in object" 中，index 参数是不支持的。

4事件绑定

使用vue语法， v-on | @
不能使用微信小程序中bind或者是catch绑定事件 ，但是可以使用微信小程序事件类型  比如：@tap

5计算属性

computed  语法同vue

6静态资源引入使用

模板：
    <!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
    <!-- @指向项目根目录，在cli项目中@指向src目录 -->
 ?  <image class="logo" src="/static/logo.png"></image>
 ?  <image class="logo" src="@/static/logo.png"></image>
 ?  <!-- 相对路径 -->
 ?  <image class="logo" src="../../static/logo.png"></image>
 ? ?
js:
    // 绝对路径，@指向项目根目录，在cli项目中@指向src目录
 ?  import add from '@/common/add.js'
 ?  // 相对路径
 ?  import add from '../../common/add.js'
 ?  注意：js文件不支持使用/开头的方式引入
 ? ?
css:
    /* 绝对路径 */  @指向项目根目录，在cli项目中@指向src目录
 ?  @import url('/common/uni.css');
 ?  @import url('@/common/uni.css');
 ?  /* 相对路径 */
 ?  @import url('../../common/uni.css');
 ? ?
 ?  //也支持微信小程序语法
 ?  @import  '相对路径';

7样式配置

1.uni-app 支持的通用 css 单位包括 px、rpx。多端开发建议使用rpx；
?
2.px转rpx工具自动转换设置
工具栏-设置-编辑器设置--开启px转换rpx选项，根据实际设计稿宽度，设置转换比例
?
3.uniapp中支持scss/sass使用
    工具-插件安装-scss/sass编译插件安装。
?
4.uniapp中支持less使用
    工具-插件安装-less编译插件安装
?

配置单位转换：

less/scss安装：

八、生命周期

uniapp中完全支持vue（组件生命周期）和小程序的生命周期函数（应用生命周期和页面生命周期），uniapp生命周期包括：应用生命周期、页面生命周期和组件生命周期。
?
1.在app.vue中可以使用小程序的应用级别的生命周期函数；
2.在页面组件（pages目录）可以使用小程序的页面生命周期和vue的组件生命周期函数；
3.在components目录中的组件中只能使用vue的生命周期函数不能使用小程序的页面生命周期函数；
?

九、组件通信

1.单文件组件

根目录下创建components目录，右键选择创建组件。

2父传子

属性传递：props

3子传父

事件传递： this.$emit('事件名称','数据')
?
<sonComp name='李四' @channel='getSon'></sonComp>
?
// 监听子传父
getSon(msg){
    console.log(msg);
}
?
// 子传父
sendParent(){
    this.$emit('channel',{name:'我叫张三'})
}

4兄弟之间组件传值

中央事件总线  $emit() $on()
?
新建utils/bus.js文件：
    import Vue from 'vue';
 ?  export default new Vue();
?
// son
sendBrother(){
    BUS.$emit('brother','我是你的兄弟')
},
?
//brother
mounted(){
 ?  // 监听son传值
 ?  BUS.$on('bro',(info)=>{
 ?      console.log(info)
 ?  })
},

5uni-app页面通讯

uniapp页面通讯语法用于兄弟组件传值，本质是对vue中 $emit $on $once $off 等语法的封装

如果项目中使用vue原生语法就不再建议在使用uniapp,两者选择一种即可

地址：

uni-app官网

uni.$emit()触发全局的自定事件,附加参数都会传给监听器回调。
uni.$on()监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
uni.$once()全局只监听一次
uni.$off()移除监听事件
?
//son
sendBrotheruni(){
    uni.$emit('sendBrotheruni','我是你的兄弟uniapp') 
},
?
//brother
uni.$on('brouni',(info)=>{
    console.log(info)
})
?
destroyed(){
 ?  // 移除监听 防止内存泄露
 ?  uni.$off('brouni')
}

十、全局变量

1公用模块（模块化）

定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。这种方式维护起来比较方便，但是缺点就是每次都需要引入。

使用ES6  commonjs  语法规范

2挂载 Vue.prototype

将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。

这种方式，只需要在 main.js 中定义好即可在每个页面中直接调用。

可以将上面定义的地址直接挂载到vue原型链上：

3globalData

uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。

globalData是一种比较简单的全局变量使用方式。修改后全局可以同步变化

微信小程序语法  globalData在app.vue文件 js部分中定义

4本地缓存

语法同微信小程序 将wx开头替换成uni开头
 ?  存储数据
 ?  获取数据
 ?  根据key删除数据
 ?  清除所有缓存数据
 ?  获取当前缓存信息

5Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，一般用于大型项目开发。uniapp中内置vuex无需安装

新建store/index.js文件
 ?  // 引入vue  vuex  use  new  export
 ?  import Vue from 'vue';
 ?  import Vuex from 'vuex';
?
 ?  Vue.use(Vuex);
?
 ?  export default new Vuex.Store({
 ? ? ?  state:{
 ? ? ? ? ?  age:20
 ? ? ?  },
 ? ? ?  mutations:{
 ? ? ? ? ?  change(state){
 ? ? ? ? ? ? ?  state.age+=10;
 ? ? ? ? ?  }
 ? ? ?  }
 ?  })
?
在main.js挂载
    // 引入vuex 挂载到原型链
 ?  import store from '@/store/index.js';
 ?  Vue.prototype.$store = store;
?