小程序基本语法总结

模板语法：

1.数据绑定

• 普通写法

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

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

• 组件属性

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

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

• bool类型

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

2.运算

• 三元运算

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

• 算数运算

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

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

• 逻辑判断

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

• 字符串运算

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

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

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

列表渲染

• wx:for
  项的变量名默认为 item
  wx:for–item 可以指定数组当前元素的变量名
  下标变量名默认为 index
  wx:for–index 可以指定数组当前下标的变量名
  wx:key ⽤来提⾼数组渲染的性能

  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"

整体的渲染写法

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

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

block

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

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

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

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

hidden

<view hidden="{{condition}}"> True </view>

类似 wx:if
如果要频繁切换 建议使用 hidden
反之 ⽤ wx:if

⼩程序事件的绑定

• ⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等
  wxml

<input bindinput="handleInput" />

js

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

注意： 绑定事件时不能带参数 不能带括号

• 事件触发时获取数据

  handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 }

常见的组件

• view,text,button,image,navigator,icon,swiper,radio,checkbox等
• view
  代替 原来的 div 标签

  <view hover-class="h-class">
 点击我试试
  </view>

• text

1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制（只有该标签有这个功能）
4. 可以对空格 回⻋ 进⾏编码
   

 <text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

• image

1. 图⽚标签，image组件默认宽度320px、⾼度240px
2. ⽀持懒加载
   

<image src="图片路径"></image>

• swiper
  微信内置轮播图组件
  滑块视图容器
  

<swiper 属性="">
	轮播内容
</swiper>

• button
  

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

⼩程序⽣命周期

• 应⽤⽣命周期

属性	类型	默认值	必填	介绍
onLaunch	function		否	监听⼩程序初始化
onShow	function		否	监听⼩程序启动或切前台
onHide	function		否	监听⼩程序切后台
onError	function		否	错误监听函数
onPageNotFound	function		否	⻚⾯不存在监听函数

• ⻚⾯⽣命周期

属性	类型	介绍
data	Object	⻚⾯的初始数据
onLoad	function	⽣命周期回调—监听⻚⾯加载
onShow	function	⽣命周期回调—监听⻚⾯显⽰
onReady	function	⽣命周期回调—监听⻚⾯初次渲染完成
onHide	function	⽣命周期回调—监听⻚⾯隐藏
onUnload	function	⽣命周期回调—监听⻚⾯卸载
onPullDownRefresh	function	监听⽤⼾下拉动作
onReachBottom	function	⻚⾯上拉触底事件的处理函数
onShareAppMessage	function	⽤⼾点击右上⻆转发
onPageScroll	function	⻚⾯滚动触发事件的处理函数
onResize	function	⻚⾯尺⼨改变时触发
onTabItemTap	function	当前是 tab ⻚时，点击 tab 时触发