wepy 開發總結功能點

開發小程式中，遇到的wepy的幾點坑，記錄一下;

更詳細的專案總結記錄請見我的個人部落格：

1.定時器：

在頁面中有需要用到倒計時或者其他定時器任務時，新建的定時器在解除安裝頁面時一定要清除掉，有時候頁面可能不止乙個定時器需求，在解除安裝頁面（onunload鉤子函式）的時候一定要清除掉當前不用的定時器

let overtimestr = data.over_time.split('t')
let time1 = overtimestr[0].replace(/-/g,",")
let time2 = overtimestr[1].replace(/:/g,',')
let overtime = time1+ ',' +time2
let overtimearr = overtime.split(',')
that.countdownctrl( overtimearr, 0 );

最終把時間分割為[年，月，日，時，分，秒]的陣列，（如果後端已經把時間處理過了那就更好了），然後把該陣列傳遞給倒計時函式：

countdownctrl( time, group ) 
this.interva1 = setinterval(() => 
else
if( group === 1) 
this
}, 1000); 
}

至此，倒計時效果處理完畢，ps：終止時間一定要大於currentdate，否則顯示會出現異常（包括但不限於倒計時閃爍、亂碼等）

最後，退出該頁面去其他頁面時，一定要在頁碼解除安裝鉤子中清除倒計時！！！

onunload()

2.三層元件，阻止點選事件傳播：三層元件巢狀，第三層的點選事件不能傳到第一層去，適用於遮罩層+picker，阻止事件點選向上傳播，因為每一層都新增有點選事件，互不干擾、

解決: 新增函式 catchtap="funcname" 即可，funcname可為空函式，也可以直接不寫

3.元件傳值：

元件傳值和vue有點細微區別，vue強調父元件的陣列和物件不要直接傳到子元件使用，應為子元件可能會修改這個data，如圖：

但是，wepy中，有時候確實需要把乙個物件傳遞到子元件使用，單個傳遞物件屬性過於繁瑣，而且！！！如果單個傳遞物件的屬性到子元件，如果該屬性是乙個陣列，則子元件永遠會接收到 undefined 。此時最好用整個物件傳值替代單個物件屬性逐個傳值的方法，

且一定要在傳值時加入 .sync 修飾符，雙向傳值繫結。確保從介面拿到的資料也能傳遞到子元件，而非 undefined

:circlememberslist.sync="circlememberslist"

4.token判斷在與後台互動的時候，token必不可少。尤其是在小程式分享出去的鏈結，由其他使用者點開分享鏈結進入小程式內部，此時更是要判斷token，token的判斷一般選在 onshow（）鉤子執行而不在 onload（）鉤子內執行。若不存在token，則應該執行登入去拿取token

5.formid

submitform(e)

準備： crypto-js.js md5.js

sign函式：

/*
* * 簽名 */
function
sign(timestamp, content)

前端點選支付按鈕：

//
單獨支付介面
alonepay(arg) )
}}).then( res =>).then(res =>)
},

支付函式：

//
支付gocirclepay( circle_id, timestamp, sign, content, mode) ,
gettoken: 
true
}).then( res =>
if( signlocal !==signserver ) )
return
}            let contentarr = contentserver.split('&')
const timestamp = contentarr[0].split('=')[1];
const noncestr = contentarr[1].split('=')[1];
let index = contentarr[2].indexof("=");
const package1 = contentarr[2].slice(index+1)
const signtype = contentarr[3].split('=')[1];
const paysign = contentarr[4].split('=')[1];
wepy.requestpayment().then(res =>, 1000)
})}).then(res =>,
gettoken: 
true
}).then( res =>&sharelink=$`)
} else
if( mode === 2) &group_form_id=$`)
}})  
}).catch(res =>)})}

至此，支付就已經完成！

7.上傳（採用七牛雲）

頁面結構：

上傳生活照
(最多9張)
for="}" index="index" item="item" key="index">
if="}">

base.oploadimg()函式：

//
上傳const uploadimg = (imageurl, uptokenurl) =>, (error) =>, );
}); 
}

//
從相簿選擇**上傳
addimg()).then(async(res1) =>
let res =await base.uploadimg(filepath[i], that.$parent.globaldata.qiniutoken);
that.images.push(res.imageurl);
log('image長度：', that.images.length)
log('image：', that.images)
if( that.images.length >= 9) 
if(that.images.length > 9)
if(that.images.length >0 &&that.config.fimages)
//上傳使用者頭像列表
that.userinfo.photos =that.images
if(i === filepath.length -1)
}}).
catch((res) =>
})},
//取消上傳
canceluploadimg(e) 
let index =e.target.id
this.images.splice(index, 1)
},

至此，上傳解決

wepy 開發總結功能點

APP測試功能點總結

lotus 基本開發功能總結二

交流總結高效的開發功能

wepy 開發總結 功能點

APP測試功能點總結

lotus 基本開發功能總結 二

交流 總結 高效的開發功能

相關推薦

wepy 開發總結功能點

lotus 基本開發功能總結二

交流總結高效的開發功能