小輪子：無需重構，向下兼容，在既有項目頂用vue的體式格局開闢微信小順序

simple-wxmp-vueify

引見

既有項目沒法重構，但想在某些頁面的JS中運用vue的語法？不想手動挪用小順序內的setData()？這個庫能夠幫你處理一些問題。

特徵

運用ES6的proxy完成對page.data的代辦

• 支撐在代碼中運用this.xxx示意data屬性
• 支撐盤算屬性
• 支撐相應式更新視圖，不必手動setData

運用Demo

迎接提issue或pr :)
項目地點

$ git clone https://github.com/qk44077907/simple-wxmp-vueify.git

以後文件夾拷貝至項目根目錄

//你的途徑
import '/simple-wxmp-vueify/index.js'
Page({
reactive: true,//在初始化頁面時傳入此字段，庫將自動把頁面轉化為相應式
data: {
questionName: '',
questionDesc: '',
questionList: [
{
content: '',
},
{
content: '',
},
],
questionTypeList: ['單選', '多選'],
questionTypeIndex: 0,
},
computed: {
questionType: function () {
return this.questionTypeList[this.questionTypeIndex]
}
},
addItem() {
this.questionList.push({
content: '',
})
},
removeItem(e) {
let index = e.target.dataset.index
if (this.questionList.length <= 2) {
return
}
this.questionList.splice(index, 1)
}
});


wxml模板


class="item"
wx:for="{{questionList}}"
wx:for-item="question"
wx:for-index="index"
wx:key="name"
>

bindinput="updateVM" data-path="questionList.{{index}}.content"
type="text" placeholder="{{'選項'+(index+1)}}"
placeholder-
maxlength="40"
value="{{question.content}}"
auto-height
>

class="icon"
bindtap="removeItem"
data-index="{{index}}"
>
刪除

class="icon"
bindtap="addItem"
data-index="{{index}}"
>
增加




TODO

• watch功用