個人wepy初始化模板和一個指南，歡迎提建議和意見

前言

距離上次初瞭解小程序結束已經20天了，由於公司項目催的急，因此會再安排一個前端來和我一塊兒作項目。

因此爲了讓他快速上手小程序，並對項目結構有所瞭解，我寫了一個開發指南。後來一想，順便再把項目的初始化模板再作出來。

在這個新開的項目裏，有一些初次嘗試的東西。如eslint、pug、BEM，儘可能將項目規範、嚴謹、整潔（即使只有本身一我的在開發。。。）。

模板下載

wepy-cli 版本 1.7.0 及以上

# 推薦
    wepy init qianzhaoy/simple-wepy project-name
    
    # or
    
    git clone https://github.com/qianzhaoy/simple-wepy.git

github地址（若是有幫到你歡迎Star）

開發指南

Git分支

平常開發分支請在 origin/dev 分支下開發

編輯器

建議使用 Visual Studio Code，將.wpy文件關聯Vue，並利用好代碼片斷，快速生成頁面初始模板，並開啓ESLint代碼風格檢查。

目錄結構

開發前請先了解全部目錄結構

│  .editorconfig
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  .prettierrc
│  .wepycache
│  .wepyignore
│  CONTRIBUTING.md
│  min.config.json // minui 組件配置文件
│  package.json
│  project.config.json
│  README.md
│  wepy.config.js
│
└─src
    │  app.wpy
    │
    ├─api // 接口地址
    │
    ├─components // wepy 靜態組件
    │  ├─tabbar
    │
    ├─images // 圖片
    │
    ├─mixins // page 的 mixins
    |      validation.js
    │
    ├─pages // 全部頁面
    |  |
    ├─style
    │  │  app.less // 全局樣式（引入了公共樣式和全部組件樣式）
    |  |
    │  ├─common // 公共樣式 以及 變量
    |  |
    │  ├─components // 靜態組件樣式
    |  |
    │  ├─home // 頁面樣式
    │
    └─util // 工具類
        │  created.js // 頁面全局功能，需在頁面引入並調用，參考現有頁面 ( 注意，component沒法使用全局方法，建議用event或者$parent )
        |  fly.config.js // 請求攔截器配置
        │  template.js
        │  tool.js // 工具
        │  wx.umd.min.js // fly.js源碼，對標Vue的axios
        │
        └─wxs
                filter.wxs // 過濾器

created.js

在這個js內，封裝全局的使用方法，比mixins更加靈活，但更麻煩。

• 內部增長了一個onBack生命週期，能夠用在navigateBack時來傳遞數據。可是一樣必需要用js內部封裝的navigateBack方法來回退頁面。爲了API使用一致性，一樣增長了navigateTo、redirectTo方法。
• 爲了方便RESTful使用場景和接口請求。增長了四個全局方法。reqGet、reqPost、reqPut、reqDel
• 還有自定義轉發onShareAppMessage

環境變量

新增全局變量 __isProd， __isProd ? '生產環境' : '開發環境'

開發規範

預編譯

• html -> Pug
• css -> Less (建議使用BEM命名規範)
• js -> ES6

class Page

// script 模板

<script>
import wepy from 'wepy'
import created from '../../util/created.js'

// 類名首字母大寫
class Login extends wepy.page {
    // 每一個屬性之間空一行， 並嚴格按照如下順序書寫
    config = {}

    mixins = []

    data = {}

    ...自定義屬性

    computed = {}

    watch = {}

    ...生命週期鉤子

    methods = {}

    events = {}

    ...內部函數方法

    wxs = {}

    components = {}
}

// 直接 export default created(Login) 編譯後會報錯
const HOC = created(Login)
export default HOC
</script>

class Component

與Page同樣，多了一個 props 屬性而且沒有 config， 把 props 放置順序代替 config 便可。

class Mixins

參考Page

ESLint

本項目使用了 ESLint 來作代碼規範校驗，寫代碼時須要嚴格執行該規範。.eslintrc.js 文件爲規範的配置文件。
官方代碼規則文檔

組件

如今 wepy 不支持原生組件，因此使用wepy編譯組件的時候的一些注意事項。

• 父組件傳值時，使用 .sync 同步組件數據時，父組件的數據必須放在 data 下一級，不能放在 data 下的對象內。
• wepy 組件爲靜態組件，故使用時若要循環，要放在 repeat 標籤內，若要用多個就要在 components 再加一個ID
• 項目使用了第三方組件庫（minui）,此組件庫爲原生組件，因此不適用以上注意點。
• 關於編譯的問題，由於公共和組件樣式是在 app.less 內引入的，因此直接修改組件樣式不會當即更新，須要再修改 app.less 保存，才行（如打個空格保存）。

表單驗證

寫了一個簡單的表單驗證方法放在了 mixins/vuelidation.js , 須要頁面內引入並加入 mixins: [ vuelidation ] , 而後在 Class 內增長一個 自定義屬性 vuelidation 來配置校驗方法。例：

class Login extends wepy.page {
        vuelidation = {
            username: [
                { type: 'required', msg: '請輸入帳號' },
                { type: 'username' }
            ],
            password: [
                { type: 'required', msg: '請輸入密碼' }
            ]
        }
    }

關於 type，能夠在 mixins/vuelidation.js 內的 methods 對象裏添加驗證方法

最後

參考了一下react的高階組件的想法，增長了一個created.js的全局繼承類。實驗一下。如今惟一感受還能夠的是增長了一個onBack生命週期。

還有在項目裏規範了寫法和class命名。重點推薦使用 BEM 的class命名規範，我以爲小程序很是適合BEM的使用場景，雖然一開始對這個規範不太感冒，以爲類名太長了，不過用了以後幸福感仍是有明顯提高的（不說別的，光光清一色的規範命名也能使強迫症心情舒暢）。配合less 和 Pug 很是實用和整潔。