WePY-微信小程序组件化开发框架_wepy框架方法

简介与安装

• 官网
• 什么是wepy

WePY是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于 Vue.js,支持很多vue中的语法特性，使用 WePY 框架能够提高 小程序的开发效率

• 版本1.xxx
• 安装:注意1x和2x版本安装时不同

npm install wepy-cli -g
1

报错:wepy : 无法加载文件 C:\Users\intone\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本。 有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policie s。
解决：https://www.tpxhm.com/fdetail/797.html

• 创建一个新项目

1.安装wepy：npm install wepy-cli -g
2.创建项目：

# 1.7.0 之前的版本使用 wepy new myproject
1.7.0 之后的版本使用 ：wepy init standard myproject
1
2

3.开启实时编译：wepy build --watch
4.调试：打开微信开发者工具-添加项目（刚才通过wepy创建的项目）-配置project.config.json文件 如下：

{
  "description": "project description",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "Project name",
  "miniprogramRoot": "./dist"
}
1
2
3
4
5
6
7
8
9
10
11
12
13

5.微信开发者工具仅用于实时调试时看样式的变化

---

属性与方法

• 框架里的实例样式
  wepy框架里的 小程序被分为三个实例：小程序实例App、页面实例Page、组件实例Component。其中Page实例继承自Component。各自的声明方式如下：

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 {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 注意
  1.对于WePY中的methods属性，因为与Vue中的使用习惯不一致，非常容易造成误解，这里需要特别强调一下：WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致的。

import wepy from 'wepy';

export default class MyComponent extends wepy.component {
    methods = {
        bindtap () {
            let rst = this.commonFunc();
            // doSomething
        },

        bindinput () {
            let rst = this.commonFunc();
            // doSomething
        },
    }

    //正确：普通自定义方法在methods对象外声明，与methods平级
    customFunction () {
        return 'sth.';
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 数据绑定
  在异步函数中更新数据的时，必须手动调用$apply方法，才会触发脏数据检查流程的运行。如：

setTimeout(() => {
    this.title = 'this is title';// 修改数据相当于this.setData({})
    this.$apply();
}, 3000);
1
2
3
4

• 定义初始化页面是哪一个？

// 和小程序一样 在app的json里排行第一个就是第一个加载的页面
config = {
    pages: [
      'pages/list',// 第一个加载的页面
      'pages/index',
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

• 使用图片：和微信小程序一样背景图不能使用本地图，而且使用image引用本地图片的图片文件夹所在位置也有讲究，放在src文件夹下面才能引用成功

../images/xxxx.jpg
1

• 如何使用 微信小程序自带的声明周期函数？
  把下面这个类当成小程序的Page({})，声明周期函数和data同级，直接使用就行

export default class List extends wepy.page{
 	config = {}//这是小程序的页面json，后期直接转译成xx.json
	data = {}
	
	onLoad(){} ; // 在Page生命周期函数
      
   onPageScroll(e){// 页面滚动事件
        let that = this;
        if(e.scrollTop>200){
            that.iScoll=true;
            that.$apply();// 因为wepy转译的声明周期函数是异步函数所以数据更新要使用that.$apply();
        }else{  
            that.iScoll=false;
            that.$apply();
        }
    }
    //其他生命周期函数...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 数据循环

<repeat for="{{userData}}" key="index" index="index" item="item">
</repeat>
1
2

• 动态加类名

 <view class="list-title {{iScoll?'list-floatbox-scroll':''}}">
1

• wx-if

 <image wx-if="{{index<10}}" class="list-info-pic" src="../images/jinbpng.png"></image>
1

• 组件间的通信方式
  https://www.jianshu.com/p/3aeca9db1e51

$broadcast、$emit、$invoke三个方法用于组件之间的通信和交互

1.$emit:子组件与父组件通信
$emit与$broadcast正好相反，事件发起组件的所有祖先组件会依次接收到$emit事件

// child.wpy
this.$emit('some-event', 1, 2, 3, 4);
1
2

// 接受广播的父组件们
// 需要在他们events对象中写出要接受的事件 
events = {
        'some-event': (p1, p2, p3, $event) => {
               console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
        }
    };
1
2
3
4
5
6
7

2.$broadcast：父组件与子组件通信 ，使用方法同上相似略

3.$invoke（跨组件通信）:是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。第一个参数是要调用的组件路径，其他使用方法同上

this.$invoke('one', 'someMethod', 'someArgs');
1