文章提綱
- 開(kāi)發(fā)前，初期的難點(diǎn)與思考
- 開(kāi)發(fā)中又出現(xiàn)的問(wèn)題以及解決方法
- 開(kāi)發(fā)完，分別對(duì)騰趣， 對(duì)小程序，對(duì)wepy還有哪些不足
年后先做了個(gè)簡(jiǎn)單的小程序活動(dòng)頁(yè)面，測(cè)試戀愛(ài)忠誠(chéng)度的，用的是小程序原生開(kāi)發(fā)的；
3.26前一個(gè)星期做騰趣商城小程序的項(xiàng)目規(guī)劃，劃分了差不多22個(gè)任務(wù)，兩人分工，其中難點(diǎn)有：
- 使用wepy開(kāi)發(fā)的模式轉(zhuǎn)變，還好之前用原生做過(guò)，對(duì)問(wèn)題分析略有幫助
- 定制功能各方面的不確定性，上傳用戶(hù)圖片，手勢(shì)操作，獲取定制元素的大小位置等信息
- 對(duì)組件化開(kāi)發(fā)還不夠了解，如何劃分組件更合理
- 兩個(gè)人開(kāi)發(fā)，代碼如何布置，防止文件沖突，暫時(shí)用svn
開(kāi)發(fā)中結(jié)合github上一個(gè)wepy的項(xiàng)目，用了它的封裝好的幾個(gè)函數(shù)，主要是http.js,(這里需要寫(xiě)對(duì)http.js的改動(dòng))；還有目錄結(jié)構(gòu)
components
activity
main
subject
images
mixins
pages
activity
main
subject
styles
custom
lib
app.wpy
config.js
遇到的問(wèn)題與解決
- 小程序文件限制為2mb，圖片普遍較大 （解決辦法：圖片存到線(xiàn)上服務(wù)器，使用統(tǒng)一的圖片地址前綴https://api.51app.cn/webPage/tq/xcx/images，style和script要分別引入）
- 定制頁(yè)面先在小程序頁(yè)面上實(shí)現(xiàn)了上傳圖片和手勢(shì)操作（剛好是alloy_finger的小程序版），以及獲取圖片的位置大小等信息，圖片清晰，操作也順暢（在我自己的6s上，安卓不知怎么樣）；后來(lái)考慮到字體文件過(guò)大只能用本地的文件，還有后面多個(gè)元素的操作，問(wèn)題的添加等問(wèn)題，遂用跳轉(zhuǎn)到webview的方式來(lái)是實(shí)現(xiàn)定制，此方案同樣有需要解決的問(wèn)題，一是不能用input type=file來(lái)上傳圖片，一點(diǎn)就退出了小程序，只能用微信jssdk的api，可它上傳后只返回一個(gè)圖片路徑或是微信服務(wù)器上的id，無(wú)法獲取到圖片的信息，不能用原來(lái)上傳圖的接口以及之前圖片旋轉(zhuǎn)的問(wèn)題，故通過(guò)傳線(xiàn)上圖片id給后臺(tái)下載圖片后獲取到Orientation來(lái)修復(fù)角度；
- 跳轉(zhuǎn)webview時(shí)要把token傳過(guò)去，防止兩邊的不統(tǒng)一
- 屬性選擇組件結(jié)合web上的還算順利
- 小程序不能直接識(shí)別公眾號(hào)圖片二維碼，小程序碼倒是可以
- banner上的可能出現(xiàn)跳轉(zhuǎn)url的地方，全部判斷是否有g(shù)oodsId，沒(méi)有就不顯示
- 圖片是<image></image> input記得要閉合
- 對(duì)于點(diǎn)擊按鈕請(qǐng)求接口后才跳轉(zhuǎn)頁(yè)面的要加防抖，如立即購(gòu)買(mǎi)的按鈕，瘋狂點(diǎn)的話(huà)，會(huì)出現(xiàn)多個(gè)確認(rèn)訂單頁(yè)面；一開(kāi)始是想到用個(gè)變量來(lái)控制，變量為true就return，初始是false，點(diǎn)擊一次后設(shè)為true，請(qǐng)求不管成功失敗complete后再設(shè)為false；后來(lái)想到和webview的定制頁(yè)面一樣用個(gè)loading層，剛好可以用微信的 wx.showLoading({
title:'',
mask:true
})；記得加上mask:true，阻止穿透，再就是這個(gè)它不是自己消失的，最后在請(qǐng)求complete里面wx.hideLoading() - 上面的問(wèn)題又想到好辦法，直接把這個(gè)loading加到http.js里面的請(qǐng)求中，那這樣就會(huì)和之前做的loading層重復(fù)，選擇去掉原來(lái)loading層的菊花圖，白色遮罩還是要有；這個(gè)辦法真好，不用一個(gè)個(gè)頁(yè)面加，統(tǒng)一修改了，再就是給了用戶(hù)提示也不錯(cuò)
- 微盟的支付，有兩種方式，一是自己已經(jīng)有了開(kāi)通了微信支付的帳號(hào)綁定即可，二是委托微盟代申請(qǐng)的小程序支付，其中還要填企業(yè)的營(yíng)業(yè)執(zhí)照，還有銀行卡等信息，應(yīng)該是他們先收錢(qián)然后再打到商戶(hù)賬上，貌似對(duì)個(gè)人不能用；微盟套餐的價(jià)格沒(méi)有直接看到，是申請(qǐng)后他們?cè)俾?lián)系。功能很多，確實(shí)很方便，生成的頁(yè)面還挺好看的，我們要是要做這一套，估計(jì)夠嗆。感覺(jué)我們自己的小程序都可以直接用他們的。。。
- 下拉刷新不回彈；在真機(jī)上回彈會(huì)超過(guò)頂部再往下回來(lái)；下拉卡的那下要不就是微信設(shè)計(jì)的，下拉后頓一下再回彈回去
下拉刷新默認(rèn)是不開(kāi)啟的，那就是頁(yè)面自己的彈性滾動(dòng)，感覺(jué)還不錯(cuò)
開(kāi)啟的話(huà)window加上enablePullDownRefresh: true，page再加onPullDownRefresh
解決不回彈：
要不就是在onPullDownRefresh里面再初始化一次頁(yè)面
要不就是加上wx.stopPullDownRefresh()
onPullDownRefresh() {
this.initPageData()
//去掉這個(gè)頁(yè)面就不會(huì)彈過(guò)頂部，后又發(fā)現(xiàn)去掉initPageData里的ajax請(qǐng)求也可以；
//最后發(fā)現(xiàn)是http.js里wx.showLoading導(dǎo)致的
//那就想辦法判斷是否是下拉刷新觸發(fā)的ajax，是就不loading
wx.stopPullDownRefresh();
//原來(lái)http.js在請(qǐng)求complete后有寫(xiě)這個(gè)，難怪上面那個(gè)有用，那就不用加這個(gè)了
}
//那就加個(gè)參數(shù)pullDown來(lái)判斷，true表示來(lái)自下拉刷新
//一開(kāi)始想到在ajax與url平級(jí)的地方加這個(gè)pullDown，然后在下拉里加個(gè)參數(shù)
onPullDownRefresh(){
this.initPageData(true)
}
initPageData(pullDown){
this.$get({
url: '***/today/list',
pullDown:pullDown||false
}。。。
}
//上面辦法每個(gè)頁(yè)面改動(dòng)較大
//可以在globalData加個(gè)全局變量isPullDown；
//然后在http.js里面獲取this.$root.$parent.globalData.isPullDown
//在onPullDownRefresh設(shè)置isPullDown為true，然后延遲100ms再設(shè)為false
//要保證在這100ms內(nèi)由下拉刷新引起的ajax都要觸發(fā)，設(shè)為true操作是異步應(yīng)該不要緊，除非有的ajax也有setTimeout
onPullDownRefresh() {
this.$root.$parent.globalData.isPullDown = true
setTimeout(()=>{
this.$root.$parent.globalData.isPullDown = false
this.$apply()
},100)
this.initPageData()
}
2018年5月10日 22:30:48 解決下拉不流暢最終方案
關(guān)鍵點(diǎn)：由于下拉刷新時(shí)有ajax，又觸發(fā)了wx.showLoading導(dǎo)致的,方案為在ajax里判斷是否處于下拉刷新的狀態(tài)
然后再封裝一下放到公共base.js里，頁(yè)面引用下就都可以用了
后將變量名改為hideWXLoading，函數(shù)名改為setHideWXLoading
是為了方便用到其他也要隱藏微信loading的地方，如購(gòu)物車(chē)加減后會(huì)出現(xiàn)兩次
//設(shè)置隱藏微信的loading
setHideWXLoading(){
this.$root.$parent.globalData.hideWXLoading = true
setTimeout(()=>{
this.$root.$parent.globalData.hideWXLoading = false
this.$apply()
},500)
}
只需要改為
onPullDownRefresh() {
this.setHideWXLoading()
this.initPageData()
}
暫時(shí)不知道如何統(tǒng)一設(shè)置所有頁(yè)面的onPullDownRefresh
我看京東小程序的下拉的那三個(gè)點(diǎn)是由小變大的，微信默認(rèn)的沒(méi)有大小變化
我懷疑京東的下拉刷新的彈性效果是自己?jiǎn)为?dú)寫(xiě)的，找找看有沒(méi)有這樣的庫(kù)
找到個(gè) 微信小程序動(dòng)畫(huà)能力研究（踩坑、iscroll源碼解讀）
test({aa=22}){
console.log(aa)
}
參數(shù)為對(duì)象的話(huà)就不能傳空了
this.test({})
- 下拉后未等頁(yè)面會(huì)彈點(diǎn)了其他頁(yè)面再回到上個(gè)頁(yè)面，一直處于下拉刷新的狀態(tài)，不自動(dòng)恢復(fù)
- wx.getUserInfo()注意：此接口有調(diào)整，使用該接口將不再出現(xiàn)授權(quán)彈窗，請(qǐng)使用 <button open-type="getUserInfo"></button> 引導(dǎo)用戶(hù)主動(dòng)進(jìn)行授權(quán)操作
可以考慮一進(jìn)去彈一個(gè)自己的彈窗，讓用戶(hù)點(diǎn)了去獲取授權(quán)
后發(fā)現(xiàn)可用open-data去直接拿到頭像和昵稱(chēng)，獲取token的流程不變，==那還要getUserInfo干啥==，那些用戶(hù)信息都能直接用了
所以先把之前獲取用戶(hù)信息的代碼去掉，放在這防止以后有用
// 獲取用戶(hù)信息
getUserInfo(cb){
let that = this
wx.getUserInfo({
success:function(res) {
cb(res)
},
fail:function(){
wx.getSetting({
success: (res) => {
if(res.authSetting['scope.userInfo']){
wx.getUserInfo({
success: function(res) {
cb(res)
}
})
}else{
wx.showModal({
title: '',
content: '檢測(cè)到您未打開(kāi)微信用戶(hù)信息授權(quán)，開(kāi)啟后即可進(jìn)行下一步操作',
success: function(res) {
if (res.confirm) {
wx.openSetting({
success: (res) => {
that.getUserInfo(cb)
}
})
}
}
})
}
}
})
}
})
}
//在initPageData中
that.getUserInfo(function(res){
let userInfo = res.userInfo
that.userAvatar = userInfo.avatarUrl
that.userName = userInfo.nickName
that.$apply()
})
需要改進(jìn)
- 需要多試試小程序的功能，如模版消息、客服對(duì)話(huà)等
- 了解小電鋪、微盟等小程序服務(wù)商，看他們是如何實(shí)現(xiàn)的，用戶(hù)小程序的管理、支付等
- 嘗試小游戲，乘著現(xiàn)在這股風(fēng)
- 首頁(yè)進(jìn)去很慢
