微信小程序组件化开发框架WePY

微信小程序组件化开发框架WePY

1. 全局安装wepy:

npm install wepy-cli -g

2. 快速创建项目

wepy init standard my-project ( 1.7.0之后版本)

3. 安装项目依赖文件

cd myproject 进行项目
npm install 安装依赖

4. 实时编译:

wepy build --watch 生成dist文件夹

5. 将wepy项目添加到微信小程序开发工具里面:

打开微信小程序开发工具，添加项目，直接运行即可
project.config.json有这个文件,miniprogramRoot里面配置直接调用dist文件夹下面的app.json,如果没有手动添加

注意:

• 页面文件，组件都以.wpy文件结尾，编译时候可以处理
• $开头的标识符为WePY框架的内建属性和方法,可在js脚本中以this.的方式直接使用
• 小程序入口、页面、组件文件名的后缀为.wpy
• 使用ES6语法开发

npm install wepy-async-function --save
import ‘wepy-async-function’;

• 原 bindtap=“click” 替换为 @tap=“click”，原catchtap="click"替换为@tap.stop=“click”。
• 事件传参使用优化后语法代替。 原bindtap=“click” data-index={{index}}替换为@tap=“click({{index}})”。

基于WePY的代码

• 每个组件，页面引入wepy

import wepy from ‘wepy’;
export default class Index extends wepy.page {} // 页面通过继承自wepy.page的类创建页面逻辑 => 原生的 Page({})
export default class Index extends wepy.component{} //组件
export default class extends wepy.app{} //入口文件

• data和methods和computed单独拉出来了

通过继承自wepy.page的类创建页面逻辑
	export default class Index extends wepy.page {
	    //可用于页面模板绑定的数据
	    data = {
	        motto: 'Hello World',
	        userInfo: {}
	    };
	
	    //事件处理函数(集中保存在methods对象中)
	    methods = {
	        bindViewTap () {
	            console.log('button clicked');
	        }
	    };
		computed = {
		      now () {
		        return +new Date()
		      }
		 };
	
	    //页面的生命周期函数
	    onLoad() {
	        console.log('onLoad');
	   	 };
	}

• 单文件模式，目录结构更清晰，开发更方便
  • WePY中则使用了单文件模式，将原生小程序app实例的3个文件统一为app.wpy，page页面的4个文件(page.js、page.json、page.wxml、page.wxss)统一为page.wpy 和vue一样，单文件开发
• 针对原生API进行优化 wx.request()的并发问题最多五个, 它进一步封装promise采用async函数写法更加简洁
• 一个.wpy文件分为三部分

1. 脚本部分，即<script></script>标签中的内容，又可分为两个部分：       		  vue脚本  export default {}  data是一个函数
    逻辑部分，除了config对象之外的部分，对应于原生的.js文件；
    配置部分，即config对象，对应于原生的.json文件。

2. 结构部分，即<template></template>模板部分，对应于原生的.wxml文件。            vue是也是模板 template  DOM块 必须有跟元素

3. 样式部分，即<style></style>样式部分，对应于原生的.wxss文件。     			   vue是.css文件   scoped局部样式	

其中，小程序入口文件app.wpy不需要template，所以编译时会被忽略。.wpy文件中的script、template、style这三个标签都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。

小程序入口app.wpy (build编译时会根据config属性自动生成app.json文件)

入口文件app.wpy中所声明的小程序实例继承自wepy.app类

export default class extends wepy.app {
config = {pages:{}, window:{}};
}

页面page.wpy

页面文件page.wpy中所声明的页面实例继承自wepy.page类
config， page.json 页面配置信息 {}
components: 页面使用的组件 {}
data: 数据集合，页面使用的数据， 原生也是一个data {}
methods: 页面的交互集合，原生是展开的 {}
events
声明周期

实例的创建

	import wepy from 'wepy';
	
	// 声明一个App小程序实例
	export default class MyAPP extends wepy.app {
	}
	
	// 声明一个Page页面实例
	export default class IndexPage extends wepy.page {
	}
	
	// 声明一个Component组件实例
	export default class MyComponent extends wepy.component {
	}

Page页面实例和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 = {};  // 声明组件之间的事件处理函数
	}

注意: methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致

组件的循环渲染 repeate标签， 原生 wx:for

<repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
        <child :item="item"></child>
    </repeat>

wepy组件里面的一些东西

1.computed计算属性 和vue里面的一样， 用的时候不加括号

this.计算属性名来引用, {{computedName}}

    computed = {
       aPlus () {
           return this.a + 1
       }
   }

2.watcher 监听器

	watch = {
      num (newValue, oldValue) {
          console.log(`num value: ${oldValue} -> ${newValue}`)
      }
  }

3.data 存储页面的数据，包括自定义的数据 和原生那个是一样的

	data= {
       name: 'wepy'
  }

4.methods 页面的交互集合，原生分开了， 但是这里只能写内置的事件，自定义的要与mehtods平级

	methods = {
       fn(){},
       getX(){}
  }

4.props 页面的交互集合，原生分开了， 但是这里只能写内置的事件，自定义的要与mehtods平级

水电费

数据的绑定

• this.setData({title: ‘this is title’});
• {{}} data对象里面的数据
• wepy使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查，在异步的时候，必须调用$apply,才会触发脏数据检查流程的运行

优化细节

wx.request()优化封装: => https://blog.csdn.net/tech_Wang/article/details/80502087