微信小程序
框架
Wepy
自定义组件
- 实例写法
- 高级用法
- 组件传值
- 动态传值
- 静态传值
- 动态传值
- 组件加载时机
之前一直认为,组件是在页面写入组件标签时才开始触发加载。今天在看控制台日志的时候,发现即使没写组件标签,只要components注册了该组件,也会触发组件加载。官方文档如下:
- 组件生命周期
如果在使用wepy框架开发小程序时,组件生命周期只支持OnLoad,与小程序原生生命周期不一样,这里一定要注意。 - 循环渲染
当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签),必须使用WePY定义的辅助标签,代码如下:
/** project └── src ├── components | └── child.wpy ├── pages | ├── index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy log 页面配置、结构、样式、逻辑 └──app.wpy 小程序配置项(全局样式配置、声明钩子等) **/ // index.wpy <template> <!-- 注意,使用for属性,而不是使用wx:for属性 --> <repeat for="{{list}}" key="index" index="index" item="item"> <!-- 插入<script>脚本部分所声明的child组件,同时传入item --> <child :item="item"></child> </repeat> </template> <script> import wepy from 'wepy'; // 引入child组件文件 import Child from '../components/child'; export default class Index extends wepy.page { components = { // 声明页面中要使用到的Child组件的ID为child child: Child } data = { list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}] } } </script>
需要注意的是WePY 1.x 版本中,组件使用的是静态编译组件,即组件是在编译阶段编译进页面的,每个组件都是唯一的一个实例,目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去使用 props, computed, watch 等等特性
- 组件传值
功能特性
- 支持加载外部NPM包
疑问:对这句话一开始一直模棱两可,只知道在wpy的标签中,可以直接import项目node_modules文件下的模块,而且不用写路径,直接写模块名称即可,而且不用写require,直接写import即可。比如在声明一个wepy页面时,我们需要引入wepy模块,只需要import wepy from 'wepy'
。
原因:wepy在编译时,采用的是Babel进行编译,会将import转换成require,如下图
这是目录dist\pages\home下的一个页面编译后的文件,import被转换成了require。个人认为腾讯wepy说明文档不应该直接说会递归遍历代码中的require,而是应该编译之后代码中的require,这样子会更准确些。
原生
自定义组件
-
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
-
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
-
组件生命周期
样式
- 样式导入
路径要填相对路径 - 全局样式与局部样式
需要注意的是,这里只说了app和page之间的样式关系,但没有说页面和组件样式的关系,页面和组件的样式关系如下:
布局
事件
Page
- 事件处理函数
- onShareAppMessage
微信目前转发只能通过用户点击按钮的形式进行操作,给开发带来了很多不便。比如你想在点击分享的时候,向分享函数传参,不能直接通过方法名(参数)的形式进行传参,需要借助小程序的事件对象属性dataset进行传参,当然还有其它方式,在这里只描述借助dataset属性,下面给出代码:<button open-type="share" plain data-mydata="{{entity}}"></button>
/** * 页面分享 */ onShareAppMessage(res) { // 来自页面内转发按钮 if (res.from === 'button') { console.log(res.target.dataset.mydata); }else { // 来自页面右上角菜单 return { title: '自定义转发标题', path: '/page/user?id=123' } } }
- onShareAppMessage
- 页面路由
需要注意的是,跳转的页面路径一定要记得在全局配置文件app.json的pages属性添加页面路径,否则即使页面路径正确,页面也无法正常跳转,app.json的配置格式如下
异常
[xmldom error] element parse error: Error: invalid attribute::no
在引用子组件时,使用了子组件未定义的属性‘no’