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

涼涼涼涼發表於2018-05-21

前言

距離上次初瞭解小程式結束已經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 非常實用和整潔。

相關文章