wepy 使用中...

一個搬磚工發表於2018-07-20

之前小程式專案沒有使用任何框架，本來開發時間太早，那會兒小程式生態不是很成熟，最近專案鬆，想把之前的程式碼重構一下，選用的wepy框架，之所以選擇wepy，最重要的原因還是由於它是騰訊開源的框架，在使用中也遇到了一些問題，會持續把遇到的問題記下來；

（1）在app.wpy檔案中，我自定義了一些方法，其中包括對request的封裝，根據官方文件描述，在page頁面可以使用this.$parent來獲取，如下

app.wpy 

doPost() {
    console.log('app.wyp')
}

...

index.wpy  // page頁面
...
onLoad() {
    console.log(this.$parent.doPost())
    
    "app.wpy"
}
複製程式碼

如果只是單純的page頁面使用，那是不會有什麼問題的; 如果在component元件頁面，如下

index.wpy  // page頁面

import wepy from 'wepy';
import tel from '../components/tel' // component元件頁面
export default class Index extends wepy.page {
    components = {
        tel
    }
}

tel.wpy //元件頁面

import wepy from 'wepy';
export default class Conchat extends wepy.component {
    onLoad() {
        console.log(this.$parent) // 會指向父元件
        console.log(this.$parent.$parent) // 會指向app.wpy
    }
}
複製程式碼

wepy官方文件中是這麼寫的：https://tencent.github.io/wepy/document.html#/api?id=wepycomponent-class

現在還有一種情況，會導致一些問題，大家都知道，wepy完全是類vue的開發風格，它裡面也有mixin混合功能，這個無疑為我們開發帶來很高的體驗，接著上面的問題，如果在mixin中定義了一個公用的方法，如下：

mixin.js

import wepy from 'wepy';

export default class ScanRed extends wepy.mixin {
    onLoad() {
        console.log(this.$parent.doPost())
    }
}


index.wpy;
...

mixins = [mixin];

輸出的結果為"app.wpy";

tel.wpy;

...
mixins = [mixin];

程式碼就會報錯，doPost方法是未定義的

複製程式碼

這是因為，在tel.wpy中，this.$parent指向的是index.wpy; 這個時候就有點尷尬了。。。

所以在mixin定義的js中，我們可以使用wepy.$instance

wepy.$instance === this.$parent        //true
複製程式碼

這個在官方文件中沒有提及，可能不是很建議這種方法吧，其實在我遇到這個問題的時候，我也發現自己之前的寫法上面有點錯誤，最好的處理方式是，自定義的方法和類，建立一個單獨的js檔案，這樣就不會有這種尷尬了；

相關文章