小輪子：無需重構，向下兼容，在既有項目中用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模板

<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功能