wepy初体验-CSDN博客

前言

之前做小程序是用它原本的代码进行开发的,在第二个小程序项目的时候就尝试用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>
复制代码