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模板

<view class="question-panel">
    <view
            class="item"
            wx:for="{{questionList}}"
            wx:for-item="question"
            wx:for-index="index"
            wx:key="name"
    >
        <!--
        注重雙向綁定更新須要在對應元素上指定data-path屬性
        代表須要更新的屬性相對data的途徑，運用 '.'拼接
        如 'questionList.0.content'
        
            
        -->
        <textarea
                            bindinput="updateVM" data-path="questionList.{{index}}.content"
                            type="text" placeholder="{{'選項'+(index+1)}}"
                            placeholder-style="font-size:30rpx"
                            maxlength="40"
                            value="{{question.content}}"
                            auto-height
        >
        </textarea>
        <view 
            class="icon" 
            bindtap="removeItem" 
            data-index="{{index}}"
        >
            刪除
        </view>
        <view 
            class="icon" 
            bindtap="addItem" 
            data-index="{{index}}"
        >
            增加
        </view>
    </view>
</view>

TODO

• watch功用