码迷,mamicode.com
首页 > 其他好文 > 详细

wepy

时间:2019-09-09 14:56:10      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:style   init   name   渲染   struct   广度   keyword   异步   number   

wepy
wepy优势:


1、基于原生组件实现组件化开发
2、同vue一样,支持watch、computed、mixin等开发

3、同vue一样支持模块开发、组件开发等


wepy与小程序页面的区别:


同原生小程序不同,WePY拥有的是.wpy页面,而它们并非是继承自原生的 Page 和 App,也不需要独立的wxss、.js、.json等文件

WePY小程序被分为三个实例:小程序实例App、页面实例Page、组件实例Component,它们实例化的方式基本相同:

// 声明一个App小程序实例
export default class MyAPP extends wepy.app { }

// 声明一个Page页面实例

export default class IndexPage extends wepy.page { }

// 声明一个Component组件实例

export default class MyComponent extends wepy.component { }

注:在实例化过程中,需要在script中引入WePY

import wepy from ‘wepy‘

 

在page或component中,可以通过this.$parent来访问App实例中的方法或变量


WePY在循环渲染组建时,与原生不同的是,外部需要包裹特有的辅助标签repeat


同vue相同,WePY可以进行父子组建间传值

wepy.component基类提供$broadcast$emit$invoke三个方法用于组件之间的通信和交互

新版的WePY页面内引入组建的方式,与1.X版本的import不同,2.X保留了原生的 usingComponents 方式,不再使用 import 的方式导入。

 

$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序
$emit$broadcast正好相反,事件发起组件的所有祖先组件会依次接收到$emit事件

$invoke是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法

 

interceptor 拦截器

WePY可以使用全局拦截器对原生API的请求进行拦截
具体方法是配置API的config、fail、success、complete回调函数

export default class extends wepy.app {
    constructor () {
        // this is not allowed before super()
        super();
        // 拦截request请求
        this.intercept(‘request‘, {
            // 发出请求时的回调函数
            config (p) {
                // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
                p.timestamp = +new Date();
                console.log(‘config request: ‘, p);
                // 必须返回OBJECT参数对象,否则无法发送请求到服务端
                return p;
            },

            // 请求成功后的回调函数
            success (p) {
                // 可以在这里对收到的响应数据对象进行加工处理
                console.log(‘request success: ‘, p);
                // 必须返回响应数据对象,否则后续无法对响应数据进行处理
                return p;
            },

            //请求失败后的回调函数
            fail (p) {
                console.log(‘request fail: ‘, p);
                // 必须返回响应数据对象,否则后续无法对响应数据进行处理
                return p;
            },

            // 请求完成时的回调函数(请求成功或失败都会被执行)
            complete (p) {
                console.log(‘request complete: ‘, p);
            }
        });
    }
}

  

数据绑定:

因为小程序架构本身原因,页面渲染层和JS逻辑层分开的,setData操作实际就是JS逻辑层与页面渲染层之间的通信

而WePY使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写setData方法

原生小程序数据修改变量:

  this.setData({title: ‘this is title‘})

wepy数据修改变量:

  this.title = ‘this is title‘

需要注意的是:WePY在异步函数中更新数据的时候,必须手动调用$apply方法,才会触发脏数据检查流程的运行

setTimeout(() => {

  this.title = ‘this is title‘;

  this.$apply();

}, 3000);

 

page实例与component实例:

由于Page页面实际上继承自Component组件,即Page也是组件。除扩展了页面所特有的config配置以及特有的页面生命周期函数之外,其它属性和方法与Component一致

import wepy from ‘wepy‘;

export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
    customData = {}  // 自定义数据

    customFunction () {}  //自定义方法

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

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

    config = {};  // 只在Page实例中存在的配置数据,对应于原生的page.json文件

    data = {};  // 页面所需数据均需在这里声明,可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件,或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性(详见后文介绍)

    watch = {};  // 声明数据watcher(详见后文介绍)

    methods = {};  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

    events = {};  // 声明组件之间的事件处理函数
}

  注意,对于WePY中的methods属性,因为与Vue中的使用习惯不一致,非常容易造成误解,这里需要特别强调一下:WePY中的methods属性只能声明页面wxml标签的bind、catch事件,不能声明自定义方法,这与Vue中的用法是不一致的,普通自定义方法在methods对象外声明,与methods平级

 

持续更新...

wepy

标签:style   init   name   渲染   struct   广度   keyword   异步   number   

原文地址:https://www.cnblogs.com/tongjiaojiao/p/11491394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!