1、介绍

WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。

2、使用

npm install -g wepy-cli //全局安装或更新WePY命令行工具(wepy脚手架): wepy-cli

wepy -v //查看wepy-cli版本

wepy init standard <projectName> //新建wepy小程序项目,1.7.0之前的版本使用:wepy new myproject,安装项目翻译一下即可

wepy list //查看项目模板

cd <projectName> //切换至项目目录

npm install //安装依赖

wepy build --watch //开启实时编译

3、规范

①代码规范

  wepy和原生标签一样

  自定义组件名尽量避开原生组件名、wepy的辅助标签repeat

  方法名、变量名尽量使用驼峰命名

  文件后缀为.wpy

  支持ES6/ES7的一些新特性

  继承了wx对象方法,wepy中没有wx对象,尽量不要用到此方法,打包时容易报错

②数据绑定

//原生小程序
this.setData({xxx:xxx});
//wepy
data={aaa:''}
this.aaa = 'aaa';
//wepy 在异步函数中更新数据的时候,必须手动调用$apply方法,才会触发脏数据检查流程的运行
this.$apply();

③事件绑定以及时间传参

<view @tap="click"></view> //​​​​​ 原 bindtap="click"(省略了.default后缀 )绑定小程序冒泡型事件
<view @tap.stop="click"></view> //​​​​​ 原catchtap="click" 绑定小程序捕获型事件,如catchtap
<view @tap.capture="click"></view> //​​​​​ 原 capture-bind:tap="click"
<view @tap.capture.stop="click"></view> //​​​​​ 原 capture-catch:tap="click"
<!--事件传参-->
<view @tap="click({{index}})"></view> //​​​​​ 原bindtap="click" data-index={{index}}

④框架默认对小程序的API提供了Promise处理,可以直接调用async/await直接开发

// 原生代码:
wx.request({
url: 'xxx',
success: function (data) {
console.log(data);
}
}); // WePY 使用方式, 需要开启 Promise 支持,参考开发规范章节
wepy.request('xxxx').then((d) => console.log(d)); // async/await 的使用方式, 需要开启 Promise 和 async/await 支持,参考 WIKI
async function request () {
let d = await wepy.request('xxxxx');
console.log(d);
} //需要开启Promise的解释
//1、进入项目目录,安装polyfill
npm install wepy-async-function --save
//2、在app.wpy中导入polyfill
import 'wepy-async-function';
//3、在app.wpy中使用promiss
constructor () { super(); this.use('promisify'); }
//4、判断是否引入成功
onLaunch() {
console.log('on launch');
let mypro = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(123);
}, 2000);
});
mypro.then((r)=>{
console.log(r);
})
}
//重启编译
//打印出内容即为成功

⑤computed计算属性,类型{ [ key:string ] :  function },有返回值,绑定数据使用,

data={aaa:1};
// 计算属性aPlus,在脚本中可通过this.aPlus来引用,在模板中可通过{{ aPlus }}来插值
computed={ aPlus(){ return this.a+1 } };

⑥watcher监听,类型{ [ key:string ] :  function },监听任何属性更新,处理数据专用。

data={ aaa:'xxx' };
// 监听器函数名必须跟需要被监听的data对象中的属性同名,
// 其参数中的newValue为属性改变后的新值,oldValue为改变前的旧值
 // 每当监听属性aaa改变一次,该函数就调用一次
watch={
aaa(newValue,oldValue){
console.log(`data的aaa由${oldValue}变为${newValue}`)
}
}

⑦wxs

  等待学习

⑧interceptor拦截器

  可以对原生api进行请求拦截,具体方法是配置api的config、fail、success、complete回调函数。

//app.wpy
constructor () {
//在super()是不允许的
super()
//拦截request请求
this.intercept('request',{
//发出请求时的回调函数
config(res){
//对所有请求附加token
res.token = token;
return res;
}
//请求成功后的回调函数
success(res){
return res;
}
//请求失败后的回调函数
fail(res){
return res;
}
//请求完成后的回调函数
complete(res){
return res;
}
});
}

4、项目目录结构

原生小程序:app(app.jsapp.jsonapp.wxss),page(page.jspage.jsonpage.wxmlpage.wxss),文件必须同名。

WePY中则使用了单文件模式:app.wpypage.wpy

一个.wpy文件可分为三大部分,各自对应于一个标签:

  1. 脚本<script>部分,又可分为两个部分:

    逻辑部分,除了config对象之外的部分,对应于原生的.js文件

    配置部分,即config对象,对应于原生的.json文件

  1. 结构<template>部分,对应于原生的.wxml文件

  2. 样式<style>部分,对应于原生的.wxss文件

①components组件:

import wepy from 'wepy';

export default class MyComponent extends wepy.component {
props = {}//接收父组件传来的参数
customData = {} // 自定义数据
customFunction () {} //自定义方法
onLoad () {} // 在Page和Component共用的生命周期函数
data = {}; // 页面所需数据均需在这里声明,可用于模板数据绑定
components = {}; // 声明页面中所引用的组件,或声明组件中所引用的子组件
mixins = []; // 声明页面所引用的Mixin实例
computed = {}; // 声明计算属性(详见后文介绍)
watch = {}; // 声明数据watcher(详见后文介绍)
methods = {}; // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明
events = {}; // WePY组件事件处理函数对象,存放响应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数
}
/** 与page不同的是component不存在:
onShow () {} // 只在Page中存在的页面生命周期函数
config = {}; // 只在Page实例中存在的配置数据,对应于原生的page.json文件,类似于app.wpy中的config
onReady() {} // 只在Page中存在的页面生命周期函数
**/

**无法实现组件化的松耦合与复用

(如,模板A中绑定一个bindtap="myclick",模板B中同样绑定一样bindtap="myclick",那么就会影响同一个页面事件、数据)

  a、引用组件

    

//引入组件文件
import Child from '../components/child';
export default class Index extends wepy.component {
//声明组件,分配组件id为child,需要注意的是,WePY中的组件都是静态组件,是以组件ID作为唯一标识的,
  每一个ID都对应一个组件实例,当页面引入两个相同ID的组件时,这两个组件共用同一个实例与数据,当其中一个组件数据变化时,另外一个也会一起变化。
components = {
//为两个相同组件的不同实例分配不同的组件ID,从而避免数据同步变化的问题
child: Child,
};
} //在html中使用组件
<child></child>

②页面page.wpy

Page页面实际上继承自Component组件,即Page也是组件。

除扩展了页面所特有的config配置以及特有的页面生命周期函数之外,其它属性和方法与Component一致:

import wepy from 'wepy';

export default class MyPage extends wepy.page {
customData = {} // 自定义数据 customFunction () {} //自定义方法 onLoad () {} // 在Page和Component共用的生命周期函数 onUnload() {} // 监听页面卸载 onReady() {} // 只在Page中存在的页面生命周期函数 onShow () {} // 只在Page中存在的页面生命周期函数,当小程序启动,或从后台进入前台显示 onHide() {} // 只在Page中存在的页面生命周期函数,当小程序从前台进入后台 config = {}; // 只在Page实例中存在的配置数据,对应于原生的page.json文件,类似于app.wpy中的config data = {}; // 页面所需数据均需在这里声明,可用于模板数据绑定 components = {}; // 声明页面中所引用的组件,或声明组件中所引用的子组件 mixins = []; // 声明页面所引用的Mixin实例 computed = {}; // 声明计算属性 watch = {}; // 声明数据watcher methods = {}; // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明 events = {}; // WePY组件事件处理函数对象,存放响应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数 onPullDownRefresh(){} // 监听用户下拉动作 onReachBottom(){} // 页面上拉触底事件的处理函数 onShareAppMessage(){} // 用户点击右上角分享 onPageScroll(){} // 页面滚动 onTabItemTap(){} // 当前是 tab 页时,点击 tab 时触发
}

③状态管理store(redux)

④app.wpy:小程序入口

继承自wepy.app类;包含config配置对象、globalData对象、自定方法属性、小程序生命周期函数;

在page页面中可以使用this.$parent调用实例

<script>
import wepy from 'wepy';
export default class extends wepy.app {
config = {
pages:[// pages定义当前小程序所有页面路径,让微信客户端知道当前你的小程序页面定义在哪个目录
'pages/index',
'pages/mine'
],
window:{//window定义小程序所有页面的顶部背景颜色,文字颜色定义等。
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "顶部标题",
"navigationBarTextStyle": "black"
},
tabBar: {
selectedColor: '#ea9100',//底部导航字体选中时的颜色
list: [
{
pagePath: 'pages/index',//导航页面路径(必须在pages中定义)
text: '首页',//导航名
iconPath: 'img/index.png',//未选中的导航icon
selectedIconPath: 'img/index1.png'//选中时的导航icon
},
{
pagePath: 'pages/mine',
text: '我的',
iconPath: 'img/mine.png',
selectedIconPath: 'img/mine1.png'
}
]
},
};
onLaunch() {//初始化
console.log(this);
} onShow(){}//当小程序启动,或从后台进入前台显示
onHide(){}//当小程序从前台进入后台
}
</script> <style lang="less">
/** less **/
</style>

微信小程序之:wepy框架的更多相关文章

  1. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  2. 使用Vue开发微信小程序:mpvue框架

    使用Vue开发微信小程序:mpvue框架:https://www.jianshu.com/p/8f779950bfd9

  3. 新人学习微信小程序开发之框架篇

    大家好我是智哥,一名专注于前端领域的一名码农. 咱们今天主要来说说微信小程序, 最近一段时间微信群里的小程序,小游戏各种分享是突然一下子就爆发了,现在来看小程序作为微信的重磅功能无疑又是下一个风口.咱 ...

  4. 初尝微信小程序2-基本框架

    基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑    描述一些行为 .json :页面配置 创建一个小程序之后,app.js,app.json,app.wxss是必须的 ...

  5. 小程序开发--WePy框架

    现如今mvvm框架如此火热,其核心思想即js逻辑层不直接操作DOM,只改变组件状态:而视图层则通过模板template进行渲染. 1.WePy项目的目录结构 ├── dist 小程序运行代码目录 ├─ ...

  6. 微信小程序之wepy自动化架构搭建(fly+wepy-plugin-replace)

    前言 本文章秉着自动化工程项目的思想搭建的,基础架子完全按照wepy官网搭建,在基础上增加配置达到自动化项目.新增动flxio拦截器自动处理接口,新增根据环境变量来改变运行时的参数. Fly.js 小 ...

  7. 微信小程序开发框架 Wepy 的使用

    一.github地址:https://github.com/Tencent/wepy 按照 README.md 的步骤进行操作: 1.在“介绍”中获得 wepy 的开发资源汇总:https://git ...

  8. 小程序使用wepy框架自定义loading组件

    1:定义组 <template> <view class="app-loading-container" style="{{options.cssTex ...

  9. 微信小程序(mpvue框架) 购物车

    效果图: 说明:全选/全不选, 1.数据: products:[{checked:true,code:"4",echecked:false,hasPromotions:true,i ...

  10. 微信小程序框架探究和解析

    何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框 ...

随机推荐

  1. JavaSE面试题收集【仅有题目,答案自备】

    一共有140个题目,可以参考下.一个“.java”源文件中是否可以包含多个类(不是内部类)?有什么限制?说说&和&&的区别在Java中如何跳出当前的多重嵌套循环?IO流的分类S ...

  2. RFID NFC

    RFID 和 NFC 的区别: ()NFC与RFID在物理层面看上去很相似,但实际上是两个完全不同的领域,因为RFID本质上属于识别技术,而NFC属于通信技术. ()NFC将非接触读卡器.非接触卡和点 ...

  3. 移动开发基础-学习笔记二-字体图标、less、bootstrap入门

    1.字体图标 1.字体图标都是用svg图片 1.svg图片不失真 2.svg图标由设计师提供 3.为了减少网络请求,会把svg图标转换成字体图标,放到字体文件中,通过字体库的方式使用 2.制作步骤 1 ...

  4. (一) Keras 一元线性回归

    视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 环境为 an ...

  5. 渐进式Web应用程序的深入概述

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.grapecity.com.cn/blogs/wijmo-depth-ove ...

  6. Android 之文件夹排序

    按文件名排序 /** * 按文件名排序 * @param filePath */ public static ArrayList<String> orderByName(String fi ...

  7. 小米平板8.0以上系统如何不用root激活xposed框架的流程

    在大多使用室的引流,或业务操作中,基本上都需要使用安卓的强大XPOSED框架,近来我们使用室购来了一批新的小米平板8.0以上系统,基本上都都是基于7.0以上系统版本,基本上都不能够刷入ROOT的su权 ...

  8. Python 进程(一)理论部分

    进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行,即正在运行的程序,是系统进行资源分配和调度的基本单位,进程是对正在运行程序的一个抽象,在早期面向进程设计的计算机结构中,进程是程 ...

  9. 迁移FRS至DFSR SYSVOL

    截至2017年6月20日,Windows 2016 RS1系统为最后一版支持FRS,后续版本将不再包含该功能,详细见 https://support.microsoft.com/en-us/help/ ...

  10. Java基础系列--07_String、StringBuffer和StringBuilder

    String类  (1)字符串:字符串是常量:它们的值在创建之后不能更改,存储在堆中.          如果字符串多次赋值,其实是每次重新赋值的时候程序都先在内存中寻找已开辟的空间是否存在该值;如果 ...