一、微信小程序wepy框架簡介:

微信小程序WePY框架是騰訊官方推出來的框架,類似的框架還有美團的mpvue,京東的Taro等; 目前公司開發小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在開發過程中參考了 Vue 等現有框架的一些語法風格和功能特性，對原生小程序的開發模式進行了再次封裝，更貼近于 MVVM 架構模式, 并支持ES6/7的一些新特性。相對更容易上手,提高開發效率;

二、WePY項目的創建與目錄結構

WePY的安裝或更新都通過npm進行，全局安裝或更新WePY命令行工具

npm install wepy-cli -g

在開發目錄中生成Demo開發項目

wepy new myproject

切換至項目目錄

cd myproject

安裝依賴

npm install

開啟實時編譯

wepy build --watch

WePY項目的目錄結構如下

 ├── dist          小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件） ├── node_modules       ├── src          代碼編寫的目錄（該目錄為使用WePY后的開發目錄） |  ├── components     WePY組件目錄（組件不屬于完整頁面，僅供完整頁面或其他組件引用） |  |  ├── com_a.wpy   可復用的WePY組件a |  |  └── com_b.wpy   可復用的WePY組件b |  ├── pages       WePY頁面目錄（屬于完整頁面） |  |  ├── index.wpy   index頁面（經build后，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件） |  |  └── other.wpy   other頁面（經build后，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件） |  └── app.wpy      小程序配置項（全局數據、樣式、聲明鉤子等；經build后，會在dist目錄下生成app.js、app.json和app.wxss文件） └ ── package.json      項目的package配置

搭建好項目后，IDE需配置代碼高亮，文件后綴為.wpy，可共用Vue的高亮規則，但需要手動設置，具體配置大家可參考wepy官方文檔

三、wepy使用心得總結：

1.wepy代碼風格類似Vue，如computed,data,methods等用法差不多,熟悉vue開發的同學看看文檔可以輕松上手，不過還是有很多地方寫法容易混淆，我工作中遇到的總結幾個,如列表循環,條件渲染,父子組件值傳遞等,下面舉例說明:

1). wepy和vue列表循環對比:

   // wepy 列表循環,外面可套一層repeat標簽,注意和vue寫法的區別  <repeat for="{{list}}" key="index>    <view>{{item}}</view>  </repeat>    // vue 列表循環,外面可套一層template標簽  <template v-for="(item,index) in list" :key="index"> // 不推薦key直接用索引index    <div>{{item}}<div>  </template>