wepy 开发文档

快速入门

    1,项目创建和使用

        安装wepy,一下都是通过npm安装

        npm install wepy-cli -g

    2,在开发目录生成开发DEMO。

        wepy new project

    3,开发实时编译    

        wepy build --watch

    4,项目目录结构  

        

    dist
    node_modules
    src
        components
            com_a.wpy
            com_b.wpy
        pages
            index.wpy
            page2.wpy
        app.wpy
    package.json

    5,开发使用说明

        第一,使用微信开发者工具新建项目,本地开发选择dist目录

        第二,微信开发者工具-->项目-->关闭ES6转ES5

        第三,本地项目根目录运行,wepy build --watch ,开启实时编译

    6,代码规范

        第一,变量和方法命名尽量使用驼峰式命名,避免使用$开头,以$开头的变量和方法为框架内部变量和方法,可以使用,使用前请参考【API文档】

        第二,入口,页面,组件的命名后缀为.wpy,外联的文件可以是其他后缀。

        第三,使用ES6语法开发,框架在ES6下开发,因此需要使用ES6开发小程序,ES6中有许多的语法糖,可以使我们的代码更加的简洁高效。

        第四,使用Promise,框架默认对小程序提供的API进行了Promise处理,甚至可以直接使用async/await等新特性进行开发

    7,主要解决问题

        第一,开发模式转换,对原有的小程序开发模式进行封装,更贴近MVVM框架开发模式,框架在开发过程中参考了一些现在的框架的特性,并且融入其中,一下是使用wepy前后的demo对比图

        官方DEMO代码:

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    console.log('button clicked')
  },
  onLoad: function () {
    console.log('onLoad')
  }
})

    基于wepy的实现:

import wepy from 'wepy';

export default class Index extends wepy.page {

    data = {
        motto: 'Hello World',单文件userInfo: {}
    };
    methods = {
        bindViewTap () {
            console.log('button clicked');
        }
    };
    onLoad() {
        console.log('onLoad');
    };
}

    第二,支持组件化的开发。

    第三,支持加载外部npm包,在编译过程中,会递归的遍历代码中的require,然后将相应的依赖从node_modules中拷贝出来,并修改require为相对路径,从而实现对外部npm包的支。

    第四,单文件模式,使得目录结构更加清晰。官方目录结构要求app必须有三个文件:app.json,app.js,app.wxss;页面有四个文件,index.json,index.js, index.wxml,index.wxss,而且文件必须同名

8,默认使用babel编译,支持ES6/7的一些新特性。用户可以通过wepyrc配置文件,配置自己熟悉的babel环境进行开发,默认开启使用了一些新的

    特性,比如Promise,async/await等等。

9,针对原生API进行优化。对现在API进行promise处理,同时修复一些现有API的缺陷,比如wx.request并发问题。

        原有代码

onLoad = function () {
    var self = this;
    wx.login({
        success: function (data) {
            wx.getUserInfo({
                success: function (userinfo) {
                    self.setData({userInfo: userinfo});
                }
            });
        }
    });
}

    使用wepy之后

async onLoad() {
    await wx.login();
    this.userInfo = await wx.getUserInfo();
}

进阶说明

    1,.wepyrc配置文件说明

        执行wepy new demo 之后会生成类似配置文件。

{
  "wpyExt": ".wpy",
  "sass": {},
  "less": {},
  "babel": {}
}

    wpyExt:缺省值为.wpy IDE默认情况下不会对此文件类型高亮,此时可以修改所有文件后缀为.vue(因为与Vue高亮规则一样),然后将次选项修改为.vue,就能解决部分IDE高亮显示问题。

    sass:sass编译配置,参见这里

    less:less编译配置,参见这里

    babel:babel编译配置,参见这里

wpy文件说明

    1,wpy文件的编译过程

    

    一个.wpy文件分为三部分。

        样式:<style></style>对应原有的wxss

        模板:<template></template>对应原有的wxml

        代码:<script></script>对应原有的js

    其中入口文件app.wpy不需要template。所以编译时会被忽略。这三个标签都支持type和src属性,type决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,忽略内联代码。示例代码如下:

<style type="less" src="page1.less"></style>
<template type="wxml" src="page1.wxml"></template>
<script>
    // some code
</script>

    标签对应 type 值如下表所示:

标签type默认值type支持值
stylecsscsslesssass(待完成)
templatewxmlwxmlxmlhtml(待完成)
scriptjsjsTypeScript(待完成)

    script说明

    程序入口app.wpy

        

<style type="less">
/** less **/
</style>
<script>
import wepy from 'wepy';
export default class extends wepy.app {
    config = {
            "pages":[
            "pages/index/index"
        ],
        "window":{
            "backgroundTextStyle": "light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTitleText": "WeChat",
            "navigationBarTextStyle": "black"
        }
    };
    onLaunch() {
        console.log(this);
    }
}
</script>

    入口app.wpy继承自wepy.app,其中包括一个config属性个全局属性,方法和事件。其中config属性对应原有的app.json,编译时会根据config属性生成app.json,如果需要修改config中的内容,请使用系统提供的api。

    页面index.wpy

<style type="less">
/** less **/
</style>
<template type="wxml">
    <view>
    </view>
    <component id="counter1" path="counter"></component>
</template>
<script>
import wepy form 'wepy';
import Counter from '../components/counter';
export default class Index extends wepy.page {

    config = {};
    components = {counter1: Counter};

    data = {};
    methods = {};

    events = {};
    onLoad() {};
    // Other properties
}
</script>

    页面入口继承自wepy.page,主要属性说明如下。

属性说明
config页面config,相当于原来的index.json,同app.wpy中的config
components页面引入的组件列表
data页面需要渲染的数据
methodswmxl的事件捕捉,如bindtapbindchange
events组件之间通过broadcastemit传递的事件
其它onLoadonReady等小程序事件以及其它自定义方法与属性

    组件com.wpy

<style type="less">
/** less **/
</style>
<template type="wxml">
    <view>  </view>
</template>
<script>
import wepy form 'wepy';
export default class Com extends wepy.component {

    components = {};

    data = {};
    methods = {};

    events = {};
    // Other properties
}
</script>

组件入口继承自wepy.conponent,属性与页面属性一样,除了不需要config和一些页面特有的小程序事件。

组件

小程序支持js模块化引用,也支持wxml模板,但彼此独立,业务代码与交互事件仍然需要在页面处理,无法实现组件化的松耦合和复用效果。

组件引用,

    当页面或者组件需要引入子组件时,需要在页面或者script中的components给组件分配唯一id,并且在template中添加<component>标签,

组件交互

    wepy.component基类包括三个方法,$broadcast,$emit,$invoke。因此,任一页面或者任一组件都可以调用上述方法实现通信与交互。如:

$this.$emit('some-event', 1234);

    组件的事件监听需要放在events属性下,如:

import wepy form 'wepy';
export default class Com extends wepy.component {

    components = {};

    data = {};
    methods = {};

    events = {
        'some-event': ($event, ...args) {
               console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
        }
    };
    // Other properties
}

    1,$broadcast

        $broadcast是由父组件发起,所有子组件都会受到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序,如上图,如果Page_Index发起一个$broadcast事件,那么接收到事件的先后顺序为:A, B, C, D, E, F, G, H。如下图:

    2,$emit

        $emit与$broadcast正好相反。事件发起组件的父组件会一次接收到$emit事件。如上图,如果E发起一个$emit事件,那么接收到事件的先后顺序为:A, Page_Index。如下图:

    3,$invoke

        $invoke是一个组件对另一个组件的直接调用,通过传入组件路径找到相应组件。然后在调用其方法。如果想在page_Index中,调用组件A的相关方法,this.$invoke('comA', 'someMethod', 'someArgs'),如果想在组件A中调用组件G的某个方法:this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

数据绑定

    小程序通过page提供的setData方法去绑定数据,如:this.setData({title:'this is title'}); 由于小程序架构问题,页面渲染和js逻辑层分开,所以setData操作就是js逻辑层和页面渲染层的通信,那么在同一运行周期内多次执行setData操作,那么通信的次数一一次还是多次?这取决于API本身的设计。

wepy数据绑定方式

    wepy使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁的去修改数据,实现绑定。不用重复去写setData方法。代码如下:

this.title = 'this is title';
     但需注意,在函数运行周期之外的函数里去修改数据需要手动调用 $apply 方法。如:
setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);

其它优化细节

    1,wx.repuire接受参数的修改

        点这里查看官方文档    

// 官方
wx.request({
    url: 'xxx',
    success: function (data) {
        console.log(data);
    }
});

// wepy 使用方式
// request 接口从只接收Object变为可接收String
wx.request('xxxx').then((d) => console.log(d));

    2,优化事件传递参数

// 官方
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({
  tapName: function(event) {
    console.log(event.currentTarget.hi)// output: WeChat
  }
});

// wepy 建议传参方式
<view id="tapTest" data-wepy-params="1-wepy-something" bindtap="tapName"> Click me! </view>

events: {
    tapName (event, id, title, other) {
        console.log(id, title, other)// output: 1, wepy, something
    }
}

    3,改变数据绑定方式

        保留setData方法,但不建议使用setData执行绑定,字符传入undefined的bug,并且修改入参支持。

        this.setData(target, value);

        this.setData(object)

        

// 官方
<view> {{ message }} </view>

onLoad: function () {
    this.setData({message: 'hello world'});
}


// wepy
<view> {{ message }} </view>

onLoad () {
    this.message = 'hello world';
}
    4,组件代替模板和模块,
// 官方
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

<!-- index.js -->
var item = require('item.js')




// wepy
<!-- /components/item.wpy -->
 <text>{{text}}</text>

<!-- index.wpy -->
<template>
    <component id="item"></component>
</template>
<script>
    import wepy from 'wepy';
    import Item from '../components/item';
    export default class Index extends wepy.page {
        components = { Item }
    }
</script>
    API
      wepy.event
属性类型默认值说明
nameString-事件名称
sourcewepy.component-事件来源
typeString-emit 或者 broadcast
方法参数返回值说明
destroy--在 emit 或者 broadcast 过程中,调用destroy方法将会停止事件传播。
     wepy.component
属性类型默认值说明
isComponentBooleantrue是否是组件,如果是页面,此值为false
prefixString''组件前缀,组件前缀+组件方法属性才是在小程序中真实存在的方法或属性。
$rootwepy.page-根组件,一般都是页面
$parentwepy.component-父组件
$wxpagePage-小程序Page对象
$comsList(wepy.component){}子组件列表

方法参数返回值说明
init--组件初始化。
getWxPage-Page返回小程序Page对象。
$getComponentpath(String)wepy.component通过组件路径返回组件对象。
$invokecom(String/wepy.component), method(String), [args]-调用其它组件方法
$broadcastevtName(String), [args]-broadcast事件。
$emitevtName(String), [args]-emit事件。
$applyfn(Function)-准备执行脏数据检查。
$digest--脏检查。

wepy.page

方法参数返回值说明
init--页面始化。

wepy.app

属性类型默认值说明
$wxappApp-小程序getApp()
init--应用始化包括对原生API的改造与优化


  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值