小程序開發
本文從開發、工具使用、服務器、測試等方面比較全面地整理了小程序開發需要注意的相關事項。
服務類目
- 不要提供與小程序服務類目無關的功能，否則有可能被下架處理
- 建議根據所持資質進行服務類目添加
設計稿
- 尺寸最好用iphone6(物理像素750*1334)作為視覺稿的標準
開發前
- 具備基礎知識(Html+CSS+JS)
- 原生開發需要熟悉微信小程序的標籤(小程序沒有document對象，底層原因見本號文章)
- 使用框架則需要事先熟悉相應的API文檔
- mpx立足原生，完全兼容原生(對第三方組件庫完美支持)，坑少，做了很多增強，不必擔心跨平臺(微信、支付寶、百度、QQ、頭條)時的兼容問題
- 使用taro需要具備react基礎知識
- mpvue、uniapp、wepy需要熟悉Vue
- 第三方組件庫可以熟悉下iview、vant、wux、weui、colorui等，參考小程序UI庫推薦
- js推薦使用ES6語法
- 後端需要準備支持HTTPS的服務器
開發工具
- 推薦使用vscode
- vscode插件:minapp,gulp task,vscode-icon,prettier等，若使用框架(mpvue、mpx、taro、wepy、uni-app)則需要安裝對應的插件，部分框架沒有輔助插件
開發相關人員
- 需要先在微信小程序管理後臺(管理-成員管理-項目成員/體驗成員)添加開發成員微信
內網穿透服務
- 調試接口需要(微信會請求本地接口)
- 內網穿透方案可以選擇ngrok、localtunnel、frp、lanproxy等
微信開發者工具
- 勾掉checkHTTPS(體驗版測試時建議打開、測試人員可以使用體驗版進行測試)
- 項目接口URL配置一般需要設置request、upload、download
- URL修改後需要刷新(重啟)下開發者工具，拉取最新配置
- 開發者工具不支持視頻播放的測試，需要真機預覽
樣式注意點
- 佈局推薦使用彈性佈局(flex)，需要熟悉常用用法
- 小程序使用的響應式像素，所以製作頁面時需要先做一下換算，750px為基準的設計稿則只需將像素*2即可，例如按鈕寬100px，則width應為200rpx
- 適配iPhone X或者其他有劉海屏的情況(如果有底部定位按鈕可能會被橫條(home indicator)遮住、自定義頂部或者底部導航等不居中)
- 頁面元素總寬度之和不要超過375px(750px設計稿基準)、否則在部分機型會出現橫向滾動條
- 小程序包有2M大小限制,分包後最多支持12M、圖片儘量壓縮、刪除廢代碼
- 富文本對html解析的兼容性不好，官方rich-text、wxParse、Parser還有第三方插件需要酌情使用
- 運行環境分為三種，模擬器與安卓、IOS機型的效果可能出現不一致的情況，真機上效果需要最後確認一下。
- tabBar圖標顯示過大問題處理,UI做設計稿時需要注意不要貼邊
- image標籤src可以使用http協議加載網絡圖片,若要下載圖片則必須使用HTTPS
測試
- 小程序調試模式頁面正常、關閉調試之後異常需要確認服務器域名是否配置正確
- 測試人員可以使用開發版或者體驗版進行測試
- 開發版與體驗版在手機上屬於不同的版本會下載不同的軟件包
- 版本更新後提交測試、需要測試人員在本機刪除舊版本的程序包
版本更新
- 一般情況下人工審核最長需要7天、普遍為2到3天，快則一刻鐘、週末也會審核
- 審核注意小程序的服務類目，如若過界會被打回(有繞過的技巧，建議不要投機取巧)
- 線上版本支持回退及暫停服務功能、緊急情況可以先回退版本
運維日誌
- 線上運行會產生日誌、可以在管理後臺的開發-運維中心查看日誌，關注下報錯信息
高級操作
- 已整理Mac下小程序解包教程，請至個人博客(http://xuedingmiao.com/blog/xcx_unpack.html)或者bilibili教程(https://www.bilibili.com/video/av77770643)查看
- 解包過程視頻講解(http://tiaocaoer.com/blog/wyyx_decompile.html)
- 解包圖文講解(http://tiaocaoer.com/blog/xcx_unpack.html)
官方規範
官方規範會不定期更新，開發者需要隨時關注官方規範進行相應修改:https://developers.weixin.qq.com/community/operate/doc/000640bb8441b82900e89f48351401
資源彙總
微信小程序開發資源彙總:https://github.com/justjavac/awesome-wechat-weapp
若您有疑問可私信或到個人博客留言(百度"薛定喵君")
分享到:
