wepy初体验-白红宇

前言

之前做小程序是用它原本的代码进行开发的,在第二个小程序项目的时候就尝试用wepy框架进行开发,用用新的东西,多get一个小技能在这里把一些使用的方法和遇到的问题记录一下,方便之后开发的时候参考.复制代码

开始

1   全局安装wepy,有安装淘宝镜像可以使用cnpm,否则就使用npm    cnpm install wepy-cli -g2   初始化项目 1.7.0 之后版本    wepy init standard 你的项目名3   切换到你的项目下    cd 你的项目名4   安装依赖    cnpm i5   开启实时编译    npm run dev 或者 wepy build -watch    编译之后会生成一个dist文件,这个就是转换成小程序格式代码,    可以把dist拖入到微信开发者工具里面查看效果复制代码

开发

写法

虽然wepy是基础vue的小程序框架,但是写法上面还是有许多的差别复制代码

原生的写法

var app = getApp()    Page({        data: {},        onLoad: function () {}    })复制代码

wepy的写法

复制代码

vue的写法

复制代码

组件的写法

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进行开发,这个在开发的时候非常的方便

// 原生的登录APIonLoad = function () {    var self = this;    wx.login({        success: function (data) {            wx.getUserInfo({                success: function (userinfo) {                    self.setData({userInfo: userinfo});                }            });        }    });}// wepy优化后的登录APIasync onLoad() {    await wepy.login();    this.userInfo = await wepy.getUserInfo();}复制代码

数据的绑定方式

// 原生代码:
    
      {
   { message }} 
    onLoad: function () {    this.setData({message: 'hello world'});}// WePY
    
      {
   { message }} 
    onLoad () {    this.message = 'hello world';}* 在异步函数和onLoad() onShow() 中更新数据的时候,一定要加上this.$apply();否则数据更新会延迟,组件内则使用this.$parent.$apply()复制代码

获取和修改globalData的值

在page页面中通过this.$parent.globalData可以访问和修改在component中通过this.$parent.$parent.globalData才能访问到复制代码

事件的处理


    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
    :title.sync可以动态接收参数,向子组件动态传递参数, :page传递的值只支持初始化时填入的值,修改无效需要动态的向子组件传递参数时.可以加上.sync// child.wpy
    复制代码

组件在引入的时候,设置 wx:if 只会隐藏组件,组件仍会被加载,组件 onLoad 里的事件会被触发,如果不想页面加载的时候就触发组件里面的事件,可以通过 watch 监听组件的变化


    
     复制代码

向子组件传递参数的时候,如果要传递一个对象中的某一个值,通过对象点的方式(obj.child)传递过去的值,子组件无法接收到,需要把整个对象一起传递过去