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可以不變,就用初創項目時生成的。