mpvue简单的使用

这几天总结了下小程序的流程，我接触不多，都是一些简单使用，如果发现错误请留言指正。

mpvue项目的创建 这里使用编辑器VSC

1. npm install --global vue-cli@2.9
   vue init mpvue/mpvue-quickstart my-project
   npm install
   npm run dev
   把创建后的项目引入到微信开发者工具运行，如果报未找到app.json入口文件，请在project.config.json文件下添加或更改"miniprogramRoot": “dist/wx/”

2. 添加相应的页面，一般复制pages下的logs文件夹改名 即可，删除不需要的东西；

3. 然后在APP.json下添加页面的相应路由 如：

4. 顶部导航栏的设置 app.json
   “window”: {
   “backgroundTextStyle”: “light”,
   “navigationBarBackgroundColor”: “#f66”, // 背景色
   “navigationBarTitleText”: “mpvue”, // title
   “navigationBarTextStyle”: “white” // 显示颜色，黑和白
   }

5. 底部导航栏的设置 app.json—“tabBar”

“tabBar”: {
“color”: “#d1cfcf”,//字体颜色
“backgroundColor”: “#404142”,//背景色
“selectedColor”: “#fff”,//点击后字体颜色
“borderStyle”: “white”, //上边框颜色，官方只提供黑白

      "list": [{ // 底部显示状态和链接的页面
        "text": "超神学院", //显示内容
        "pagePath": "pages/home/main", // 点击跳转的页面
        "iconPath": "static/tabs/home.png",//显示的图片
        "selectedIconPath": "static/tabs/home-active.png"//点击后显示的图片
      }, {
        "text": "英雄联盟",
        "pagePath": "pages/hero/main",
        "iconPath": "static/tabs/orders.png",
        "selectedIconPath": "static/tabs/orders-active.png"
      }],
      "position": "bottom"//导航栏所在位置，只有top和bottom
    }
     如果不想要创建生成的底部导航栏，可以把"tabBar"删除，然后写个自定义组件引用就好。

页面的构建

1. 页面的构建遵循vue的规则，正常构建即可，也可以使 用微信原生提供的组件https:/ developers.weixin.qq.com/miniprogram/dev/component/
   页面的渲染也是vue的语法。
2. SCSS的使用
   在写页面布局样式时用CSS太麻烦，这里选用SCSS的嵌套比较方便，首先npm i node-sass sass-loader -D安装两个模块，然后在style声明
   就可以使用scss了
3. 组件
   组件的构建也是vue的方式，在src/components下自定义组件，你可以复制文件下的card.vue作为模板删除不需要内容，改名即可
4. 组件的引用
   我在src/components/hero下创建了list.vue组件，用来渲染数据，组件的命名不用使用官方定义过的名字和HTML的标签名，以免发生不必要的错误，在父组件中引用如下：
   import Listhot from ‘@/components/hero/list’
   import Top from ‘@/components/common/top’
   components: {
   Top, //顶部导航栏
   Listhot//数据渲染组件
   }
   然后在父组件使用
   //这里我向子组件传值heroList
5. 数据的请求和向子组件传值
   父组件里使用了微信原生的数据请求方式wx.request({}),并赋值给heroList，首次定义heroList变量时不要为空，随意写点神魔都行。以免传值为空，页面渲染时出错。

        data () {
          return {
            heroList: [1, 2, 3, 4]
          }
        },
        components: {
          Top,
          Listhot
        },
        mounted () {
          wx.request({
            url: 'http://39.105.95.238/api/hero?pageCode=1&pageNumber=12',
            success: (res) => {
              this.heroList = res.data.data
              console.log(this.heroList)
            }
          })
        }
        子组件接收传值：用props接收传值
          export default {
            props: ['heroList']
          }

6. 数据渲染v-for的双层嵌套

<template>
  <div class="list">
    <div class="item" v-for="(item, index) in heroList" :key="index">
      <div class="imgbox">
        <div class="heroSkin-img" v-for="(item1, idx) of item.heroSkin" :key="idx">
        <image :src="item1.pic" />  
        </div>
      </div>         
    </div>      
  </div>
</template>
此处应避免两次循环的item和index相同，不然将报index相同的错误，双层循环还是比较实用的。

小程序UI库的使用

1. 推荐使用
   iview weapp https://weapp.iviewui.com/components/sticky
   vant weapp https://youzan.github.io/vant-weapp/#/intro
   两种使用方法相同

1. 以iview weapp为例
   在电脑任意文件夹内点击路径输入cmd快速打开命令提示符然后输入npm i iview weapp下载UI库的代码，将下代码中的dist文件夹改名（这里改名为iview）并复制到自己项目dist/wx目录下，在页面引用时需要在对应页面的main.json下声明使用组件

       {
          "navigationBarTitleText": "英雄联盟",
          "usingComponents": {
            "i-button": "/iview/button/index",//使用的是决定路径
            "i-rate": "/iview/rate/index"
          }
        }
        需要什么模块就引用什么（我引用的是按钮和评分模块）       
        在页面使用请参考官方API
        <i-button type="primary" >这是一个按钮</i-button>
        <i-cell title="基本用法">
          <i-rate 
              @change="onChange1" 
              :value="starIndex1">
          </i-rate>
        </i-cell>

第三方小程序的引用（以腾讯视频为例）

1. 需要先在微信公共平台–设置–第三方设置中去申请你用使用的第三方插件一般立刻就能申请成功，会返回一个AppID下面有用，和开发文档。
2. 在app.json下去声明这个插件

      "plugins": {
          "tencentvideo": {  //腾讯视频
            "version": "1.2.5",  //版本
            "provider": "wxa75efa648b60994b"  //腾讯返回的AppID
          }
        }

3. 在要使用插件的页面下main.json下引入使用

       "usingComponents": {
          "txv-video": "plugin://tencentvideo/video"
        }
        

4. 在页面使用

<txv-video vid="m0026z2kibn" playerid="txv1"></txv-video>

vid是腾讯视频的视频ID号，腾讯的播放视频是加密处理的，如果直接复制链接只能播放2小时，链接会更换，所以使用vid才能正常播放，获取方法请搜索（mpvue腾讯视频播放）
其它插件的使用方法和此例相同，使用方法请看你申请 插件成功后返回的开发文档

mpvue状态管理的使用（vuex）

1. mpvue中的状态管理和vue无差别，此处使用vuex。
   首先在要使用状态管理的页面文件夹下新建store.js文件。例：pages/hero/store.js

2. store.js中引入并使用vuex

        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)
        const store = new Vuex.Store({  //构建管理器
          state: {  //监控的数据变量
            heroList: [1, 2, 3, 4]  //父组件或者子组件里的数据变量
          },
          mutations: {
            changeHeroList: (state, data) => { //当检测到数据发生改变是出发此函数
              state.heroList = data  //并赋予新的数据继续监控
            }
          }
        })

        export default store  //暴露此模块

3. 相应页面的变量就不需要在定义了，因为在状态管理中 已经定义监控，下面为状态管理基础代码。
   在相应页面引入store

        import store from '@/pages/hero/store'
        export default {
        computed: {  //计算属性，由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
          heroList () {
            return store.state.heroList
          }
        },
        mounted () {  //数据的请求
          wx.request({
            url: 'http://39.105.95.238/api/hero',
            success: (res) => {
              store.commit('changeHeroList', res.data.data)  //改变 store 中的状态的唯一途径就是显式地提交 commit 
            }
          })
        }
      }