mpvue開發大型體育專案及總結記
開篇
最近接到上頭的指示，要做一個體育類的小程式，並且要在元旦之前上線一版，看了下時間，距離元旦只有一個多月，而且除去測試的時間和雙休，最多隻有三個星期，時間相當的緊迫，而且需求文件都更新到1.3了，這也就意味著安卓和ios的版本迭代已經到了1.3了，而我們小程式要在三個星期內開發完1.0-1.3版本的功能，所以我們的時間相當的緊迫，看了下需求文件和原型圖，我整個人大吃一驚，有100多個頁面，我頓時懵逼了，產品經理更我說；你們只需做三個模組，最後一個模組不用做，我看了一下最後一個模組，有10幾個頁面，除去10幾個頁面還有90多個呀，頁面還好，最難的是需求文件的業務邏輯呀，而且這個專案的難度比中小型電商專案類的要難的多，互動相當的頻繁和複雜，怎麼辦呢，一句話，涼拌，畢竟這是boss要求做的專案，只好硬著頭皮往下做，不得不從。
技術選型
因小程式頁面多，切互動頻繁，如果用原生開發的話，時間來不急，而且頁面的互動很多，這樣原生小程式就顯得那麼的吃力了，最終我將技術選型放在了，wepy和mpvue這兩個框架上，wepy框架是微信官方維護的，相容性和擴充套件性很好，mpvue是美團旗下的，我最終選擇了mpvue，原因是mpvue的語法跟Vue的語法是一樣的，而且我們的前端同學都會Vue，所以選擇mpvue是最好的選擇，於是看了一下mpvue的文件和注意點，最終搭建了小程式的專案結構，將任務安排了下去，於是開啟了加班的苦日子....
-
技術點1-小程式，安卓，iOS三端資料資訊同步，免登陸
因專案中的登入方式含有微信登入，所以三端協商，如果使用者是微信登入的話，三端統一取，unionid這個欄位，這時肯定有同學要問；為什麼不取openid ，如果做過小程式的人一定知道openid是唯一的標識，微信小程式有一個，那麼在安卓，iOS他們也都有自已的openid標識，所以這樣是不能達到三端資料資訊同步，免登陸的效果的，微信官方介紹了6種獲取unionid 的方法,我們專案最終採用瞭解密獲取的方法，官方文件。
import {AchieveOpenid} from '@/http/api.js';
let that=this;
wx.login({
async success(resCode){
const cache=await 注意：這個方法是官方中的wx.login+code2Session方法，也確實可以獲取unionid，但是天有不測風雲呀，測試組的人員測出了unionid不存在的情況，而且還有幾個賬號也出現了這種問題，那麼我們就開始找原因，最終我們發現，如果使用者沒有關注過任何的公眾號，微信是不會給他返回unionid的，我們找到原因之後，馬上換了另外一種方法，那就是解碼的方式，也是我們最終的方法。
<button class='openpage-authorize'
open-type="getUserInfo"
lang="zh_CN"
@getuserinfo="onGotUserInfo">
</button>
複製程式碼 //注意我這裡只列舉解碼的程式碼，有些程式碼省略了，請熟知。
import WXBizDataCrypt from "@/utils/cryptojs/RdWXBizDataCrypt.js" //引用解碼
methods:{
deCode(encryptedData,iv,sessionKey){
let wxObj=null,data=null;
wxObj= new WXBizDataCrypt('wx3ea59bf3ff3a9bb8', sessionKey);
data= wxObj.decryptData(encryptedData,iv);
this.openid=data.unionId;
wx.setStorageSync('openId',data.unionId);
},
onGotUserInfo(e) { //通過按鈕觸發getuserinfo
if(e.mp.detail.userInfo){
this.deCode(e.mp.detail.encryptedData,e.mp.detail.iv,this.sessionKey);
}else{
toast('請再次授權');
}
},
}
複製程式碼最終我們可以通過上面的程式碼獲取unionId，解碼地址下載,注意：解碼這一步最好放在服務端解碼，不要放在客戶端解碼，這樣會造成資訊洩露.....
-
技術點2-在小程式中使用 canvas
wx.createCanvasContext 不懂得同學可以自已去看
微信官方文件，程式碼如下
const ctx = wx.createCanvasContext('myCanvas');
ctx.setLineCap('round')
var gradient1=ctx.createLinearGradient(0,0,170,0);
gradient1.addColorStop("0","#FFF956");
gradient1.addColorStop("1.0","#FF6C00");
var gradient2=ctx.createLinearGradient(0,0,170,0);
gradient2.addColorStop("0","#8156FE");
gradient2.addColorStop("1.0","#3AFFF1");
ctx.setLineWidth(4);
ctx.beginPath();
ctx.arc(50, 50, 30,0.75*Math.PI,0.25*Math.PI,false);
ctx.setStrokeStyle('#4e4f59');
ctx.stroke()
ctx.beginPath();
ctx.arc(50, 50, 38,0.75*Math.PI,0.25*Math.PI,false);
ctx.setStrokeStyle('#4e4f59');
ctx.stroke();
//勝
ctx.beginPath();
ctx.arc(50, 50, 30,0.75*Math.PI,(((winarc*1.5+0.75)%2)==0?2:((winarc*1.5+0.75)%2))*Math.PI,false);
ctx.setStrokeStyle(gradient1)
ctx.stroke()
//負
ctx.beginPath();
ctx.arc(50, 50, 38,0.75*Math.PI,(((failarc*1.5+0.75)%2)==0?2:((failarc*1.5+0.75)%2))*Math.PI,false)
ctx.setStrokeStyle(gradient2);
ctx.stroke()
ctx.setTextAlign('center');
ctx.setFontSize(16);
ctx.setFillStyle('#fff');
ctx.setTextBaseline('middle');
ctx.fillText('戰績', 50, 50);
ctx.draw()
複製程式碼注意點：如果canva的資料是非同步的話，一定要在資料載入完成之後，在讓它渲染到檢視層中去，如果不這樣做的話，canvas會資料不同步，具體的做法可以加一個開關，如下..
<canvas canvas-id="myCanvas" class="index-header-data-circle-canvas" v-if='on'></canvas>
複製程式碼 data(){
return {
on:false
}
}
async xx(){
try{
const data=await xxx();
this.on=data.code==='000'?true:false;
}catch (error) {}
}
//注意：以上程式碼只是模擬，僅供查考。
複製程式碼-
技術點3-圖片上傳轉化base64
圖片上傳微信小程式給我們提供了api,wx.chooseImage ，上傳簡單，關鍵是如何轉化base64位呢，我們的舒同學用瞭如下的寫法，看著確實沒什麼問題，用臨時路徑作為一個請求的url，把資料返回格式設定成arraybuffer，這個也確實是個辦法，在微信開發工具裡面也是ok的，但是天有不測風雲呀，在真機上請求報錯了，那麼這種方法pass掉。
wx.chooseImage({
success:res=>{
wx.request({
url:url,
responseType: 'arraybuffer', //最關鍵的引數，設定返回的資料格式為arraybuffer
success:res=>{
let base64 = wx.arrayBufferToBase64(res.data);
}
})
})
複製程式碼針對上面的問題，仔細的看了下微信官方文件，最終找到了一個程式碼少，簡單的方法，wx.getFileSystemManager()這個api可以解決我們上面的問題，微信官方文件，程式碼如下
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:(res)=>{
wx.getFileSystemManager().readFile({
filePath:res.tempFilePaths[0], //選擇圖片返回的相對路徑
encoding: 'base64',
success: res => {
console.log(res.data)
}
})
}
})
複製程式碼其實除了，wx.getFileSystemManager()可以解決我們的問題外，還有一種方法，那就是更html5一樣的處理方法，通過canvas來畫，然後在用canvas的api來轉base64，注意：如果通過canvas來轉base64的話，有個bug,那就是在iOS手機上圖片會出現旋轉90度的問題 小程式可以借鑑這個同學的方法來解決，如果是html5的話可以通過exif.js這個庫來解決問題。
-
技術點4-對picker的封裝
小程式中有個picker元件，他支援5中型別，雖然有5中型別但是每個專案的不同，所以對picker的用途就不同，因此我們將對picker進行封裝，來達到滿足我們專案的需求,我們封裝省市，時間日期等元件，我這裡就只介紹省市元件的封裝，其他的元件封裝原理同省市元件原理一樣的，我這裡就不多說了，程式碼如下。
<picker class="pickes" mode="multiSelector"
@change="PickerChange"
@columnchange="PickerColumnChange"
:range="allList"
range-key='provinceName'
:value='multiIndex' v-if='show'>
<div class="slot"></div>
</picker>
複製程式碼/**
* @describe 省市選擇器
* @rerurn 省，市，省id,市id
*/
import {allCity} from "@/http/api.js";
export default {
data() {
return {
list:[],
multiIndex: [0, 0], //顯示化動的列數
allList:[], //儲存二維資料
singleList:[], //儲存一維陣列
show:false, //防止資料沒有加載出來
cityInfo:{}, //儲存省，市，省id,市id
}
},
mounted(){
this.init();
},
methods:{
async init(){
try {
let child=[],data=null;
data=await allCity(); //獲取後臺返回的城市
this.singleList=data.result;
child.push(data.result[0]);
this.allList.push(data.result,child);
this.show=true;
} catch (error) {}
},
PickerChange(e) {
this.cityInfo.provinceId=this.singleList[e.mp.detail.value[0]].provinceId; //省id
this.cityInfo.provinceName=this.singleList[e.mp.detail.value[0]].provinceName; //省名
this.cityInfo.cityId=this.singleList[e.mp.detail.value[0]].cityList[e.mp.detail.value[1]].cityId; //城市id
this.cityInfo.cityName=this.singleList[e.mp.detail.value[0]].cityList[e.mp.detail.value[1]].cityName; //城市名
this.$emit('cityInfo',this.cityInfo); //將值傳給父元件
},
PickerColumnChange(e) {
switch (e.mp.detail.column) {
case 0:
this.list = [];
this.singleList.forEach(item => {
if (item.provinceId ==this.singleList[e.mp.detail.value].provinceId) {
item.cityList.forEach(item=>{
//注意這一步最為重要，給陣列新增一個和父物件一樣的鍵值名，這樣picker元件可以找的到
item.provinceName=item.cityName;
})
}
});
this.allList[1]=this.list;
this.multiIndex[0]=e.mp.detail.value;
this.multiIndex[1]=0; //注意這個表示的時選擇中省切換的時候，要將省的第一個城市放在第一位
break;
}
},
}
}
複製程式碼-
技術點5-在小程式使用高德定位
因專案中要用到定位功能，而小程式中的的api並不適用專案，所以就選擇了高德定位，高德小程式版文件，程式碼如下
//注意我這裡只列舉定位的程式碼，有些程式碼省略了，請熟知。
let _this = this,myAmapFun=null;
myAmapFun = new amapFile.AMapWX({
key: "xxxxx" //高德的金鑰
});
myAmapFun.getRegeo({
success(data){
_this.$store.dispatch('cityLocal',data[0].regeocodeData.addressComponent.city);
},
fail(err) {
wx.showModal({
title: '提示',
content: '定位失敗，請手動定位',
success (res) {
if (res.confirm) {
path({url:'/pages/city/main'});
}else if (res.cancel) {
_this.$store.dispatch('cityLocal','定位失敗');
}
}
})
}
});
複製程式碼-
技術點6-對微信小程式節點的運用
由於專案用到了城市索引選擇功能，所以就採用 wx.createSelectorQuery()這個api來實現這個功能，程式碼如下
<ul class="slide">
<li v-for="(item,index) in cityJson.leter"
:key="index"
@tap='touStart(item.letid,item.lettext)'>
{{item.lettext}}
</li>
</ul>
複製程式碼 //注意我這裡只列舉城市索引選擇的程式碼，有些程式碼省略了，請熟知。
onPageScroll(e){
this.scollTop=e.scrollTop //同步
},
methods:{
touStart(flag,text){
try {
wx.createSelectorQuery().select(flag).fields({ //運用微信節點api
dataset: true,
size: true,
rect: true,
computedStyle: ['margin', 'backgroundColor']
}, (res)=> {
wx.pageScrollTo({
scrollTop: this.scollTop+res.top,
duration: 0
});
this.on=true;
this.modalText=text;
setTimeout(()=>{
this.on=false;
},2000)
}).exec()
}catch (error) {}
},
}
複製程式碼當然實現上面這個功能也可以用其他的方法，如scroll-view，我這裡就不多說了。
-
技術點7-返回上一層頁面，重新整理頁面資料
我們可以通過微信中的wx.navigateBack()這個api就可以返回上一層頁面，但是怎樣返回上一層頁面並且重新整理呢，其實可以通過onShow這個生命週期函式來重新整理頁面，如果那個頁面含有引數的話，最好程式碼這麼寫
onShow(){
//之所以用try，是因為mpvue官方說，如果要獲取地址引數的話，最好在mounted週期裡面獲取，我們用try可以避免程式碼終止和報錯
try {
let id=this.$root.$mp.query.Id;
this.init(id);
}catch (error) {}
}
複製程式碼結語
由於時間的原因，我暫時先介紹這幾個在小程式中常見的問題和功能，後面我會陸續介紹，如下技術棧
- vue的三種ssr方法,以及在專案中的使用
- react+redux在專案中的使用
- 打造自已的webpack,gulp開發環境
- koa框架的介紹和使用