微信小程序基本語法

渲染

• .js

page ({
    data :{
        memo:'hello world'
    }
})

• .wxml

<view>{{memo}}</view>

綁定id

• .js

page ({
    data :{
        memo:'hello world',
        user_id:123
    }
})

• .wxml

<view id="user-{{user_id}}">{{memo}}</view>

if -- else 判斷

• .js

page ({
    data :{
        memo:'hello world',
        user_id:123,
        show:false
    }
})

• .wxml

<view id="user-{{user_id}}">{{memo}}</view>
<view wx:if="{{show}}">TRUE</view>
<view wx:else="{{show}}">False</view>

是否隱藏(利用三元運算格式)

• .js

page ({
    data :{
        memo:'hello world',
        user_id:123,
        show:false,
    }
})

• .wxml

<view id="user-{{user_id}}" hidden="{{userid==123 ? true:false}}">{{memo}}</view>   # id則代表綁定值
<view wx:if="{{show}}">TRUE</view>
<view wx:else="{{show}}">False</view>

列表渲染

• .js

page ({
    data :{
        memo:'hello world',
        user_id:123,
        show:false,
        array:[{
        message:'hello',
    },
    {
        message:'world',}]}
})

• .wxml

<view id="user-{{user_id}}" hidden="{{userid==123 ? true:false}}">{{memo}}</view>
<view wx:if="{{show}}">TRUE</view>
<view wx:else="{{show}}">False</view>
<view wx:for="{{array}}" wx:for-item="item" wx:key="index">        
   # 定義的列表渲染出來,再指定一個key,index代表下標
<text id="index_message-{{index}}">{{index}}---{{item.message}}</text>
</view>

簡單的模板式渲染

• .js

page:({
    data:{
        item:{
            index:0,
            msg:'this is a template',
            time: '2019-19-15'
    	},
        itemc:{
            index:999,
            msg:'this is a template',
            time: '2019-2-29'
    	},}})

• .wxml

<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...itemc}}"/>
# 1. is 綁定下面的name值,data將item傳送到js組件,js的書寫就可以渲染出來了.
# 2. 使用相同的msgItem,但不同的data值,都可以渲染出來.
<template name="msgItem">
<view>
<text>{{index}}:{{msg}}</text>
<text>Time:{{time}}</text>   

點擊事件的傳值(id,name)------target事件獲取

• .js

* get_id作為點擊事件的方法
 get_id:function(even){
     // 獲取屬性框里的id(只識別小寫)
      console.log("data - "+even.target.dataset.userid)
     // 獲取屬性框里的name(只識別大寫)
      console.log("data - " + even.target.dataset.userName)
  },

• .wxml

<view data-userid="123456" data-user-name="louse" bindtap="get_id">
message</view>
<view>

點擊事件的冒泡事件

• .js

作為點擊事件
 handTap1:function(){console.log('handTap1')},
 handTap2:function(){console.log('handTap2')},
 handTap3:function(){console.log('handTap3')},

• .wxml

冒泡事件   catchtap代表阻止向上冒泡
<view bindtap="handTap1">outer view
<view catchtap="handTap2">middle view
<view bindtap="handTap3">innwe view
</view>
</view>
</view>