wepy初體驗

wiven發表於2018-12-22

前言

之前做小程式是用它原本的程式碼進行開發的,在第二個小程式專案的時候就嘗試用wepy框架進行開發,用用新的東西,多get一個小技能
在這裡把一些使用的方法和遇到的問題記錄一下,方便之後開發的時候參考.
複製程式碼

開始

1   全域性安裝wepy,有安裝淘寶映象可以使用cnpm,否則就使用npm
    cnpm install wepy-cli -g
2   初始化專案 1.7.0 之後版本
    wepy init standard 你的專案名
3   切換到你的專案下
    cd 你的專案名
4   安裝依賴
    cnpm i
5   開啟實時編譯
    npm run dev 或者 wepy build -watch

    編譯之後會生成一個dist檔案,這個就是轉換成小程式格式程式碼,
    可以把dist拖入到微信開發者工具裡面檢視效果
複製程式碼

開發

寫法

雖然wepy是基礎vue的小程式框架,但是寫法上面還是有許多的差別
複製程式碼

原生的寫法

    var app = getApp()
    Page({
        data: {},
        onLoad: function () {}
    })
複製程式碼

wepy的寫法

<script>
    import wepy from 'wepy'
    export default class Index extends wepy.page {
        data = {},
        methods = {},
        onload () {}
    }
</script>
複製程式碼

vue的寫法

<script>
    export default {
        data () {
            return {}
        },
        methods: {}
    }
</script>
複製程式碼

元件的寫法

import wepy from 'wepy'
export default class Index extends wepy.component {
    data = {},
    methods = {},
    onload () {}
}
複製程式碼
元件開發時 wepy.page要記得換成wepy.component, 雖然寫wepy.page時可以正常的執行,但是遇到父元件想子元件傳參,子元件就無法接受到
子元件的 onShow() 和 onLoad() 一樣只會觸發一次.
複製程式碼

使用

事件繫結語法使用優化語法代替,常用的幾個語法:

bindtap="click" 替換為 @tap="click"，
catchtap="click" 替換為 @tap.stop="click"。
capture-bind:tap="click" 替換為 @tap.capture="click"，
capture-catch:tap="click" 替換為 @tap.capture.stop="click"。
複製程式碼

事件傳參使用優化後語法代替。

bindtap="click" data-index={{index}} 替換為 @tap="click({{index}})"。
這個也和vue的類似.不過wepy要加上{{}}
複製程式碼

wepy預設對小程式的API全部進行了Promisechuli,可以使用async/await進行開發,這個在開發的時候非常的方便

// 原生的登入API
onLoad = function () {
    var self = this;
    wx.login({
        success: function (data) {
            wx.getUserInfo({
                success: function (userinfo) {
                    self.setData({userInfo: userinfo});
                }
            });
        }
    });
}

// wepy優化後的登入API
async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}
複製程式碼

資料的繫結方式

// 原生程式碼:

<view> {{ message }} </view>

onLoad: function () {
    this.setData({message: 'hello world'});
}

// WePY
<view> {{ message }} </view>

onLoad () {
    this.message = 'hello world';
}
* 在非同步函式和onLoad() onShow() 中更新資料的時候,一定要加上this.$apply();否則資料更新會延遲,
元件內則使用this.$parent.$apply()
複製程式碼

獲取和修改globalData的值

在page頁面中通過this.$parent.globalData可以訪問和修改
在component中通過this.$parent.$parent.globalData才能訪問到
複製程式碼

事件的處理

<template>
    <view @tap="tap">Click me</view>
</template>

import wepy from 'wepy'
export default class Index extends wepy.page {
    data = {},
    methods = {
        tap () {
            console.log('click');
            this.test();
        }
    },
    // 自定義事件
    test () {
        console.log('test')
    }
    onload () {}
}

在wepy中,html頁面也就是 template 中使用的事件,要寫在 methods 裡面,自定義的事件寫在methods外面,在 methods 中的方法無法互相呼叫
複製程式碼

元件

// parent.wpy
<template>
    <Child :title.sync="parentTitle" :page="parentPage" @tap.user="tap">Click me</Child>
</template>
<script>
    import wepy from 'wepy'
    export default class Index extends wepy.page {
        data = {
            parentTitle:'父元件',
            parentPage: '父級頁面'
        },
        methods = {
            tap (data) {
                console.log(data);      // 子元件
                this.title = data
            }
        },
        onload () {}
    }
</script>

:title.sync可以動態接收引數,向子元件動態傳遞引數, :page傳遞的值只支援初始化時填入的值,修改無效
需要動態的向子元件傳遞引數時.可以加上.sync

// child.wpy
<template>
    <view @tap="click">{{title}}</view>
</template>
<script>
    import wepy from 'wepy'
    export default class Index extends wepy.component {
        props = {
            title: String,
        }
        data = {
            childTitle:'子元件',
            childPage: '子頁面'
        },
        methods = {
            tap () {
                this.$emit('changeTitle', this.childTile)
            }
        },
        onload () {}
    }
</script>
複製程式碼

元件在引入的時候,設定 wx:if 只會隱藏元件,元件仍會被載入,元件 onLoad 裡的事件會被觸發,如果不想頁面載入的時候就觸發元件裡面的事件,可以通過 watch 監聽元件的變化

<Child :pageBol.sync="workerToast"></Childc>

<script>
    watch = {
        pageBol (newValue, oldValue) {
            if (newValue) {
            // do something
            }
        }
    }
</script>
複製程式碼

向子元件傳遞引數的時候,如果要傳遞一個物件中的某一個值,通過物件點的方式(obj.child)傳遞過去的值,子元件無法接收到,需要把整個物件一起傳遞過去

相關文章