直播视频小程序抖音百科知识模板视频营销抖音视频 服装 主轴
抖音视频| 小程序| 微信小程序| 微信小程序教程|

微信小程序开发之模板

wxxml:

<!--pages/home/index.wxml-->
<view>{{index}}</view>
<view>{{arr}}</view>
<view>{{obj.name}}</view>
<view data-shuxing="{{shuxing}}"></view>
<view wx:for="{{persons}}" wx:key="id"  wx-item="item" wx-index="index">
 {{index}} :{{item.name}}
</view>
<view wx:for="{{arr}}" wx:key="*this">
{{item}}
</view>
 
<view wx:for="{{persons}}" wx:key="*this"  wx-item="item" wx-index="index">
 {{index}} :{{item.name}}
</view>
<view wx:for="array">
{{item}}
</view>
<!--定义模板-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<!--使用模板-->
<template is="msgItem" data="{{...item2}}"/>
<template is="msgItem" data="{{...item2}}"/>
wxjs:

// pages/home/index.js
Page({
 
    /**
     * 页面的初始数据
     */
    data: {
    index:"首页",
    shuxing:"我是组件属性",
    arr:[1,2,3,4,5],
    obj:{
     name:'张山'
    },
    persons:[
    {
        id:1,
        name:"张三",
        age:12,
        sex:"男",
    },
    {
        id:2,
        name:"李四",
        age:15,
        sex:"男",
    },
    
    {
        id:3,
        name:"王五",
        age:18,
        sex:"男",
    },
    {
        id:4,
        name:"赵柳",
        age:16,
        sex:"女",
    }
    ],
    item1: {
        index: 0,
        msg: 'this is a template1',
        time: '2021-12-05'
      },
       item2: {
    index: 1,
    msg: 'this is a template2',
    time: '2021-12-05'
  }
 },
 
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
 
    },
 
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
 
    },
 
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
 
    },
 
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
 
    },
 
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
 
    },
 
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
 
    },
 
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
 
    },
 
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
 
    }
})
显示:
模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板的作用域

模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。


Copyright © 360度搜索建站网. All Rights Reserved.

360度搜索建站网版权所有@588wlk.cn

手机扫描浏览手机网站

精品