原標(biāo)題【10天搞完電商微信小程序de采坑日記】感覺(jué)已經(jīng)不太合適了，所以改一下~~
12月4日boss通知，要求盡快把現(xiàn)有m站功能克隆一份到微信小程序，5日開(kāi)始開(kāi)發(fā) - 9日基本完成，10日開(kāi)始提測(cè)+改BUG，12月13日-發(fā)布到微信后臺(tái)審核，12月14日開(kāi)始寫總結(jié)等發(fā)布，記錄一下開(kāi)發(fā)小程序的坑
微信搜: 新氧
微信號(hào): soyoung111
就能看到最新版的小程序，本文會(huì)不定期更新，最新的都在最上面~
因?yàn)楣ぷ鞣较蜣D(zhuǎn)移到其他方向，本章不再持續(xù)更新啦~
如果有很必要的東西再更新~
20180706 - 小程序自動(dòng)打碼
傳送門 小程序自動(dòng)打碼
20180301 - 新氧小程序春節(jié)活動(dòng)總結(jié)
- 前期活動(dòng)做了充分準(zhǔn)備，文案/圖片/規(guī)則基本都是server端回傳的，靈活調(diào)整
- BUG雖少但還是有的(迷死氧一直在嚴(yán)苛要求我們要做到極致)，有分享圖沒(méi)出來(lái)的（壓縮分享圖大?。兄貜?fù)分享沒(méi)反應(yīng)的（這個(gè)找了好多人復(fù)現(xiàn)，但是都沒(méi)有，后期需要有個(gè)報(bào)錯(cuò)反饋機(jī)制）
- 未來(lái)活動(dòng)展望，第一個(gè)活動(dòng)基本做的很靈活，所以還算順利，首頁(yè)的入口也是配置型，為以后的活動(dòng)鋪好了路~
- 辛苦UI/Server/QA，大家過(guò)年的時(shí)候也背著電腦
- 有個(gè)小插曲，活動(dòng)上線開(kāi)入口的時(shí)候運(yùn)營(yíng)說(shuō)不知道活動(dòng)開(kāi)始，規(guī)則/文案都是運(yùn)營(yíng)給的，晚上12點(diǎn)自己開(kāi)入口了我們看著量上去了就臨時(shí)下掉，運(yùn)營(yíng)一臉茫然，還是希望以后的活動(dòng)運(yùn)營(yíng)稍微走走心多溝通~
20180209 - 新氧小程序技術(shù)更新
小程序分享集卡活動(dòng)，不同群獲得不同得卡片，集滿有現(xiàn)金獎(jiǎng)勵(lì)，包含的技術(shù)點(diǎn):
- onShareAppMessage頁(yè)面內(nèi)喚醒分享及群id獲取，server端記錄判斷是否重復(fù)分享
// 開(kāi)啟shareTickets來(lái)獲取群信息，
// 再通過(guò)openid/session_key還有iv去解密 encryptedData，是否對(duì)應(yīng)/重復(fù)
wx.showShareMenu({
withShareTicket: true
})
- 跑馬燈: 用swiper實(shí)現(xiàn)，css3和wx.createAnimation在不同設(shè)配展示都會(huì)有或多或少的bug... 權(quán)衡下，用wx官方組件swiper是最好的實(shí)現(xiàn)方式
- 小程序css3部分效果實(shí)現(xiàn)
css里面的animation/keyframes/transform都用啦，做翻牌子，彈出效果
打包的時(shí)候有autoprefix，兼容性不用擔(dān)心~
- 之前一直在考慮 彈出層怎么去禁止底層的touchMove ，這次終于實(shí)現(xiàn)啦，其實(shí)很簡(jiǎn)單，就是主內(nèi)容區(qū)用 scroll-view去做滾動(dòng)。有彈出層的時(shí)候把scroll-y設(shè)置成false，沒(méi)有彈出層設(shè)置成true.再通過(guò)wepy.getSystemInfoSync()在頁(yè)面加載的時(shí)候，給個(gè)高度
最后是個(gè)截圖~ 2月8日晚上提審,9日上午就過(guò)了 ~
20180119-新氧小程序技術(shù)更新
- 小程序增加分包 ，wepy同步更新，但是需要在當(dāng)前項(xiàng)目目錄單獨(dú)安裝wepy-lick@1.6.1-alpha4，點(diǎn)擊具體查看
npm install wepy-cli@1.6.1-alpha4
否則會(huì)報(bào) 'xxxx 出現(xiàn)腳本錯(cuò)誤或者未正確調(diào)用 Page()'
然后一步一步按照官方分包文檔操作就可以啦
分包成功后的小程序，在第一次點(diǎn)擊分包加載的頁(yè)面時(shí)，會(huì)出現(xiàn)一個(gè)loading，加載過(guò)不觸發(fā)冷啟動(dòng)，就不會(huì)有這個(gè)loading啦
-
跳轉(zhuǎn)限制限制增加到9層，之前介紹過(guò)，團(tuán)隊(duì)統(tǒng)一使用跳轉(zhuǎn)方法，修改頁(yè)面堆棧判斷l(xiāng)ength，就可以了
修改頁(yè)面堆棧 小程序里獲取 DOM 動(dòng)態(tài)設(shè)置高度
背景: 在組件里面有個(gè)swiper，需要?jiǎng)討B(tài)設(shè)置高度，只要先動(dòng)態(tài)獲取高度再賦值給swiper，并且頁(yè)面多個(gè)組件不沖突
官方獲取DOM文檔，點(diǎn)擊查看
關(guān)于隨機(jī)數(shù)會(huì)重復(fù)...一個(gè)頁(yè)面最多4個(gè)組件，100個(gè)隨機(jī)數(shù)，問(wèn)概率
4.在這版本中，我們嘗試把原來(lái)h5/hybrid-app的頁(yè)面拿過(guò)來(lái)直接做渲染，只要把less里面的rem單位換一下，基本就可以使用了。但是在class選擇器解析優(yōu)先級(jí)的時(shí)候，我們發(fā)現(xiàn)微信小程序的規(guī)則和瀏覽器規(guī)則/flex在ios8上/ 默認(rèn)的display:block/ 默認(rèn)的*{box-sizing:border-box} 等等會(huì)有不太一致的地方，所以進(jìn)行了微調(diào)整
最后等新版本審核更新~
二維碼
基礎(chǔ)
wepy
wepy文檔
是一款讓小程序支持組件化開(kāi)發(fā)的框架，通過(guò)預(yù)編譯的手段讓開(kāi)發(fā)者可以選擇自己喜歡的開(kāi)發(fā)風(fēng)格去開(kāi)發(fā)小程序。
微信小程序·API
框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲(chǔ)，支付功能等。
wx. 開(kāi)頭，在wepy中可用 wepy. 替換
微信開(kāi)發(fā)者工具
成為開(kāi)發(fā)者后，可以掃碼開(kāi)發(fā)預(yù)覽調(diào)試
人員
6個(gè)前端小伙，基本都是0基礎(chǔ)，現(xiàn)看文檔現(xiàn)寫
頁(yè)面
首頁(yè)+商品列表+商品詳情+確認(rèn)訂單+訂單支付+支付結(jié)果+個(gè)人中心+訂單列表+訂單詳情+退款+優(yōu)惠券-紅包+活動(dòng)-專題-專場(chǎng)+出發(fā)城市列表等等頁(yè)面
目錄結(jié)構(gòu)
+-- /dist 生成后文件 ，對(duì)應(yīng) 微信開(kāi)發(fā)者工具里面的指向目錄
|
+-- /src 開(kāi)發(fā)目錄
| |
| +-- /components 組件
| |
| +-- /images 圖片
| +-- /mixins less-mixins + 開(kāi)源js資源
| +-- /pages 開(kāi)發(fā)目錄
| | |
| | +-- index.wpy 業(yè)務(wù)頁(yè)面
| | +-- product.wpy 業(yè)務(wù)頁(yè)面
| | +-- pay.wpy 業(yè)務(wù)頁(yè)面
|
| +-- app.wpy 公共數(shù)據(jù)/配置/方法等等
|
|-- package.json
|-- wepy.config.js // 參考webpack.config.js
搭環(huán)境
- wepy和 微信開(kāi)發(fā)工具 需要配置下，如果忽略這里，會(huì)報(bào)錯(cuò)
-
編輯器 - 配置 - (vs code)
格式化 *.wpy 文件
- 插件的使用需要修改下vs-code對(duì)于文件格式的判斷才能使用不同的插件，下圖又下角顯示文件格式為vue還是wxml還是txt等等，點(diǎn)擊切換選擇，也配置所有
wepy 及 小程序 生命周期
import wepy from 'wepy'
export default class Index extends wepy.page{
customData = {} // 自定義數(shù)據(jù)
customFunction () {} //自定義方法
onLoad () {} // 在Page和Component共用的生命周期函數(shù)
onShow () {} // 只在Page中存在的頁(yè)面生命周期函數(shù)
onUnload (){} // 在頁(yè)面navigateTo等等行為時(shí)觸發(fā)
config = {}; // 只在Page實(shí)例中存在的配置數(shù)據(jù)，對(duì)應(yīng)于原生的page.json文件
data = {}; // 頁(yè)面所需數(shù)據(jù)均需在這里聲明，可用于模板數(shù)據(jù)綁定
components = {}; // 聲明頁(yè)面中所引用的組件，或聲明組件中所引用的子組件
mixins = []; // 聲明頁(yè)面所引用的Mixin實(shí)例
computed = {}; // 聲明計(jì)算屬性
watch = {}; // 聲明數(shù)據(jù)watcher
methods = {}; // 聲明頁(yè)面wxml中標(biāo)簽的事件處理函數(shù)。注意，此處只用于聲明頁(yè)面wxml中標(biāo)簽的bind、catch事件，自定義方法需以自定義方法的方式聲明
events = {}; // 聲明組件之間的事件處理函數(shù)
}
采坑
小程序跳轉(zhuǎn)H5，h5跳轉(zhuǎn)小程序
2017年11月12日的時(shí)候微信加了web-view組件
需要配置 白名單
h5升級(jí) jssdk 1.3.0可以使用 navigateTo等跳轉(zhuǎn)方法
并且可以u(píng)rl傳參
小程序 5層 頁(yè)面跳轉(zhuǎn) / 頁(yè)面堆棧 問(wèn)題
描述: navigateTo 超過(guò)5次頁(yè)面不跳轉(zhuǎn)，看log是因?yàn)樘D(zhuǎn)層級(jí)過(guò)深
原因：為了不讓用戶在使用小程序時(shí)造成困擾，我們規(guī)定頁(yè)面路徑只能是五層，請(qǐng)盡量避免多層級(jí)的交互方式。
解決方案：
1 - 在app.wpy里面 封裝公共方法，不再使用wepy.navigateTo或者redirectTo
2 - 每個(gè)頁(yè)面在onload 和onUnload 時(shí) 把 this.getCurrentPages存到 setStorageSync 里面
3 - 頁(yè)面 調(diào)用跳轉(zhuǎn)方法時(shí)，getStorageSync 取出剛才存的getCurrentPages，判斷是使用navigateTo還是redirectTo，目前是大于4的時(shí)候用redirectTo 所以規(guī)則就是 1,2,3,4,5,5,5...
小程序 適配 IphoneX
1 - 在app.wpy里面 封裝公共方法
isIphoneX(...params) {
try {
const that = this
if (that.globalData.isIphoneX == 1) {
return 1
} else if (that.globalData.isIphoneX == 0) {
return 0
}
let res = wx.getSystemInfoSync()
// console.log(res.model)
// console.log(res.pixelRatio)
// console.log(res.screenWidth)
// console.log(res.screenHeight)
if (res.pixelRatio == 3 && res.screenWidth == 375 && res.screenHeight == 812) {
that.globalData.isIphoneX = 1
return 1
}
that.globalData.isIphoneX = 0
return 0
} catch (error) {
console.log(error.message)
}
}
2- 公共樣式
.iphone-x{
// .px2rpx(padding-top,44);
.bottom-fixed{
.px2rpx(bottom,34);
}
box-sizing: border-box;
position: relative;
// &:before{
// content:' ';
// position:fixed;
// top:0;
// left: 0;
// width:100%;
// .px2rpx(height,44);
// background: #fff;
// z-index: 999;
// }
&:after{
content:' ';
position:fixed;
bottom:0;
left: 0;
width:100%;
.px2rpx(height,34);
background: #fff;
z-index: 999;
}
}
3 - 在 業(yè)務(wù)頁(yè)面 onLoad時(shí) 調(diào)用，并追加樣式，再根據(jù) .iphone-x 進(jìn)行適配書寫樣式
onLoad(options){
this.isIphoneX = this.$parent.isIphoneX()
}
<view class="container" :class="{iphone-x:isIphoneX ==1}">
</view>
小程序 請(qǐng)求取消 request abort
如果用了wepy，這里還是需要換成 wx.request而非 wepy.request
const requestTask = wx.request({
url: 'test.php', //僅為示例，并非真實(shí)的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
requestTask.abort() // 取消請(qǐng)求任務(wù)
autoprefix
吸頂效果 - 老鄉(xiāng)提供
position:sticky - ios支持，安卓部分機(jī)器 呵呵噠，
如果用onPagesScroll去寫，性能不佳...
<rich-text> 此組件用于實(shí)現(xiàn)富文本 - 老鄉(xiāng)提供
- nodes結(jié)構(gòu)的數(shù)據(jù)絕對(duì)優(yōu)于string結(jié)構(gòu)的數(shù)據(jù)，server給與的string結(jié)構(gòu)的數(shù)據(jù)小程序會(huì)自動(dòng)轉(zhuǎn)化，但是特別影響性能，小程序能轉(zhuǎn)，server也必定應(yīng)該能轉(zhuǎn)，所以這個(gè)過(guò)程一定交給server。；
- 組件對(duì)于組建內(nèi)的樣式干預(yù)問(wèn)題：全局支持的標(biāo)簽有限，是我們kindEditor支持標(biāo)簽的子集，所以有可能發(fā)生富文本內(nèi)容丟失的問(wèn)題（解決方案是將不支持的標(biāo)簽里替換成div,因?yàn)閐iv可以多層嵌套）；對(duì)于組建內(nèi)的富文本標(biāo)簽 全局支持class 、 style、相應(yīng)標(biāo)簽的部分屬性 ，但是不支持tag選擇器、id選擇器；
關(guān)于滾動(dòng)部分
滾動(dòng)的業(yè)務(wù)場(chǎng)景更適合用<scroll-view>實(shí)現(xiàn)，而不是自己寫樣式實(shí)現(xiàn)。
關(guān)于圖片引用
image組件默認(rèn)寬度300px、高度225px，沒(méi)有height和width屬性，只能通過(guò)樣式干預(yù)。
關(guān)于圖標(biāo)icon
iconfont生成后，base64引用就能使用了
https/http
跟年初 ATS 要求一樣，能https就https，免去很多莫名其妙的問(wèn)題
html標(biāo)簽
小程序是可以使用 div p span 等Html標(biāo)簽的，只是在容錯(cuò)兼容上不如chrome,最好小程序標(biāo)簽配合使用，標(biāo)簽閉合寫完整就行，有原生組件用原生組件
$apply
異步調(diào)用刷新視圖，需要scope上的所有數(shù)據(jù), wepy 是當(dāng)前頁(yè)面或者組件數(shù)據(jù) ，效率好很多
調(diào)用app實(shí)例
調(diào)用app實(shí)例需要 root
數(shù)據(jù)統(tǒng)計(jì)埋點(diǎn)
數(shù)據(jù)統(tǒng)計(jì)這里，有微信自己的數(shù)據(jù)統(tǒng)計(jì)和自定義事件來(lái)收集，
我們也引入了阿拉丁幫忙來(lái)進(jìn)行數(shù)據(jù)收集
發(fā)布
小程序在初始化的時(shí)候，會(huì)把所有js文件都加載進(jìn)來(lái)（即使是沒(méi)展示的頁(yè)面）目前wepy自帶的壓縮很貼心，基本不用改啥配置就能減少體積很多
遺留問(wèn)題
- 多層級(jí)嵌套雖然用 getCurrentPage解決了，但是頁(yè)面重復(fù)打開(kāi)，并且點(diǎn)左上角返回，導(dǎo)致Appdata里面頁(yè)面堆棧覆蓋銷毀，無(wú)法觸發(fā)事件的情況。目前是沒(méi)有解決或者在關(guān)鍵頁(yè)面使用redirectTo去處理，等后續(xù)有個(gè)解決方案再補(bǔ)上
- 富文本有時(shí)候會(huì)有特殊字符的報(bào)錯(cuò)，暫時(shí)沒(méi)做過(guò)濾處理
- 版本更新(熱啟動(dòng)和冷啟動(dòng)) 改了代碼重新審核發(fā)布，只有在冷啟動(dòng)的時(shí)候才有效...熱啟動(dòng)無(wú)效... 冷啟動(dòng)的異步下載成功后才會(huì)覆蓋更新代碼，并且在下次冷啟動(dòng)才生效....這個(gè)就有點(diǎn)坑了，也就是只能微信幫你銷毀小程序才能在再下次是新的代碼
感受
兩份文檔 wepy + 微信小程序api 一起看，少了那個(gè)都不行
不能關(guān)閉eslint，能避免很多低級(jí)出錯(cuò)
想簡(jiǎn)單的把h5改改就嵌套進(jìn)來(lái)的體驗(yàn)肯定不如原生的好，目前是1-2個(gè)頁(yè)面和專題頁(yè)面用web-view
-
看看rescuetime就知道這一周有多忙啦
rescuetime 團(tuán)隊(duì)的鄉(xiāng)親們都很棒，第4-5天基本都完成的時(shí)候興奮得不得了~ 提交審核那一刻也開(kāi)心的不得了~
細(xì)節(jié)真的很重要！細(xì)節(jié)真的很重要！細(xì)節(jié)真的很重要！
