标签: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
是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法
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平级
持续更新...
标签:style init name 渲染 struct 广度 keyword 异步 number
原文地址:https://www.cnblogs.com/tongjiaojiao/p/11491394.html