微信小程序基本语法

渲染

• .js

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

• .wxml

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

绑定id

• .js

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

• .wxml

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

if -- else 判断

• .js

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

• .wxml

<view >{{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 >{{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 >{{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 >{{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-user>
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>