wepy

Posted 2022-10-10 tongjiaojiao

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平级

 

持续更新...