wepy

Posted tongjiaojiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wepy相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章