微信小程序——基础操作

微信小程序——基础操作

该笔记主要记录了组件的使用，数据展示，标签使用以及设置模板

组件的使用

前往微信小程序官网，找到对应的开发文档。
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中的代码