小程序之wepy框架

最近这段时间有做用到wepy框架的小程序啦，记录一下在开发中一些常用的和需要注意的东西。

数据绑定

可以直接this.xxx = “xxx”，但是需要注意的是在methods之外的方法中，要这样去改data中的数据就必须要加上this.$apply()

methods

只有bindtap这类方法才需要放到methods中，其他的方法都与onLoad平级

events

自定义的事件，事件函数写这里面（组件的事件监听需要写在events里）

// 在子组件中
this.$emit('changeDate', time)
// 在父组件中
events = {'changeDate': (day) => {this.getTask(day)}
}

事件绑定以及事件传参

事件绑定语法使用优化语法代替

原 bindtap=“click” 替换为 @tap=“click”，原catchtap="click"替换为@tap.stop=“click”（阻止冒泡事件向上冒泡）。
原 capture-bind:tap=“click” 替换为
@tap.capture=“click”，原capture-catch:tap="click"替换为@tap.capture.stop=“click”。
事件传参使用优化后语法代替。原bindtap=“click” data-index="{{index}}"替换为@tap=“click({{index}})”

wepy框架组件传值

1.父传子

和vue一样动态属性的方式传值，然后子组件props接收

// 在父组件内(注意：想要父组件的值改变，传给子组件中的值也跟着变化，一定要用.sync！！！为此踩了好久的坑)
<children :list.sync="list"></children>
// 在子组件内
list: {type: Array,default: []
}

2.$broadcast

这个是用来父传子自定义事件的，可以携带参数传值

// 在父组件内
this.$broadcast('index-broadcast', '我正在测试哈哈哈哈')
// 在子组件内
events = {'index-broadcast': (...args) => {console.log(args)          //["我正在测试哈哈哈哈", _class]}
}

3.$emit

这是子组件传给父组件自定义事件，可以携带参数传值

// 在子组件中
this.$emit('changeDate', time)
// 在父组件中
events = {'changeDate': (day) => {this.getTask(day)}
}

4.$invoke

如果通过当前组件进行$invoke触发事件，如果父组件已经在components里面引入了子组件就可以直接通过invoke来单独向子组件发送事件。如果是子组件之间的事件交互，第一个参数就需要对应组件的路径。
简单的理解就是可以调用子组件或者兄弟组件中的函数，给该函数传参。

// 父子组件中使用$invoke的情况下
// 在父组件中
this.$invoke('子组件，必须要单引号括起来', '子组件方法名称',  param1,param2,param3.......);
this.$invoke('Tabbar', 'changeSelected', 0)
// 在子组件Tabbar中
methods = {changeSelected(num) {this.selected = num}
};// 在兄弟组件中使用$invoke的情况下
this.$invoke('子组件的相对路径', '子组件方法名称', param1,param2,param3.......);

如果有总结不对的地方，欢迎指正哦~

小程序之wepy框架相关推荐

微信小程序基于wepy框架开发之问题集锦
目录 1.报错提示:appJSON["window"]["navigationBarTextStyle"] 字段需为 black 或 white 2.有时候代码 ...
《web开发：（微信小程序）WePY 框架开发规范》
一.WePY 框架开发规范 1. 自定义默认首页 1. 创建 home 首页在 src -> pages 目录下,创建 home.wpy 页面,并创建页面的基本代码结构,示例代码如下: ...
最近学习mpvue框架开发微信小程序,把wepy框架的项目实现到mpvue中,知道其中的一些两者之间的区别...
## 如果有兴趣的话,大家可以去github上下载, 我是用mpvue框架做的这个项目 github链接地址: https://github.com/PinkYun/PinkJing 转载于:htt ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
小程序开发提示没有npm路径_百度小程序三个框架的各自的特点
小程序跨平台解决方案方面有Taro.Mpvue.WePY这3个平台,他们各有特点,优势不相上下,他们也在不断不停的迭代更新,都拥有大量的开发者支持,百度也拥抱三方框架,跟他们一起合作,来同步促进小程序 ...
原生开发小程序和 wepy 、 mpvue 对比
原生开发小程序和 wepy . mpvue 对比本文横向对比.探讨了下原生开发小程序,和目前比较热门的 wepy .mpvue 开发小程序三种方式的优势和劣势:由于三者的篇幅都比较多,本文只是简单 ...
c++小程序代码_# 微信小程序的原生框架和taro对比 ##
微信小程序的原生框架和taro对比小程序历史(为什么会出现?) 2007年 iPhone H5 大家知道现在手机端主要是iOS.Android两大系统,实际上在早期有3大系统竞争,还有一个就是诺基亚 ...