安装脚手架
1. 安装构件工具 npm i wepy-cli -g
2.创建项目 wepy new 项目名
3.实时编译 wepy build --watch 或 npm run dev
4.使用微信开发者工具新建项目,本地开发选择dist目录。
5.微信开发者工具 --> 项目 --> 关闭ES6转ES5。
代码规范:
1.变量与方法使用尽量使用驼峰式命名,避免使用$开头。
以$开头的方法或者属性为框架内建方法或者属性,可以被使用,使用前请[参考API文档]()。
2.入口,页面,组件的命名后缀为.wpy。外链的文件可以是其它后缀。
请参考wpy文件说明
3.使用ES6语法开发。
框架在ES6下开发,因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。
4.使用Promise
框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发。
构件组件
1.components文件夹里创建 *.wpy 如果编辑器不高亮 将后缀改成 *.vue 和 wepy.config 里 wpyExt: '.wpy' 该成 .vue VScode可以使用插件wpy解决 在设置中设置关联
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.w ": "html",
"*.wxss": "css"
},
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
2.wpy结构和vue基本一致 js导出部分react语法
绑定参数
1.wepy中props传递需要加上.sync修饰符(类似VUE1.x)才能实现props动态更新,并且父组件再 变更传递给子组件props后要执行this.$apply()方法才能更新
2.wepy支持数据双向绑定,子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据
组件通信
1.wepy中是通过$broadcast,$emit,$invoke 三种方法实现通信
$broadcast:父组件触发所有子组件事件
this.$broadcast('子组件在event里定义好的函数名',传递的参数)
父子关系:
只有import引入时才产生父子关系 slot不产生父子关系
$emit:子组件触发父组件事件
this.$emit('父级在events里定义好的函数名', 传递的参数)
父子关系:
只有import引入时才产生父子关系 slot不产生父子关系
$invoke:子组件触发子组件事件
this.$invoke('组件路径','被调用的方法名',传递的参数)
注意: 子组件被调用的方法 不要定义在methods 里
repeat 循环时 被循环的组件的props会合并到被循环的组件的data中