一、安裝

1. NodeJs

https://nodejs.org/en/download/

2. cnpm

https://npm.taobao.org/

3. wepy 命令行工具。

cnpm install wepy-cli -g

二、創(chuàng)建及運(yùn)行項(xiàng)目

1. 創(chuàng)建myproject

wepy init standard myproject

2. 安裝依賴

cnpm install

3. 啟動(dòng)(開(kāi)啟實(shí)時(shí)編譯)

wepy build --watch

4. 微信開(kāi)發(fā)者工具配置

1. 使用微信開(kāi)發(fā)者工具新建項(xiàng)目，填入項(xiàng)目名appid，選擇dist目錄。
2. 微信開(kāi)發(fā)者工具-->項(xiàng)目-->關(guān)閉ES6轉(zhuǎn)ES5。重要：漏掉此項(xiàng)會(huì)運(yùn)行報(bào)錯(cuò)。
3. 微信開(kāi)發(fā)者工具-->項(xiàng)目-->關(guān)閉上傳代碼時(shí)樣式自動(dòng)補(bǔ)全重要：某些情況下漏掉此項(xiàng)會(huì)也會(huì)運(yùn)行報(bào)錯(cuò)。
4. 微信開(kāi)發(fā)者工具-->項(xiàng)目-->關(guān)閉代碼壓縮上傳 。重要：壓縮混淆可以使用wepy-cli

5. 打包上傳

1. 打包壓縮混淆

npm run build

2. 點(diǎn)擊微信開(kāi)發(fā)者工具-->上傳

三、項(xiàng)目結(jié)構(gòu)

├── dist                   微信開(kāi)發(fā)者工具指定的目錄（Wepy編譯生成）
├── node_modules           依賴的包
├── src                    開(kāi)發(fā)目錄
|   ├── components         WePY組件目錄
|   |   ├── com_a.wpy      可復(fù)用的WePY組件a
|   |   └── com_b.wpy      可復(fù)用的WePY組件b
|   ├── pages              WePY頁(yè)面目錄
|   |   ├── index.wpy      index頁(yè)面（經(jīng)build后，會(huì)在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other頁(yè)面
|   └── app.wpy            小程序配置項(xiàng)（全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等；經(jīng)build后，會(huì)在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項(xiàng)目的package配置

四、參考文檔

• 小程序官方文檔
• wepy官方文檔
• wepy Github地址
• wepy Wiki
• wepy小程序開(kāi)發(fā)匯總

五、常用

1. 頁(yè)面跳轉(zhuǎn)

1. 普通頁(yè)面 定義在pages下，跳轉(zhuǎn)用

wx.navigateTo({
    url: 'oneTicket'
})
wx.redirectTo({
    url: 'oneTicket'
})

2. tab頁(yè)面 定義在tabBar下面 跳轉(zhuǎn)用

wx.switchTab({
    url: 'home'
})

1. 點(diǎn)擊事件

@tap="delAddress({{index}})"

2. 循環(huán)

<repeat for="{{groupList}}" index="index" item="item" key="key">
    <group :grouplist="item" :indexa="index"></group>
</repeat>

或者

<block wx:for-items="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
  <view @tap="tap" class="mylist">
    <text>{{item.id}}</text>: {{item.title}}
  </view>
</block>

3. 接口調(diào)用

4. 數(shù)據(jù)更新

this.$apply()

5. 顯示隱藏

wx:if="{{x==1}}"

6. 樣式控制

:class="{'choose':dataList.checked}"

或者

{{ fixed ? 'fixed' : '' }}