一、安裝
1. NodeJs
2. cnpm
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)(開啟實(shí)時(shí)編譯)
wepy build --watch
4. 微信開發(fā)者工具配置
- 使用
微信開發(fā)者工具
新建項(xiàng)目甜橱,填入項(xiàng)目名appid车份,選擇dist
目錄歉摧。 -
微信開發(fā)者工具
-->項(xiàng)目-->關(guān)閉ES6轉(zhuǎn)ES5进肯。重要:漏掉此項(xiàng)會(huì)運(yùn)行報(bào)錯(cuò)抒倚。 -
微信開發(fā)者工具
-->項(xiàng)目-->關(guān)閉上傳代碼時(shí)樣式自動(dòng)補(bǔ)全重要:某些情況下漏掉此項(xiàng)會(huì)也會(huì)運(yùn)行報(bào)錯(cuò)。 -
微信開發(fā)者工具
-->項(xiàng)目-->關(guān)閉代碼壓縮上傳 坷澡。重要:壓縮混淆可以使用wepy-cli
5. 打包上傳
- 打包壓縮混淆
npm run build
- 點(diǎn)擊
微信開發(fā)者工具
-->上傳
三托呕、項(xiàng)目結(jié)構(gòu)
├── dist 微信開發(fā)者工具指定的目錄(Wepy編譯生成)
├── node_modules 依賴的包
├── src 開發(fā)目錄
| ├── components WePY組件目錄
| | ├── com_a.wpy 可復(fù)用的WePY組件a
| | └── com_b.wpy 可復(fù)用的WePY組件b
| ├── pages WePY頁面目錄
| | ├── index.wpy index頁面(經(jīng)build后含蓉,會(huì)在dist目錄下的pages目錄生成index.js、index.json项郊、index.wxml和index.wxss文件)
| | └── other.wpy other頁面
| └── app.wpy 小程序配置項(xiàng)(全局?jǐn)?shù)據(jù)馅扣、樣式、聲明鉤子等着降;經(jīng)build后差油,會(huì)在dist目錄下生成app.js、app.json和app.wxss文件)
└── package.json 項(xiàng)目的package配置
四任洞、參考文檔
五蓄喇、常用
1. 頁面跳轉(zhuǎn)
- 普通頁面 定義在pages下,跳轉(zhuǎn)用
wx.navigateTo({
url: 'oneTicket'
})
wx.redirectTo({
url: 'oneTicket'
})
- tab頁面 定義在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' : '' }}