微信小程序入门

微信官方文档 | 微信开放文档 (qq.com)

1. app.json 全局配置文件

   配置全局文件

   • pages：添加要创建的文件项，保存后就会自动生成文件
   • windows：设置小程序的状态栏，导航条，标题窗口颜色

WXML ---> HTML (结合基础组件，事件系统，构件出页面结构)

1. 相当于 ，行内标签，不会换行
2. 相当于，块级元素，会换行

数据绑定

{{ 数据 }}

1. 运算 --> 表达式（ 数值计算，字符串拼接，三元表达式）

2. 列表循环 （wx:for）

   wx:key绑定的是数组中的为唯一属性，wx:key=*this表示数组是普通数组，*this是循环项

   <view wx:for="{{ person }}" 
   wx:for-item="item" 
   wx:for-index="index"
   wx:key="id"
   >
       索引： {{ index }}
       名称： {{ item.name }}
   </view>
   
   
   

3. 标签 ---> 占位标签

4. 条件渲染（wx:if）（wx:if, wx:elif, wx:else） (hidden 属性是通过添加样式的方式来呈现的)

   当标签不是频繁的切换使用if，频繁切换使用hidden

事件绑定

关键字：bind （bindinput，bindtap【点击事件】）

获取事件源对象的值：

 e.detail.value

获取data中数据的值：

 this.data.属性名
复制代码
复制代码

将事件源对象的值设置回data中：

 this.setData({
        num: this.data.num + operation
});
we

事件绑定是不能直接传参，要通过自定义属性的方式传参（ {{ 传递的参数}} ）：

 <button bindtap="bandletap" data-operation="{{ 1 }}">+</button>
 
 bandletap(e) {
    // console.log(e);
    const operation = e.currentTarget.dataset.operation;
    this.setData({
        num: this.data.num + operation
    });
  },