微信小程序入门3--wx语法

1.数据绑定：

在wxml里渲染文件

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

在js文件里初始化数据

Page({
  data: {
    message: 'Hello MINA!',
     list: [
      { id: "1", name: "张三", flag: false }, 
      { id: "2", name: "李四", flag: true },
       { id: "3", name: "王二", flag: false}
       ],
  }
})

2.列表渲染

<view wx:for=“{{list}}” wx:for-item="ite" wx:for-index="ind" wx:key="*this">
{{ite}}{{ind}}</view>

注：wx：for可以用来循环数组，默认元素是item，下标是index；可以通过wx：for-item和wx：for-index来修改元素和下标。在列表渲染的同事也需要绑定key

3.条件渲染

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
//如果condition的值为真渲染该代码块否者不渲染代码块

wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

4.模板的创建和引入

1.创建

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
使用模板

2.引入：

<template src="模板的地址"/>
<template is="msgItem" data=“{{list}}”>
 </template>
 //引入模板外的内容
 <includesrc="模板的地址">

模板通过属性data传值

5.wxs语法：

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

更多细节可以参考官网：https://developers.weixin.qq.com/miniprogram/dev/framework/