小程式開發入坑之旅

enilu發表於2018-07-16

本篇文章並不會完全從開發的角度描述如何開發一個小程式，畢竟官方的文件已經很齊全了 戳這裡看官方文件：https://mp.weixin.qq.com/debug/wxadoc/dev/。

本文會從如何快速上線一個小程式的角度來進行闡述。主要分文以下幾個方面。

  • 從零開始構建一個小程式
  • 小程式測試、上線
  • 小程式開發、上線過程中常見問題
  • 使用第三方快速構建小程式。
  • 使用wepy構建小程式

從零開始構建一個小程式

這一步基本要靠官方文件，而且文件很全面，主要分為四個步驟。

  • 註冊小程式
  • 小程式基本框架
  • 外部api

註冊小程式

登入小程式後臺註冊一個小程式，註冊完畢後，記錄下APPID，並配置記錄下後臺介面服務的域名，伺服器域名及小程式的後臺服務，小程式是一個前後臺高度分離的專案，所有資料除了呼叫第三方（主要是微信提供的api）的介面外就是呼叫自己業務系統的介面了。這裡配置的就是自己業務系統介面地址。

下載小程式開發工具，新建專案，並且錄入剛才的APPID，另外小程式要求後臺介面伺服器域名必須是https服務，如果開發工程中暫時未申請好https證書也沒問題，可以在小程式開發工具設定“不校驗安全域名、TLS版本及HTTPS證書”。

具體，參考官方文件：https://mp.weixin.qq.com/debug/wxadoc/dev/

小程式基本框架

這方面資訊官方文件也有詳細介紹：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html。 這裡簡單說明下：小程式開發的基本模式。

  • 全域性配置：

    • 首先有個app.json配置了系統的全域性引數，包括但不限於：
      • pages，小程式包含的所有頁面路徑
      • window，小程式視窗基本樣式
      • tabBar：小程式的主導航選單（可選配，不配置的話頂部或者底部就沒有選單）。
      • 其他配置，還有其他一些選配選項，這裡不一一贅述
    • app.js 小程式的全域性生命週期相關動作可以在此編寫，比如小程式初次啟動的時候、銷燬時等要做的事情可以在這個js中編寫。
    • app.wxss 小程式的全域性樣式，相當於html中的公共樣式檔案，所有頁面都引用該樣式檔案。

  • 各頁面開發 官方規範小程式頁面包含wxml,wxss,js三個檔案，分別對應：頁面、樣式、js（業務邏輯）。當然你也可以將所有內容都解除安裝wxml中通過style和script引入樣式和js，只是不建議這麼做，頁面複雜的時候不方便維護。

小程式測試、上線

小程式測試

小程式開發工具本身自帶了預覽功能，開發工程中可以實時看到頁面效果，也可以通過“預覽”按鈕生成的小程式碼，用微信掃描預覽小程式。 測試過程中充分利用小程式的控制檯，可以很方便的做除錯。

小程式上線

小程式上線過程本身很簡單，在小程式開發工具上點選“上傳”按鈕就會將小程式上傳到小程式管理後臺；然後登入小程式管理後臺進行釋出版本即可，剩下的就交給微信團隊稽核了一般需要3-5天，節假日順延。

小程式開發、上線過程常見問題

開發過程的問題

  • 開發過程中可能涉及後臺介面的調整為了避免頻繁調整、上線後臺服務，可以在開發過程中將介面地址設定為本地，並且取消開發工具的https驗證，這樣可以提高開發除錯效率。
  • 對於不同螢幕的適配，在開發過程中，對於同一個頁面應經常針對不同手機型別模擬器進行全面測試，開發工具提供了不同手機型別模擬器，很方便的測試。
  • 也許經常會遇到一些新增的頁面連結沒有效果或者打不開，不用急，檢查下app.json中的pages配置，也許你忘了將新增的頁面配置到pages中了。（嗯，沒錯，說的就是我自己 ~捂臉~）

上線問題

剛才說了上線過程本身並不複雜，但是要注意小程式的名稱、描述和小程式中涵蓋的內容，目前小程式稽核非常嚴格，要避免被打回來，比如下面常見打回情況。

  • 個人帳號的小程式不能包含：新聞、論壇、社群、招聘等字樣
  • 小程式的類目選擇不當
  • 小程式中不要放不完善或者體驗的功能，比如連結打不開、音樂、視訊播放不了，圖片載入不了、服務介面響應太慢。

關於常見問題後續開發過程中遇到了再補充完善。

使用第三方快速構建小程式

其實上線一個小程式很多時候不需要自己開發，完全可以使用第三方的服務網上還有很多其他的第三方小程式生成器，目前我只試用過輕芒小程式+，體驗還不錯；後期試了其他家的再補充。

使用wepy構建小程式

最後，隆重推薦wepy，wepy是一個小程式的元件化開發框架，更貼近於目前有MVVM框架開發模式。使用它開發過程可以拋棄微信官方的小程式開發工具，只是在測試預覽的時候使用它。 而且後期程式碼移植為h5也比較方便。而且wepy是微信官方出品，不用擔心支援問題，具體使用方式這裡不贅述，可以檢視其官方文件：https://tencent.github.io/wepy/

相關文章