微信小程式開發規範（初稿）

一、目錄結構

├── app.js                          入口檔案

├── app.json                      全局配置檔案

├── app.wxss                     全局樣式

├── assets                          靜态資源檔案

├── components                 公共元件

├── css                               

│   │   └── public.wxss        公共樣式

├── pages                           頁面資源                  

├── tools                             自定義工具類及第三方資源

│   ├── config.js                  自定義配置項 如：接口位址等

│   ├── http.js                      wx.request 二次封裝 

├── project.config.json       小程式配置檔案

└── sitemap.json                配置小程式及其頁面是否允許被微信索引 詳情

二、json 配置 規範

           參照官方 https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE

二、 wxml  編碼規範

            參照官方：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF

三、 wxss規範(css)  規範

               wxss 命名規範

                       1.wxss class命名盡量使用英語，不要使用漢拼，并且有意義，

                        2.使用單詞命名時不要縮寫，除非非常有名的單詞。

                        3.- 規則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或 _   例如（header-list）

                        4.不允許通過1、2、3等序号進行命名

                        5.避免class與id重名

                wxss 編寫順序

                       1.位置，定位，層級（position，top，bottom，left，right，z-index，display，float）

                       2.大小（width，height，padding，margin）

                       3.文字系列（font, line-height, letter-spacing, color- text-align）

                       4.背景（background，border）

                       5.其他（animation，transition）

               其它拓展 參照官方： https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXSS-%E6%A0%B7%E5%BC%8F

四、js規範   

                1.變量命名采用小駝峰命名法---即首字母小寫，後每個單詞首字母大寫

                2.常量命名采用全字母大寫命名，以便于與變量區分

                    常量  const  PI = 3.141592653   變量  let  name = ''

                3.函數命名使用小駝峰命名法，條件允許情況下請采用動詞字首方式，請保證函數命名語義化明确

                4.構造函數命名必須采用大駝峰命名法，即首字母必須大寫

                5.注釋

                    // 這是名稱

                    let name = 'wsl'

               6.推薦使用對象直接建立對象，而非構造器建立

               7.判斷

                   比較運算符,推薦使用 '===' 與 '!=='  

                   if 推薦不要簡寫，判斷 非空時 “!變量”需要考慮變量不為數值0

                8.循環

                     若循環中需使用函數，請将函數定義在循環外部而非内部，這樣可以避免函數的反複建立

                 其它拓展 參照官網 https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JS-%E9%80%BB%E8%BE%91%E4%BA%A4%E4%BA%92

五、常用變量限制及驗證

               1.名稱字數限制 （推薦1-20）

               2.手機号，電話，郵箱驗證（通用驗證）

               3. 上傳附件

                    圖檔：若無特殊要求，多選數量設定 9

                    視訊：若無特殊要求，多選數量設定 9 

六、頁面顯示及功能互動通用

              1.文字超出容器需要進行 '...' 省略

              2.圖檔顯示 無特殊要求時，按原圖寬高比顯示

              3..涉及資料處理功能按鈕，增加防頻繁點選處理

              4.增加小程式更新機制

              5.清單頁面，增加上拉加載、下拉重新整理功能

七、相關元件

            1.官方元件   https://developers.weixin.qq.com/miniprogram/dev/component/

            2.weui   UI庫 https://weui.io/

八、小程式開發指南（官方）

              https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a