• 小程序框架开发笔记-wepy


    WePY

    一、前置

    本地使用版本V1.7.3
    最新版本V2.x

          

         

    二、使用

    export class App extends wepy.app {} 小程序入口,App基类
    
    wepy.page注册页面
    
    wepy.component注册组件

    wepy.app 入口

    方法:use(‘使用中间件’)

      this.use('requestfix'); //'requestfix':修复小程序请求并发问题

      this.use('promisify'); //'promisify':使用wepy.xxx的方式请求小程序原生API都将Promise

    属性 $wxapp:Object: this.$wxapp 等同于getApp()

    wepy.component 组件

    import wepy from 'wepy' // 引入wepy
    
    export default class Message extends wepy.component {

      // 创建组件实例 props = { /* 接收参数 */ } onShow(){ /* 无用 */ } }

    组件

    this.$invoke('./ComB', 'func1', 'p1', 'p2'); //调用另一组件的方法
    
    this.$emit()  //组件发起一个冒泡事件
    
    $nextTick([func:Function]):
      组件数据绑定完成后的回调事件;在不传入function时,返回一个promise对象
      this.$nextTick().then()

    wepy.page 页面

    this.$parent 
    
    this.$broadcast('isFixed')   //广播事件,通知子组件执行isFixed方法
    
    this.$apply()  //wepy 在异步函数中更新数据的时候,必须手动调用$apply方法,才会触发脏数据检查流程的运行

      *在 $emit 或者 $broadcast 事件中,调用 $destroy 事件终止事件的传播。

    三、备注:

      1、this.$apply()使用场景:wepy1.x中method中方法不需要,自定义方法、onshow()中需要

        1.1异步更新数据

        1.2.手动刷新DOM

        1.3.子组件的onload周期使用

      2、wepy1使用脏检查进行数据绑定,wepy2使用vue Observer实现数据绑定,不用$apply();

     

    四、记录

      1、Wepy中ES6使用

        wepy 中使用async/await , 需要npm安装'wepy-async-function',npm install wepy-async-function –save  

        在app.wpy文件里引入 import 'wepy-async-function'

        async函数是异步操作

        采用promise封装异步请求的API,可以return new Promise

           return new Promise(function(resolve,reject){}).then()  

      2、Page实例继承Component,即Page也是组件

          onShow () {} // 只在Page中存在的页面生命周期函数             

            onLoad () {} // 在Page和Component共用的生命周期函数         

      3、自定义方法位置(重要)

        通自定义方法在methods对象外声明,与methods平级

     

     

     

  • 相关阅读:
    深入了解Java ClassLoader、Bytecode 、ASM、cglib (I)
    如何在ant里import
    敏捷练习(1)评估我的生活方向盘
    你是一个合格的孩子吗?
    [转] C# 路径(目录)
    XML学习记录
    js学习总结不断更新(1)
    LINQ TO XML练习
    做技术,切不可沉湎于技术
    js学习总结持续更新(2)
  • 原文地址:https://www.cnblogs.com/anniey/p/15410166.html
Copyright © 2020-2023  润新知