开发进阶
框架
1. 小程序设置
2. 场景值
3. 框架接口
4. WXML 语法参考
4.1 多级循环 for
html
<view class="row" wx:for="{{operateList}}">
<block wx:for="{{item}}" wx:for-item="subItem">
<button>{{subItem}}</button>
</block>
</view>4.2 绑定事件传递参数
html
<block wx:for="{{item}}" wx:for-item="subItem">
<button bind:tap="calcTap" data-query="{{subItem}}">{{subItem}}</button>
</block>
<script>
function calcTap(e) {
const temp = e.target.dataset.query;
}
</script>4.3 page 与 component 区别
- 定义:一个 Page 代表小程序中的一个页面,每个页面都有自己的路径,并且可以通过路由跳转来访问。
- 生命周期:页面有自己的一套生命周期函数,如 onLoad、onShow、onReady 等,这些函数会在页面的不同阶段被调用。
- 用途:主要用于构建应用程序的各个独立页面,是小程序的基本构成单元。
- 配置:每个页面都需要在 app.json 中进行配置,指定页面路径。
- 定义:一个 Component 是可以复用的视图组件,它可以包含逻辑、样式和结构,可以在多个页面中重复使用。
- 生命周期:组件也有自己的生命周期函数,如 created、attached、ready 等,但与页面的生命周期有所不同。
- 用途:主要用于封装可重用的 UI 元素或功能模块,提高代码的复用性和维护性。
- 属性传递:组件支持通过属性(properties)接收父级传入的数据,并可通过事件机制向父级发送消息。
4.4 引入 WXML 与 Component
在微信小程序中,使用 <include> 标签引入组件的方式并不是直接支持的。<include> 主要用于包含 WXML 模板文件,而不是组件。引入组件