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

ゝ一世哀愁。 2022-04-12 12:59 307阅读 0赞

1.css样式

由于小程序自成一家,我们开发pc移动使用的想elementUI与mintui的功能和样式都无法转化，在这里，样式方面我们用weui去代替，地址：[https://github.com/Tencent/weui/tree/master/dist/style][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/][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开发小程序（三）官方推荐以及开发遇到的问题][mpvue]

[https_github.com_Tencent_weui_tree_master_dist_style]: https://github.com/Tencent/weui/tree/master/dist/style
[https_developers.weixin.qq.com_miniprogram_dev_component]: https://developers.weixin.qq.com/miniprogram/dev/component/
[mpvue]: https://blog.csdn.net/tan9374/article/details/84769899