wepy是一個(gè)微信小程序框架谆奥，支持模塊化開發(fā)，開發(fā)風(fēng)格類似Vue.js菇肃〉胤啵可搭配redux使用，能同時(shí)打包出web和小程序琐谤。
官方文檔https://tencent.github.io/wepy
目錄結(jié)構(gòu)：
pages: 存放主頁(yè)面
sotre: redux(如果你創(chuàng)建項(xiàng)目時(shí)使用了redux的話)
components: 存放組件
mixins: 混合組件
wepy.config.js: webpack配置文件
app.wpy: 小程序入口文件
project.config.json: 小程序項(xiàng)目配置文件
index.template.html: web頁(yè)面的入口文件
mixins:
mixins是放混合組件的地方蟆技，比如很多page中都要用到wx.showToast方法。那么我們可以在mixins文件夾里面創(chuàng)建一個(gè)toast.js
# toast.js
# mixins是js文件不是wpy文件
import wepy from 'wepy'
export default class testMixin extends wepy.mixin {
onLoad () { // onLoad生命周期鉤子函數(shù)
this.showToast()
}
noMore () { // 普通方法直接定義到class的靜態(tài)方法
wepy.showToast({ // wepy.showToast 等同于 wx.showToast
title: '沒有更多了...',
icon: 'none',
duration: 1500
})
}
showToast () {
wepy.showToast({
title: '拼命加載中...',
icon: 'loading',
duration: 3000
})
}
hideToast () {
wepy.hideToast()
}
}
其中wepy繼承了wx對(duì)象的方法斗忌，建議在wepy框架開發(fā)中不要用到wx對(duì)象的方法质礼，雖然運(yùn)行時(shí)效果是一樣，但是打包時(shí)會(huì)cli報(bào)錯(cuò)（wepy中沒有wx對(duì)象）飞蹂。
mixins的方法定義好后几苍，就可以在組件中使用mixin了。
# index.wpy
<script>
import wepy from 'wepy'
import toast from 'mixins/toast' // 導(dǎo)入mixins組件
export default class Index extends wepy.page {
onLoad () {
this.showToast() // 導(dǎo)入和注冊(cè)后陈哑，就可直接使用
this.getMovies()
}
mixins = [ // 注冊(cè)混合組件妻坝，注意mixins是一個(gè)數(shù)組
toast
]
......
}
</script>
首先在引入和注冊(cè)后，然后就可以直接調(diào)用this.showToast()
注意在wepy中組件中使用的是class,而不是vue中使用的Object惊窖。
methods, events:
在vue中刽宪，所有方法都定義在methods里面。而在wepy中界酒，普通方法是直接定義在class類方法里面圣拄。events只定義組件間交互的方法。methods只定義事件方法毁欣。
# index.wpy
getSliderImg (data) { // 普通方法
this.sliderImg = data.slice(0, 10)
this.$apply()
}
onPullDownRefresh () { // 頂部下拉刷新
this.showToast()
this.sliderImg = null
this.active = true
this.$apply()
this.getMovies()
}
events = { // 與子組件的交互庇谆，都要寫到events里面
'showMovieDetail': (id) => {
wepy.navigateTo({
url: `./movie-detail?locationId=${290}&movieId=${id}`
})
}
}
methods = {
toggleType (flag) { // 點(diǎn)擊事件方法
this.active = flag
this.showToast()
this.getMovies()
}
}
關(guān)于computed:
wepy中也有computed,props，data,watch等vue中有的一些屬性（沒有filter, directive）凭疮。
props,data,watch和vue基本無(wú)異饭耳。
wepy中computed計(jì)算屬性是無(wú)法傳參的（本人沒能找到傳參的方法，且官方文檔沒有提到）执解，在處理一些動(dòng)態(tài)數(shù)據(jù)的時(shí)候寞肖，只能通過(guò)其他方法來(lái)操作。
比如，服務(wù)端獲取到的的JSON對(duì)象內(nèi)有條時(shí)間戳數(shù)據(jù)需要轉(zhuǎn)換成字符串新蟆，我的做法是將時(shí)間戳另外傳值給子組件觅赊，然后在子組件中使用computed對(duì)props進(jìn)行記算。
事件傳值：
wepy中的事件可傳遞一些基本類型的參數(shù)琼稻，但是需使用雙括號(hào)吮螺。否則獲取到的參數(shù)是字符串類型。
<view @tap="toggleType({{true}})">
引用類型的參數(shù)可以使用 微信原生的 data- 屬性綁定數(shù)據(jù)欣簇，然后在函數(shù)中用e.currentTarget.dataset 獲取.
# template
<view data-movie="{{movie}}" @tap="showMovie"></view>
# script
methods = {
showMovie (e) {
console.log(e.currentTarget.dataset.movie) // 這樣就可以獲取到data屬性綁定的對(duì)象
}
}
組件傳值：
wepy組件傳值的設(shè)計(jì)思路類似vue 1.0 规脸。這點(diǎn)在官方文檔講得比較詳細(xì)。需要注意是如果你需要props傳遞的數(shù)據(jù)跟隨父組件數(shù)據(jù)變化熊咽，要使用sync修飾符莫鸭。如果是異步獲取的服務(wù)端數(shù)據(jù)，必須要在父組件使用 this.$apply()方法來(lái)觸發(fā)子組件的刷新横殴。
wepy中傳遞數(shù)據(jù)不能直接像vue中可以傳遞對(duì)象的屬性被因，如
<child :data="data.someData"></child> // vue寫法
但是在wepy中這樣的寫法會(huì)拿不到數(shù)據(jù)
# father.wpy
<child :data.sync="data"></child> // 動(dòng)態(tài)綁定數(shù)據(jù)需要sync修飾符
# child.wpy
# template
<text>{{someData}}</text> // 這樣就能獲取到someData了
# script
props = {
data: Object
}
computed = {
someData () {
return this.data && this.data.someData
}
}
動(dòng)態(tài)綁定class:
在vue中動(dòng)態(tài)綁定class
# vue
<div class="class-a" :class="{true ? 'class-b': 'class-c'}"></div>
在wepy中，要使用微信原生的綁定語(yǔ)法
<view class="class-a {{true ? 'class-b' : 'class-c'}}">
其中 class-a 是不需要?jiǎng)討B(tài)綁定的class衫仑， 雙括號(hào)中才是需要綁定的class
循環(huán)渲染組件：
wepy的循環(huán)渲染組件梨与，必須使用 <repeat/>標(biāo)簽，或者微信官方的<block/>標(biāo)簽(這兩個(gè)標(biāo)簽不會(huì)渲染到視圖層）否則就不會(huì)渲染成功文狱。
# wepy 提供的repeat組件
<view class="movie" wx:if="{{movies}}">
<repeat for="{{movies}}" key="index" index="index" item="item">
<movie :movie.sync="item"></movie>
</repeat>
</view>
# 微信提供的block組件
<block wx:for="{{imgArr}}" wx:key="index">
<swiper-item class="item" data-movieId="{{item.id}}" @tap="showMovieDetail">
<image class="img" src="{{item.img || item.image}}"></image>
</swiper-item>
</block>
wx:if:
wepy中使用 wx:if粥鞋，只阻止視圖渲染，不會(huì)阻止組件初始化瞄崇。
如在子組件onLoad 生命周期或者計(jì)算屬性中使用了一些父級(jí)傳遞過(guò)來(lái)的動(dòng)態(tài)數(shù)據(jù)呻粹，就會(huì)報(bào)錯(cuò)。
如何在wepy中使用stylus
http://www.reibang.com/p/749897519ec2
基于wepy和時(shí)光網(wǎng)api(僅做學(xué)習(xí)交流使用)構(gòu)建的微信小程序time
https://github.com/biliGates/time
