小程序语法

1. 模板语法

1. WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构
   建出页面的结构。

1.1 数据绑定

1. 普通写法

   <view> {{ message }} </view>
   

   Page({
   	data: {
   		message: 'Hello MINA!'
    	}
   })
   

2. 组件属性

   <view id="item-{{id}}"> </view>
   

   Page({
   	data: {
    		id: 0
    	}
   })
   

3. 布尔类型

   <checkbox checked="{{false}}"> </checkbox>
   <!--不要直接写 checked=false，其计算结果是一个字符串-->
   

1.2 运算

1. 三元运算

   <view hidden="{{flag ? true : false}}"> Hidden </view>
   

2. 算数运算

   <view> {{a + b}} + {{c}} + d </view>
   

   Page({
      data: {
    	  a: 1,
    	  b: 2,
    	  c: 3
      }
   })
   

3. . 逻辑判断

   <view wx:if="{{length > 5}}"> </view>
   

4. 字符串运算

   <view>{{"hello" + name}}</view>
   

   Page({
   	data:{
    	  name: 'MINA'
    	}
   })
   

5. 注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

1.3 列表渲染

1. wx:for的变量名默认为 item

2. wx:for-item 可以指定数组当前元素的变量名

3. 下标变量名默认为 index

4. wx:for-index 可以指定数组当前下标的变量名

5. wx:key 来提高数组渲染的性能

6. wx:key 绑定的值有如下选择

   // 1. string 类型，表示循环项中的唯一属性如：
   list:[
   	{id:0,name:"炒饭"},
   	{id:1,name:"炒面"}
   ]
   wx:key="id"
   

   // 2. 保留字 *this ，它的意思是 item 本深，*this 代表的必须是唯一的字符串和数组。
   list:[1,2,3,4,5]
   wx:key="*this"
   

7. 示例：

   <view wx:for="{{array}}" wx:key="id">
      {{index}}: {{item.message}}
   </view>
   

   Page({
      data: {
        array: [
        	{
             id:0,
             message: 'foo',
          }, 
          {
     		 id:1,
            message: 'bar'
         }]
     }
   })
   

8. block渲染一个包含多节点的结构块block最终不会变成真正的dom元素

   <block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
   	<view> {{index}}: </view>
   	<view> {{item}} </view>
   </block>
   

1.4 条件渲染

1. wx:if 在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

   <view wx:if="{{false}}">1</view>
   <view wx:elif="{{true}}">2</view>
   <view wx:else>3</view>
   

2. hidden

   <view hidden="{{condition}}"> True </view>
   <!-- hidden 类似 wx:if -->
   

3. 频繁切换用 hidden，不常使用用 wx:if

2. 小程序事件的绑定

1. 小程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等，不同的组件支持不同的事件，具体看组件的说明即可。

2. 示例：

   <input bindinput="handleInput" />
   

   Page({
   	// 绑定的事件
   	handleInput: function(e) {
   		console.log(e);
   		console.log("值被改变了");
    	}
   })
   

3. 事件传值：

   <!-- 1. 绑定事件时不能带参数 不能带括号 以下为错误写法 -->
   <input bindinput="handleInput(100)" />
   

   <!-- 2. 事件传值 通过标签自定义属性的方式 和 value -->
   <input bindinput="handleInput" data-item="100" />
   

   // 3. 事件触发时获取数据
   handleInput: function(e) {
   	// {item:100}
   	console.log(e.currentTarget.dataset)
     
   	// 输入框的值
   	console.log(e.detail.value);
   }
   

3. 样式 WXSS

1. WXSS( WeiXin Style Sheets )是一套样式语言，用于描述 WXML 的组件样式。
2. 与 CSS 相比，WXSS 扩展的特性有：响应式⻓度单位 rpx、样式导入

3.1 尺寸单位

1. rpx （responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。
2. 如在 iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像素 ，
   1rpx = 0.5px = 1物理像素 。
   
3. 建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
4. 使用步骤：
   a. 确定设计稿宽度 pageWidth
   b. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
   c. 在less文件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

3.2 样式导入

1. wxss中直接就支持，样式导⼊功能。
2. 也可以和 less中的导入混用。
3. 使用 @import 语句可以导入外联样式表，只支持相对路径。
4. 示例代码：

   .small-p {
   	padding:5px;
   }
   

   @import "common.wxss";
   .middle-p {
   	padding:15px;
   }
   

3.3 选择器

1. 特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效！

    *{
   	margin:0;
   	padding:0;
   	box-sizing:border-box;
   }
   

2. 目前支持的选择器有：
   

3.4 小程序中使用less

1. 原生小程序不支持 less ，其他基于小程序的框架大体都支持，如 wepy ， mpvue ， taro 等。
2. 但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现
3. 编辑器是 VsCode
4. 安装插件 Easy LESS
5. 在vs code的设置中加入如下，配置

    "less.compile": {
       "outExt": ".wxss"
   }
   

6. 在要编写样式的地方，新建 less 文件，如 index.less ,然后正常编辑即可。

4. 小程序中的本地存储

1. 存储：

   wx.setStorageSync("key", "value")
   

2. 取出：

   wx.getStorageSync("key")
   

3. 注意：

   // 1. web中的本地存储：不管存进去什么类型的数据，最终都会先调用toString()，把数据变成字符串，然后再存进去
   // 2. 小程序中的本地存储：不存在类型转换这个操作，存进去什么类型数据，取出的时候就是什么类型