APPLET 小程序動態
我們的作品，他們的故事
Our work, their stories
Our work, their stories
微信小程序開發，這些細節你必須注意
發布人:龍兵科技
16-11-07
自2016年1月張小龍第一次公布未來可能會推出一種新的應用號形態，到9月底公布內側，再到11月3日晚，微信團隊正式對外公測，開發者可登陸微信公眾平臺申請，并允許將產品提交至微信公眾平臺審核。千呼萬喚的小程序公測消息一經公布，業內一片嘩然，筆者作為小程序早期的研究者，后續會為大家全面剖析小程序，本篇作為小程序系列文章的第一篇文章，為大家解讀開發小程序不得不注意的一些細節。
一、小程序為什么箭在弦上卻不能發布
小程序從內測到公測，僅僅只間隔了一個月的時間，內測僅開放200個名額，只支持上傳不支持發布，公測也是如此，小程序的公測雖然從介紹、設計、開發、運營都進行了詳細且嚴格的規定，但是微信內部也清楚，首批小程序質量摻差不齊，一定會存在不少問題。微信需要這次公測找到首批合規的小程序標桿，給后面的小程序開發者提供一個可以借鑒的樣板。
二、給微信團隊和市場一定的緩沖時間
微信公測對外公布的小程序規范明確且詳細，市場必須有一個接受和調整過程，相信大部分人第一次看到如此詳細的規范，都會感覺到頭疼，第一批試水者只能是逐步摸索開發出適合規范的小程序，這也就意味著市場上小程序的上線不可能一蹴而就，需要開發者和微信團隊多次磨合，微信團隊也會借此機會觀察市第一批小程序的開發者到底有多少符合規范，以便制定下一步的市場培育工作。再過一段時間，微信團隊會根據市場情況正式開通小程序發布功能，這個時間筆者判斷可能是1個月左右的時間，也就是12月初。
因此，這段時間是開發者好好琢磨如何按照規范開發小程序的黃金時間，如果您夠用心，夠投入，說不定您的小程序有可能成為市場上第一批正式上線的小程序，同時您的小程序也可能成為細分行業的模板和標桿。為此，筆者為大家整理濃縮出一些必要的細節提醒各位開發者注意，以便大家在最短的時間內開發符合規范的小程序，少走彎路。
三、小程序注冊與訂閱號服務號基本一致
微信小程序開發，這些細節你必須注意！
從提供的資料來看，小程序依然通過微信公眾號的后臺注冊，注冊流程、認證流程和之前的訂閱號服務號大體一致，需要注意的是，小程序目前只支持各種企業類型的申請、暫不支持個人，注冊的名稱和郵箱都必須使用新的，和之前的訂閱號、服務號不能使用同一賬號。這也就印證了之前張小龍之前所講的“小程序是一種新的應用號形態”。
四、一個小程序可以包含多個應用
微信小程序開發，這些細節你必須注意！
微信小程序這次定義“已認證的小程序可以綁定不多于20個開發者。未認證的小程序可以綁定不多于10個開發者。”筆者可以直接判斷，一個小程序可以包含多個應用，或者說是應用矩陣。從公布的綁定開發者數量來看，小程序增加了開發者數量，這也就意味著小程序不僅可以包含多個應用，每個應用還可以獨立管理，最終由管理員統一提交。這讓筆者想到，一個正常的APP后臺，管理者可以在后臺分配多角色多模塊，以協調不同崗位如：程序猿、運營人員、市場營銷人員的日常工作。但是微信團隊本次沒有對這方面沒有明確定義，小程序開發好以后如何運營、如何推廣，筆者將在后續文章里做詳細的論述。
五、小程序的配置功能未來也許是可以大作文章的地方
微信小程序開發，這些細節你必須注意！
微信小程序這次對配置功能頁面是這樣定義的：為了用戶可以快速搜索出小程序，需要填寫重要業務頁面的類目與標簽。重要業務頁面組數不多于5組。
這也就意味著，小程序頁面可以加標簽，標簽可以有利于用戶搜索到精準的小程序，開發者可以利用標簽為小程序實現精準導流。另外一點，如果微信團隊能夠開放搜索功能，能夠讓搜索結果不僅與頁面標簽匹配，同時也可以與小程序頁面代碼里的關鍵詞標簽匹配（原理與SEO類似），那無疑對于小程序開發者是一個好消息。但是截至目前，微信團隊并沒有透露與此相關的任何信息，我們只能慢慢摸索。但是，這些都是未來可以想象的地方，我們在后面的文章里再做詳細論述。
六、小程序開發并非隨心所欲，你需要看懂以下規則才能不走彎路：
1、小程序的功能定義與實際提供的服務必須一致；小程序所提供的類目，必須放置在首頁，最深也只能放置在二級頁面；
2、小程序所提供的服務目前暫時不能涉及游戲、直播等服務（涉黃涉賭就不用多說了）內容也不能涉及測試類內容；比如：算命，抽簽，星座運勢等；
3、小程序所提供的服務可以允許設置付費可見及隱藏可見（這點對于開發者來說可以發揮地方很多，具體在后面文章做詳細論述）；
4、小程序不能提供與微信現有功能相似的服務，如含朋友圈、漂流瓶等，也不能提供導航、排行榜、互推的服務；
5、小程序一如既往的不支持誘導分享、誘導關注，虛假欺詐等內容，也不支持廣告展示比例超過50%的頁面內容；
6、小程序不得誘導、泄露、轉讓用戶的任何數據。所有行為都必須經過用戶授權或有明顯提示；
七、微信團隊對小程序設計也有嚴格定義，前端工程師們需要看懂以下規則：
1、頁面設計需要考慮除微信導航以外其它導航頁面的設計，遵循“導航明確，來去自如”，也就是能讓客戶知道，當前在哪，可以去哪，如何回去等問題。
2、頁面設計需要遵循重點突出，并且不能出現與業務無關的業務入口，正反舉例：
錯誤示例
以上頁面主題是查詢，但查詢按鈕下面卻出現“今日熱點|頭條新聞”的無關內容
正確示例
以上頁面查詢按鈕下面顯示的是最新搜索過的關鍵詞，與頁面主題匹配
3、頁面設計無需考慮微信一級菜單的導航，微信系統內的所有小程序均會自帶有微信提供的導航欄
標準導航圖
4、微信導航欄自定義顏色規則，開發者如果需要自設導航需要與官方定義的顏色和諧搭配
官方定義導航顏色
5、小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。初期的頁面內導航設計盡可能利用微信自帶導航Tab，添加自有導航可以添加標簽分頁（Tab）導航，標簽數量不得少于2個，最多不得超過5個，為確保點擊區域，建議標簽數量不超過4項。
小程序標準導航樣式
6、小程序已經明確定義了標準的啟動頁面和頁面下拉刷新加載樣式，無需開發者設計，啟動頁面只能上傳品牌LOGO且不能更改。
小程序啟動頁標準樣式
下拉加載頁標準樣式
7、小程序頁面的加載反饋和結果反饋應提供載入進度和結果提示，并且每個頁面都要有明確的指引操作和退出提示。
加載頁必須有加載提示如右邊圖
結果反饋必須有明確提示如：已發送
8、小程序頁面設計需要遵循“減少輸入，巧用接口，多用選擇”的原則，最大限度的優化用戶體驗，減少或避免不必要的鍵盤輸入。
搜索內容建議設計成按鈕選擇而不是讓用戶手工輸入
持卡人和卡號不建議讓用戶直接輸入而是調用接口讓用戶選擇
9、小程序頁面的字體盡量與用戶所運行的系統字體保持一致，常用字號為20, 18, 17, 16,14 13, 10(pt)，字體顏色主內容 Black 黑色，次要內容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段的說明內容而且屬于主要內容用 Semi 黑；藍色為鏈接用色，綠色為完成字樣色，紅色為出錯用色 Press與 Disable狀態分別降低透明度為20%與10%
字體規范
字體顏色
主內容 Black 黑色，次內容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段說明內容用 Semi 黑；
藍色為鏈接用色，綠色為完成字樣色，紅色為出錯用色
10、小程序頁面同樣明確定義了列表視覺規范、表單輸入視覺規范、按鈕使用原則、圖標使用原則等詳細的規范。
以上僅為筆者為大家整理出來的小程序設計最值得重視的諸多要點，如果您對小程序設計比較關注，請持續關注呆盟說后續推出的對《小程序設計指南》更專業的解讀文章。
八、小程序對開發規則也進行了相應的解釋和定義，基本定義如下：
1、開發者需要在公眾號小程序的后臺“設置”-“開發者設置”中獲取AppID ，通過開發者工具，來完成小程序創建和代碼編輯。
2、開發者在小程序后后臺綁定身份之后，可以在開發者工具內實現編輯、預覽、提交等所有工作流程。
3、小程序開發的基本文件包括app.js、app.json、app.wxss 這三個。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序實例。
4、每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結構文件。
以上僅為筆者為整理出來的小程序開發基礎規范，如果您對小程序開發比較關注，請持續關注后呆盟說后續推出的對《小程序開發指南》更專業的解讀文章。
綜上可見，開發者們想開發出一款真正符合規范的小程序并非是一朝一夕的事情，從微信團隊給出的如此詳細的開發設計文檔來看，前端開發工程師所需要做的事情會更多，這也就意味著未來會誕生一個新的職位方向，我們暫且定義為“小程序設計師”。但是值得一提的是，一個復雜的小程序依然需要后臺程序猿輔助小程序設計師完成整個小程序的搭建，所以負責APP開發程序猿們可以在不放棄APP開發的前提下，借此機會調整一下專注的方向，不用向之前網傳的那樣過于悲觀。
小程序這次真的來了，公測的時間比我們想象的要快，這也標志著微信小程序正式走向市場。正如張小龍所提到的，微信不僅僅是一個傳播內容平臺，更是服務平臺，而小程序就是服務平臺中最重要的體現。
作為小程序早期的研究者，筆者的這篇文章主要提醒大家在開發小程序之前，務必要熟知小程序開發的諸多規則細節，少走彎路，更多詳細專業的小程序解讀筆者會在后續文章進行詳細的論述。
一、小程序為什么箭在弦上卻不能發布
小程序從內測到公測，僅僅只間隔了一個月的時間，內測僅開放200個名額，只支持上傳不支持發布，公測也是如此，小程序的公測雖然從介紹、設計、開發、運營都進行了詳細且嚴格的規定，但是微信內部也清楚，首批小程序質量摻差不齊，一定會存在不少問題。微信需要這次公測找到首批合規的小程序標桿，給后面的小程序開發者提供一個可以借鑒的樣板。
二、給微信團隊和市場一定的緩沖時間
微信公測對外公布的小程序規范明確且詳細，市場必須有一個接受和調整過程，相信大部分人第一次看到如此詳細的規范，都會感覺到頭疼，第一批試水者只能是逐步摸索開發出適合規范的小程序，這也就意味著市場上小程序的上線不可能一蹴而就，需要開發者和微信團隊多次磨合，微信團隊也會借此機會觀察市第一批小程序的開發者到底有多少符合規范，以便制定下一步的市場培育工作。再過一段時間，微信團隊會根據市場情況正式開通小程序發布功能，這個時間筆者判斷可能是1個月左右的時間，也就是12月初。
因此，這段時間是開發者好好琢磨如何按照規范開發小程序的黃金時間，如果您夠用心，夠投入，說不定您的小程序有可能成為市場上第一批正式上線的小程序，同時您的小程序也可能成為細分行業的模板和標桿。為此，筆者為大家整理濃縮出一些必要的細節提醒各位開發者注意，以便大家在最短的時間內開發符合規范的小程序，少走彎路。
三、小程序注冊與訂閱號服務號基本一致
微信小程序開發，這些細節你必須注意！
從提供的資料來看，小程序依然通過微信公眾號的后臺注冊，注冊流程、認證流程和之前的訂閱號服務號大體一致，需要注意的是，小程序目前只支持各種企業類型的申請、暫不支持個人，注冊的名稱和郵箱都必須使用新的，和之前的訂閱號、服務號不能使用同一賬號。這也就印證了之前張小龍之前所講的“小程序是一種新的應用號形態”。
四、一個小程序可以包含多個應用
微信小程序開發，這些細節你必須注意！
微信小程序這次定義“已認證的小程序可以綁定不多于20個開發者。未認證的小程序可以綁定不多于10個開發者。”筆者可以直接判斷，一個小程序可以包含多個應用，或者說是應用矩陣。從公布的綁定開發者數量來看，小程序增加了開發者數量，這也就意味著小程序不僅可以包含多個應用，每個應用還可以獨立管理，最終由管理員統一提交。這讓筆者想到，一個正常的APP后臺，管理者可以在后臺分配多角色多模塊，以協調不同崗位如：程序猿、運營人員、市場營銷人員的日常工作。但是微信團隊本次沒有對這方面沒有明確定義，小程序開發好以后如何運營、如何推廣，筆者將在后續文章里做詳細的論述。
五、小程序的配置功能未來也許是可以大作文章的地方
微信小程序開發，這些細節你必須注意！
微信小程序這次對配置功能頁面是這樣定義的：為了用戶可以快速搜索出小程序，需要填寫重要業務頁面的類目與標簽。重要業務頁面組數不多于5組。
這也就意味著，小程序頁面可以加標簽，標簽可以有利于用戶搜索到精準的小程序，開發者可以利用標簽為小程序實現精準導流。另外一點，如果微信團隊能夠開放搜索功能，能夠讓搜索結果不僅與頁面標簽匹配，同時也可以與小程序頁面代碼里的關鍵詞標簽匹配（原理與SEO類似），那無疑對于小程序開發者是一個好消息。但是截至目前，微信團隊并沒有透露與此相關的任何信息，我們只能慢慢摸索。但是，這些都是未來可以想象的地方，我們在后面的文章里再做詳細論述。
六、小程序開發并非隨心所欲，你需要看懂以下規則才能不走彎路：
1、小程序的功能定義與實際提供的服務必須一致；小程序所提供的類目，必須放置在首頁，最深也只能放置在二級頁面；
2、小程序所提供的服務目前暫時不能涉及游戲、直播等服務（涉黃涉賭就不用多說了）內容也不能涉及測試類內容；比如：算命，抽簽，星座運勢等；
3、小程序所提供的服務可以允許設置付費可見及隱藏可見（這點對于開發者來說可以發揮地方很多，具體在后面文章做詳細論述）；
4、小程序不能提供與微信現有功能相似的服務，如含朋友圈、漂流瓶等，也不能提供導航、排行榜、互推的服務；
5、小程序一如既往的不支持誘導分享、誘導關注，虛假欺詐等內容，也不支持廣告展示比例超過50%的頁面內容；
6、小程序不得誘導、泄露、轉讓用戶的任何數據。所有行為都必須經過用戶授權或有明顯提示；
七、微信團隊對小程序設計也有嚴格定義，前端工程師們需要看懂以下規則：
1、頁面設計需要考慮除微信導航以外其它導航頁面的設計，遵循“導航明確，來去自如”，也就是能讓客戶知道，當前在哪，可以去哪，如何回去等問題。
2、頁面設計需要遵循重點突出，并且不能出現與業務無關的業務入口，正反舉例：
錯誤示例
以上頁面主題是查詢，但查詢按鈕下面卻出現“今日熱點|頭條新聞”的無關內容
正確示例
以上頁面查詢按鈕下面顯示的是最新搜索過的關鍵詞，與頁面主題匹配
3、頁面設計無需考慮微信一級菜單的導航，微信系統內的所有小程序均會自帶有微信提供的導航欄
標準導航圖
4、微信導航欄自定義顏色規則，開發者如果需要自設導航需要與官方定義的顏色和諧搭配
官方定義導航顏色
5、小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。初期的頁面內導航設計盡可能利用微信自帶導航Tab，添加自有導航可以添加標簽分頁（Tab）導航，標簽數量不得少于2個，最多不得超過5個，為確保點擊區域，建議標簽數量不超過4項。
小程序標準導航樣式
6、小程序已經明確定義了標準的啟動頁面和頁面下拉刷新加載樣式，無需開發者設計，啟動頁面只能上傳品牌LOGO且不能更改。
小程序啟動頁標準樣式
下拉加載頁標準樣式
7、小程序頁面的加載反饋和結果反饋應提供載入進度和結果提示，并且每個頁面都要有明確的指引操作和退出提示。
加載頁必須有加載提示如右邊圖
結果反饋必須有明確提示如：已發送
8、小程序頁面設計需要遵循“減少輸入，巧用接口，多用選擇”的原則，最大限度的優化用戶體驗，減少或避免不必要的鍵盤輸入。
搜索內容建議設計成按鈕選擇而不是讓用戶手工輸入
持卡人和卡號不建議讓用戶直接輸入而是調用接口讓用戶選擇
9、小程序頁面的字體盡量與用戶所運行的系統字體保持一致，常用字號為20, 18, 17, 16,14 13, 10(pt)，字體顏色主內容 Black 黑色，次要內容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段的說明內容而且屬于主要內容用 Semi 黑；藍色為鏈接用色，綠色為完成字樣色，紅色為出錯用色 Press與 Disable狀態分別降低透明度為20%與10%
字體規范
字體顏色
主內容 Black 黑色，次內容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段說明內容用 Semi 黑；
藍色為鏈接用色，綠色為完成字樣色，紅色為出錯用色
10、小程序頁面同樣明確定義了列表視覺規范、表單輸入視覺規范、按鈕使用原則、圖標使用原則等詳細的規范。
以上僅為筆者為大家整理出來的小程序設計最值得重視的諸多要點，如果您對小程序設計比較關注，請持續關注呆盟說后續推出的對《小程序設計指南》更專業的解讀文章。
八、小程序對開發規則也進行了相應的解釋和定義，基本定義如下：
1、開發者需要在公眾號小程序的后臺“設置”-“開發者設置”中獲取AppID ，通過開發者工具，來完成小程序創建和代碼編輯。
2、開發者在小程序后后臺綁定身份之后，可以在開發者工具內實現編輯、預覽、提交等所有工作流程。
3、小程序開發的基本文件包括app.js、app.json、app.wxss 這三個。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序實例。
4、每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結構文件。
以上僅為筆者為整理出來的小程序開發基礎規范，如果您對小程序開發比較關注，請持續關注后呆盟說后續推出的對《小程序開發指南》更專業的解讀文章。
綜上可見，開發者們想開發出一款真正符合規范的小程序并非是一朝一夕的事情，從微信團隊給出的如此詳細的開發設計文檔來看，前端開發工程師所需要做的事情會更多，這也就意味著未來會誕生一個新的職位方向，我們暫且定義為“小程序設計師”。但是值得一提的是，一個復雜的小程序依然需要后臺程序猿輔助小程序設計師完成整個小程序的搭建，所以負責APP開發程序猿們可以在不放棄APP開發的前提下，借此機會調整一下專注的方向，不用向之前網傳的那樣過于悲觀。
小程序這次真的來了，公測的時間比我們想象的要快，這也標志著微信小程序正式走向市場。正如張小龍所提到的，微信不僅僅是一個傳播內容平臺，更是服務平臺，而小程序就是服務平臺中最重要的體現。
作為小程序早期的研究者，筆者的這篇文章主要提醒大家在開發小程序之前，務必要熟知小程序開發的諸多規則細節，少走彎路，更多詳細專業的小程序解讀筆者會在后續文章進行詳細的論述。
上一篇:微信小程序開發七大必看要點
