微信小程序——基础操作
微信小程序——基础操作
该笔记主要记录了组件的使用,数据展示,标签使用以及设置模板
组件的使用
前往微信小程序官网,找到对应的开发文档。
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
以button组件为例,在左侧找到button即可
找到需要复制代码的部分,直接复制粘贴即可
数据展示
在小程序中,也可以利用类似html的{{hold_place}}进行数据的替换和展示
首先自动创建小程序项目(quick start)在index.wxml中添加代码
<text>{{hold_place}}</text>
然后在index.js中的data里设置hold_place的值即可
标签使用
- if、else标签
基本格式为
<标签 wx:if="{{判断}}">内容一</标签>
<标签 wx:else>内容二</标签>
- for标签
基本格式为
<view wx:for="{{data}}">
{{index}}-{{item}}
</view>
其中,data为一个一维列表,如[‘123’, ‘456’, ‘789’]
index为遍历到的序号,如’123’的序号为0
item则为遍历的内容
故上面的代码运行结果为:
0-123
1-456
2-789
当然,index和item的名字是可以替换的
<view wx:for="{{data}}" wx:for-item="ite" wx:for-index="ind">
{{ind}}-{{ite}}
</view>
设置模板
对于需要调用相同的wxml代码,可以使用模板来优化代码
调用方法
<include src="../../templates/header.wxml" />
即可调用header.wxml中的代码