小程序技術調研

非技術側內容精簡提要

通常審核被拒絕的原因

我們為什么拒絕你

1. 服務類目必須明確，與小程序內容符合，不可含有商業化，違禁用語
2. 名稱簡介需要有關聯性，並不能使用通用且布局識別性的詞語命名
3. logo清晰，且不得包涵騰訊，微信官方標識
4. 誘導分享，關注，下載行為，含有明示或暗示的浮層，彈窗，文案，按鈕等，會被拒絕
5. 小程序主要用途為營銷或者廣告的，會被拒絕（例如，懸浮廣告占據頁面50%視覺范圍，廣告遮住了內容等）
6. 小程序可用性和完整性沒有達到要求的（小程序本身會崩潰或導致微信崩潰的，存在嚴重bug的，非測試版）
7. 如果要收集用戶隱私，必須明確告訴用戶用途
8. 需要提供小程序文檔和說明
9. 禁止熱更新，禁止自動播放（斗魚都自動播放了，所以這條對我們沒什么用）
10. 自有賬戶體系必須有易於發現的退出選項
11. UI不符合規范（小程序有嚴格的UI規范）
12. 浮層和彈窗不可關閉
13. logo非透明或無有色邊框
14. 如相關法律法規規定提供服務的界面必須進行特別信息標識的，應予以明確標識。如小游戲必須在游戲開始畫面顯著位置標明游戲的批准文號、網絡游戲出版號以及著作權登記號，全文登載《健康游戲忠告》等。

其他注意事項

1. 小程序名稱不能喝公眾號，訂閱號，服務號重名，如果重名需要更換名稱
2. 小程序名稱設置完成后就再也不能更改了
3. 認證需要一點認證費用
4. 服務器配置每個月只能修改三次
5. 小程序頭像，介紹，服務范圍每個月只能修改1次，小程序二維碼在第一個版本上線后才能獲得
6. 一個主體可以注冊30個小程序，一個綁定身份的開發者只能創建5個小程序
7. 地理位置信息的采集使用必須征得用戶同意

8. 特殊行業所需要的資質材料

   1. 社交直播類： 《信息網絡傳播視聽節目許可證》或《網絡文化經營許可證》(經營范圍含網絡表演)
9. 小程序設計指南（不按規范來會被拒絕發布）

支付規范

1. 支付必須明確提示
2. 支付不得違法
3. ios暫不能為虛擬物品購買提供支付功能（由apple程序開發許可協議和app store審核指南所限制）

功能頁面的配置

功能頁面不涉及參數，可以配置最多5組，這五組可以生成小程序二維碼

綁定開發者

1. 已認證的企業小程序可以綁定20個開發者，40個體驗者。可以設置不同的權限。
2. 未認證的減半。
3. 個人的減半再減半。

技術側內容精簡提要

代碼的審核與發布

代碼在騰訊服務器上托管，所以我們需要在本地倉庫保管一份

小程序內是否可以內嵌網頁

1. 可以，但是要遵循微信外部鏈接內容管理規范
2. 但是提供功能應該與小程序一致，不得繞過微信小程序平台規則
3. 如果違反，可能導致被限制功能或封禁處理

程序內登錄問題

小程序可以通過公眾號授權登錄，也可以通過自有賬號體系登錄，但是自有賬號體系在審核時需要為審核員提供一份測試賬號。

小程序服務器域名

現有現場程序支持四個合法域名地址。

request合法域名	socket合法域名	uploadFile合法域名	downloadFile合法域名
網絡請求合法域名	websocket合法域名	文件上傳服務合法域名	文件下載服務合法域名
是否需要加密	是否需要加密	是否需要加密	是否需要加密
是 https	是 wss	是 https	是 https

小程序開發者工具

能夠查看小程序開發結果和上傳小程序代碼，必備

下載鏈接

簡易教程

簡易教程鏈接
框架教程
原生組件

基礎庫兼容處理

基礎庫是什么

微信客戶端提供給小程序的基礎能力的庫，有版本區別，所以用戶需要處理好不同版本之間的兼容問題

如何兼容?

微信在最初的api接口中就內置了wx.getSystemInfo，wx.getSystemInfoSync接口可以獲取版本信息，可以通過這個來給用戶提示，要求用戶升級到最新版本等。

如果要使用某個超前api特性，並想要向下兼容，可以使用wx.canIUse接口來判斷當前api是否支持

小程序運行機制處理

你關閉小程序的時候會發現小程序依然在執行，這是涉及到了小程序的運行機制，為了了解這些坑，以及對小程序的更新，運行，再次打開等邏輯進行優化，有必要了解一下其機制

運行機制

小程序的性能問題

1. 不能濫用setData
2. setData傳遞的數據不宜過大
3. 如果用戶處於后台狀態，不宜進行setData
4. 大圖片，長列表圖片資源過多會導致客戶端內存占用上升，會觸發webview內存回收，導致頁面卡頓。應勁量減少大圖片使用，並嘗試做圖片懶加載
5. 嚴格限制代碼包大小，（代碼包最大只能2MB，注意）
6. 控制靜態資源圖片的質量
7. 及時清理無用代碼和資源

小程序多線程問題

目前小程序支持多線程，但是我們貌似沒有特別的需求要處理大量數據。

小程序api能力

1. 網絡請求
2. 上傳下載請求
3. websocket請求能力

4. 選擇圖片能力

   1. 從本地相冊選擇圖片或使用相機拍照

5. 預覽圖片能力

   1. 預覽網絡圖片

6. 獲取圖片信息能力

   1. 獲取圖片寬高本地路勁
   2. 圖片方向
   3. 圖片格式

7. 保存圖片能力

   1. 需用戶授權
8. 錄音能力

9. 背景音樂播放控制

   1. 只支持m4a,aac,mp3,wav,hls。。。

10. 音頻組件

    1. 創建並返回內部audio上下文（全局只有一個<audio>）

11. 視頻組件控制

    1. 創建並返回視頻（就是video標簽對象）上下文對象，易於操作

12. 視頻能力

    1. 拍攝視頻或從手機相冊中選視頻，返回視頻的臨時文件路徑。

13. 保存視頻到用戶相冊

    1. 需要授權

14. 相機組件控制api

    1. <camera/>

15. 實時音視頻API

    1. <live-player/>（需要遞交材料申請開通）

16. 文件操作API

    1. 保存
    2. 獲取文件信息
    3. 獲取已保存文件列表
    4. 獲取已保存文件信息
    5. 刪除已保存文件
    6. 打開文檔、、只支持doc,xls,ppt,pdf,docx,xlsx,pptx

17. 數據操作api

    1. localStore緩存操作相關
18. 地理位置api

19. system api

    1. 包括系統信息
    2. 網絡狀態
    3. 加速度記
    4. 羅盤
    5. 大電話
    6. 掃碼
    7. 剪貼板操作
    8. 藍牙操作
    9. 屏幕
    10. 震動
    11. nfc
    12. wifi

20. 界面交互api

    1. 界面交互反饋（toast一類）,
    2. 界面設置（導航條設置，tabBar設置，置頂信息設置等），
    3. 導航跳轉api,
    4. 動畫api,
    5. 頁面滾動api，
    6. 繪圖api(與canvas息息相關)，
    7. 下拉刷新，
    8. 頁面節點操作（wxml api），
    9. 布局操作api
21. 第三方平台相關api

22. 開放接口

    1. 登錄api
    2. 授權api
    3. 用戶信息api
    4. 微信支付api
    5. 模板消息推送
    6. 客服消息
    7. 轉發分享api
    8. 收貨地址api
    9. 設置api
    10. 卡卷api
    11. 微信運動api
    12. 打開app API
    13. 生物認證api
23. 更新api
24. 打點上報api
25. 多線程api

小程序的測試

小程序測試方案初探

如何在移動應用中直接拉起小程序

首先，公眾號平台關聯小程序（小程序平台也能關聯公眾號）。
其次，安卓，ios可以加入相關sdk，調用其調起接口。

如何在一個程序頁面內發起群聊

1. 首先要分享
2. 群聊id
3. wx.updateShareMenu api了解一下，其中參數shareTicket是獲取openGID的關鍵
4. 使用wx.updateShareMenu({withShareTicket:true})重置了分享鏈接的，在微信群里的分享卡片無法被長按分享
5. 啟動小程序時可以通過App.onLaunch 或者App.onShow 獲取 shareTicket
6. openGID並不能直接獲取，需要向自己的后台發送shareTicket並解密后拿到真實的openGID
7. wx.onShareAppMessage api在2018年7月5日后將不再支持，最終只能在啟動參數中獲取了，請注意
8. 群聊對應的名稱不能直接獲取，只能調用<open-data>組件展示
9. 首個分享群聊的群友，也必須通過點擊群里的分享卡片才能進入群聊
10. 群聊具體實現依賴我方，小程序並不直接提供群聊功能

小程序es6 api支持情況

不支持以下api

• String.prototype.normalize
• Array.prototype.values
• Array.prototype.includes (ios 8 不支持)
• Proxy

小程序樣式支持問題

wxss在某些情況下，渲染表現可能不一致（ios WKWebView UIWebView, Android Mobile Chrome 53/57），開啟樣式補全可以解決大部分問題，但不是全部

針對es6/7特性如何做

小程序ide本身可以開啟es6轉es5。但限制於內置babel-core，開發體驗其實並不好。

在現有的解決方案中，為了減少學習曲線，可以使用wepy等現有開發框架直接進行開發（原因: wepy等類似框架對小程序原有開發體驗封構了一層，可以使用類似vue單文件的開發體驗進行開發）

wepy同時使用promise對小程序提供的原生API封裝了一層，可以方便的使用 async await等語法，避免了同步只能發起5個wx.request的問題。

wepy作為一套官方解決方案，可以直接上手使用。

小程序iconfont

不支持引入ttf等文件，如果非要用，轉成base64或者使用網絡靜態資源

樣式層級問題

小程序樣式層級由於嚴格的資源限制，並沒有做過多的樣式層級解析

所以如果你有

<view class="a"> <view class="b"></view> </view> <style> .a { color: #000; } .b { color: #f00; } </style>

形如上面的樣式層疊寫法，.b不起作用，必須寫成 .a .b {}才行

小程序頁面棧限制

小程序最多允許5層頁面記錄，超過就會產生回不到首頁的問題，所以請合理使用wx.navigateTo， wx.redirectTo，wx.switchTab幾個api

redirectTo會覆蓋當前棧記錄，所以請不要在首頁用

小程序音視頻組件，在線直播應用場景

<video>標簽直接支持m3u8直播形式，但不支持flv直播形式（如果在白名單內可以直接播放m3u8, 我們在）
<live-player>標簽支持兩種直播形式，但是需要資質證明

wx.getUserInfo問題

由於收到開發者的反饋，為了方便開發者更好地使用 獲取用戶信息 的接口，開發者仍然可以使用 wx.getUserInfo 接口獲取用戶信息。

具體優化調整如下：

1.獲取用戶頭像昵稱，第一次需要使用 button 組件授權，如果已經用組件授權了，wx.getUserInfo 可直接返回用戶數據，無需重復授權彈窗。

1. 如果沒有用 button 組件授權，wx.getUserInfo 調用接口返回失敗，提醒開發者需要先使用 button 組件授權。
2. 用戶可在設置中，取消授權。取消授權后需重新用 button 組件拉起授權。

此次調整僅會影響開發者工具、體驗版和開發版，正式版本小程序暫不受影響。

rpx單位

由於小程序當前使用的單位視口就是一個相對根元素單位root em-quads px，已經做好相對轉換（他把屏幕均分成750個單位）。所以在作圖的時候，以750px的圖稿開發正好合適

1rpx問題

在有些機型上，1rpx可能顯示不出來，原因很簡單，rem計算方式了，屏幕實際像素，邏輯像素的相關概念

0rpx問題

margin padding 寫0的時候最好不要帶rpx單位，不然可能產生間隙

全屏問題

height: 100%解決不了就用height: 100vh

vh和vw的兼容性良好

setTimeout問題

小程序的頁面setTimeout會一直存在，即使跳轉頁面依然存在，請書寫業務的時候注意

原生組件問題

input，textarea，video，map，canvas，live-player等組件，非webComponent，是原生實現，顯示層級上相當高，可能出現樣式層蓋不住的情況，開發和設計請注意.

wx.require

有並發5個請求的限制，wepy框架是怎么解決的呢？wepy框架實現了一個簡單的消息隊列，只有當上一個請求完成，才會進行下一個請求，隊列最大限制是10個請求

其他開發坑

• {{}}不能執行方法，只能處理簡單運算+-*/

  • 由於小程序無管道實現（也就是time | filters 這類）,所以只能運用以下幾種方式

    • 1.直接setData (大量循環時成本過高)
    • 2.設置getter （大量循環時經常訪問，也不是很好）
    • 3.在獲取數據時直接過濾掉

    • wxs擴展的方法可以在wxml里使用，wepy框架同理

      <!-- wxml使用方式 --> <wxs src="../filter/index.wxs" module="filter" /> <view>{{filter._filterOrderType(item.type)}}</view> <view>{{filter._filterTimestamp(item.time)}}</view> <!-- wepy使用方式.wpy --> <template> <text>{{filter.doSomething(...)}}</text> </template> <script> import filter from './../filter/filter1.wxs' default class Page1 extends wepy.page { wxs = { filter: filter } } </script>

• wcss本地靜態資源支持問題（圖片），所以我們需要實現一套圖片資源上傳至cdn的邏輯

wepy

wepy主要解決哪些問題？

原生小程序開發的痛點

1. 小程序的定制開發文件體系中，難以直接使用某些es6特性（即使是開啟es6轉es5的編譯）
2. 一個頁面或者一個組件對應3-4個文件，其實不怎么利於維護
3. 你要手動引入npm，極端費力
4. request的並發限制問題
5. 全局數據的維護問題
6. 並不支持less scss stylus pug hbs等不同預編譯器

所以wepy直接解決了上述問題，優化了開發體驗

wepy創建模板項目

npm i wepy-cli -g wepy init standard myproject # 輸入上面一行代碼會有一系列選項 cd myproject npm init

由於wepy自帶構建和打包，所以用戶需要關閉project.config.js里的一些選項，避免微信開發者工具沖突，微信開發者工具僅僅當做一個預覽工具，但要預覽，你需要設置項目目錄（微信開發者工具-添加項目-項目目錄更改）

wepy如何賦予書寫者書寫es6能力

• wepy-compiler-babel
• wepy-compiler-less

• babel-plugin-transform

  • 支持class屬性寫法

    class a { data = { a: 1, b: 2 } }

  • 支持裝飾器寫法

    • 裝飾器描述詳見tc39草案文檔

    function dec(id){ console.log('evaluated', id); return (target, property, descriptor) => console.log('executed', id); } class Example { @dec(1) @dec(2) method(){} }

  • 允許擴展export from語句

    • export * as ns from 'mod';
    • export v from 'mod';

  • 支持object成員展開

    • let { x, y, ...z } = { x: 1, y:2, c: 3, d: 4 };
    • let n = { x, y, ...z };
• 其他transform，你可以自行npm i babel-plugin-transform-x -D,並在wepy.config.js里配置，擴展其余tc39草案規則

為什么說wepy更適合dev-prod開發

wepy引入了cross-env,你可以在wepy.config.js里同時寫上dev配置和prod配置，靈活使用
WePY根據環境變量來改變運行時的參數

wepyignore文件

用於忽略不用打包的文件，不要什么都帶上線

.eslintrc

可以自行擴展代碼檢查規則，保證代碼風格一致

測試

wepy-cli 支持以html的形式直接打開，通過cli發送命令，可以模擬登陸，獲取微信用戶數據等一系列操作，可以進行頁面測試。但wepy並沒有提供測試套件，需要自行研究。

后期可以自行加上測試腳本，可以參考小程序測試方案初探

總結

用已有的腳手架直接開發更快速，自己搭建太慢了，並且我們沒有時間寫wcss, wxml, wxs文件解析器，所以請直接使用現有腳手架。

轉載自：https://segmentfault.com/n/1330000015597474