mpvue开发小程序（二）环境配置

1.css样式

由于小程序自成一家,我们开发pc移动使用的想elementUI与mintui的功能和样式都无法转化，在这里，样式方面我们用weui去代替，地址：https://github.com/Tencent/weui/tree/master/dist/style

在项目根目录src/main.js下import "../static/css/weui.css"进行手动引入。

2.原有功能组件，可以替换为小程序官方的组件，但是语法依然是用vue来写，

小程序组件地址：https://developers.weixin.qq.com/miniprogram/dev/component/

例如：原来的select组件，代码为

<select slot="right" :disabled=isInfo v-model="information.info.sex" @change="">
          <option value="">请选择性别</option>
          <option v-for="(item, index) in config.login.gender" :key="index" :value="item.value">{{item.label}}</option>
        </select>

现在需要用小程序的picker组件：

<picker class="weui-btn weui-flex__item" :disabled=isInfo @change="genderChange($event,config.login.gender)" :value="genderIndex" :range="config.login.gender" :range-key="'value'">
          当前选择 : {{config.login.gender[genderIndex].value}}
        </picker>

这个组件的：value只会是0.1.2等等，不是我们一般ui框架想要的v-model的值。

所以需要在这个genderChange（）方法里去设置：

genderChange(e,data) {
      this.genderIndex=e.mp.detail.value;
      this.information.info.sex=data[e.mp.detail.value].value;
      console.log('选中的性别为：' + data[e.mp.detail.value].value);
    },

3.小程序全局的数据管理我们用vuex代替，或者懒人也可以用wx.setStorageSync这样的本地存储来替代

4.路由模块
原vue项目里的vue-router设置的router.js可保留
可npm install mpvue-router-patch --save 替换原来的vue-router
注意：在小程序里的app.json配置tabBar里的pagePath路径，必须通过
wx.switchTab({
    url: '../info/main'
})

这样的方法才能跳转。

5.组件
组件在components目录下保持不变

6.替换axios请求
npm install flyio   ||   cnpm install flyio
引入
import Fly from "flyio/dist/npm/wx";
let fly = new Fly;
用fly替换原来的axios
或者使用小程序原生的wx.request方法。

7.页面
原xx.vue页面将转为pages目录下的
xx-index.vue
  -main.js
  -main.json
  结构，其中index.vue就是之前的xx.vue，在main.json里可配置页面标题等
{
  "navigationBarTitleText": ""
}

所有的main.js可以不变，就用初创项目时生成的。

mpvue开发小程序（三）官方推荐以及开发遇到的问题