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