上不了線的小程序

寫在前面

還是自用的 RSSHelper，本來想通過小程序跨平台，丟棄 ionic 的，後來發現上不了線

零。注意事項

如果準備做個想上線的小程序，務必先仔細確認以下幾點：

1. 內容能否通過類目審核

一級分類是快遞郵政、教育、出行、生活服務、餐飲、旅遊、工具、商業服務、體育，向下更細，然後發現竟然沒有合適的分類...

所以盡早出 DEMO 提交審核確認內容是否合法，不要吭哧吭哧幹了一個月，最後發現無法上線

2. 功能及交互能否滿足需求

比如取用戶信息、定位、音頻視頻、文件、羅盤藍牙加速器等等，提到的這些都支持，但支持到什麼程度，存���什麼限制，都需要通過 文檔 了解，甚至 DEMO 驗證

做到一半發現不支持 XXX 功能，就麻煩了

比如目前不支持展示 H5 頁面，不能通過小程序直接展示（嵌 webview 之類的），也不能跳轉瀏覽器打開，對於資訊類 App，就是極大的限制

如果想做個自用的小程序，也要考慮上面的問題，因為不上線連自用都不允許（預覽有過期限制，半小時吧）

一。限制

1. 接口

小程序接口強制要求HTTPS：

設置/服務器域名

request 合法域名
socket 合法域名
uploadFile 合法域名
downloadFile 合法域名

服務接口白名單只能是 HTTPS 域名，否則 IDE 開發環境都發不出去請求。如果接口還是 HTTP，只能臨時走假數據，本地 mock 服務也不行，因為有嚴格域名校驗

所以第一件事是確認接口支持 HTTPS，如果不支持，盡快把服務搬過去，否則需要假數據模擬各種接口，比較麻煩，而且畢竟與真實請求不同，不利於及早發現問題

P.S. 關於免費 HTTPS，可以參考 [nginx HTTPS 反向代理](/articles/nginx-https 反向代理/)

2.bundle 大小

源碼及資源打包後大小不能超過2M，對於圖片資源不多的純手工項目還好，如果：

• 圖片資源很多

• 依賴一些第三方 lib

• 項目規模較大（代碼量）

一級頁首屏圖片資源非常多的話，除了壓縮沒有更好的方法，非一級頁首屏圖片可以放到服務端去。第三方 lib 盡量少用，2M 限制下，引入第三方 lib 就必須要仔細考慮了。項目本身非常龐大，比如幾十萬行代碼量的話，gg，這算大程序

P.S.bundle 大小超出 2M 的話，無法提交編譯包，提示刪除文件重試

3. 賬號類型及認證

與公眾號管理方式一樣，區分個人號、企業號、認證與否等等：

卡券接口 要求認證
開放平台綁定小程序 要求開發者資質認證

P.S. 無論個人公眾號還是個人小程序，都無法認證，交錢的機會都不給

相對訂閱號與企業號的差別，小程序的限制少了一些，僅卡券 API 有限制。對於公眾號綁定小程序，倒是沒嚴格限制（不限制賬號類型及認證與否，但有數量限制）

另外，個人公眾號無法註冊小程序（可以關聯小程序，提供入口），所以迫不得已又弄了個郵箱

暫不支持個人/媒體/政府/其他組織快速創建小程序，請按照普通流程完成註冊。

4. 內容審核

分為 2 部分，類目審核與功能審核

上線難最主要的原因就是類目審核，目前僅支持一部分 App 類型，限制遠比想象的要大，目前似乎集中在信息查詢、訂單等方面

類目審核沒的商量，如果審核結果明確指出暫不開放該類目，只能先放棄

功能審核就是提測，交互不友好、功能不可用、太過簡單等等都可能是被拍回來的理由，但能通過改代碼解決的問題自然不是問題

5. 不支持遞歸模版

聲明並引用模版：

<template name="node">
  <text>{{node.text}}</text>
  <block wx:for="{{node.children}}">
    <template is="node" data="{{item}}"></template>
  </block>
</template>

<template is="node" data="{{node}}"></template>

希望展示樹形數據：

node: {
  text: 1,
  children: [{
    text: 2
  }, {
    text: 3,
    children: [{
      text: 4
    }]
  }]
}

結果只展示了 1，沒有遞歸向下，無法滿足需要展示無限層次結構的場景

為了解決解析渲染 HTML 的問題，有人想了一個笨辦法，複製 n 個模版，順序嵌套：

<template name="node-level0">
  <text>{{node.text}}</text>
  <block wx:for="{{node.children}}">
    <template is="node-level1" data="{{item}}"></template>
  </block>
</template>

// copy node-level1
// copy node-level2
// copy node-level3
// ...

這樣複製多少份，就能支持多少層，缺點是模版文件會巨大無比，維護也是個問題，但目前還沒有更好的辦法

二。項目 Demo

嘗試之後採用這樣的結構：

common/
  cache/        內存緩存、持久緩存
  components/   共用組件
  pages/        公用頁面
    detail/
    list/
  request.js    接口包裝
config/         常量配置
image/
pages/          各獨立頁面
  tab1/
  tab2/
utils/
<3rdLib>/       第三方依賴
app.js          入口
app.json        應用級配置
app.wxss        應用級樣式

需要注意頁面聲明問題：

• 所有獨立頁面，都必須在 app.json 的 pages 裡聲明路徑

• pages 第一項是首頁，後續增減頁面都要修改 pages 配置

• tabBar 的第一項必須與首頁一致，否則 tabBar 不顯示也不報錯

配置相關的一些問題，沒有任何報錯，很難排查

用到了一個 HTML 支持庫（999 顆星了，說明 HTML 展示需求很旺盛），負責解析 HTML，轉化成小程序原生組件展示

目前不是很完善，解析結果標籤數量很大（iOS 上沒有發現太明顯的性能問題，但肯定有優化空間），另外，對於 pre, code, span 等的支持效果比較差，代碼展示效果不好。可以服務把代碼轉圖片，一勞永逸，或者手動完善該庫（結構非常簡單，很容易擴展）

接口做好 HTTPS 之後，3 天開發完畢，靚照如下：

[caption id="attachment_1398" align="alignnone" width="625"] wx_RSSHelper_1[/caption]

[caption id="attachment_1399" align="alignnone" width="625"] wx_RSSHelper_2[/caption]

三。開發體驗

優點：

• 整套開發調試工具很完備（調試體驗很好）

• CSS 支持性非常好（從 H5 扒下來的樣式，基本可以直接用）

• ES6 開發環境

• 業務框架容易讓人接受（數據綁定等模版語法與 vue 類似）

缺點：

• IDE 很難用

• 文檔不全（按下態樣式如何實現之類的，完全沒有文檔）

• 上線難（奇怪的類目審核，很難找到準確的類目，審核效率一般）

• 配置化太高不靈活（一些功能只能通過配置項來完成，比如 tab 條，比較費勁）