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開發小程序(三)官方推薦以及開發遇到的問題

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章