微信小程序_2小程序-模板及其配置

目标:

能够使用WXML模板语法渲染页面结构
能够使用WXSS样式美化页面结构
能够使用app.json对小程序进行全局性配置
能够使用page.json对小程序页面进行个性化配置
能够知道如何发起网络数据请求

---

模板与配置

数据绑定基本原则

1.在data中定义数据
2.在WXML中使用数据

在data中定义数据:

在页面的.js文件中,把数据定义到data对象中即可

• Mustache语法格式:

把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可.语法格式为:

  <text>
    {{要渲染的数据}}
  </text>

如:

WXML:

<!--pages/mustache/mustache.wxml-->
<view>
  <text>渲染数据:</text>
  <text>
    {{info}}
  </text>
</view>

.js文件:

// pages/mustache/mustache.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    info: 'hello world'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

• 叫做Mustache语法或者插值表达式都是可以的

Musrtache语法的应用场景:

• 绑定内容
• 绑定属性
• 运算(三元运算,算数运算等)

动态绑定内容:

页面的数据如下:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: 'init data'
  },
  })

页面的结构如下:

<view>{{info}}</view>

动态绑定属性:

页面的数据:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: 'init data',
    imgSrc:'http://127.0.0.1/1.png'
  },
})

页面的结构如下:

  <image src="{{imgSrc}}"></image>

三元运算:

.js页面的数据如下:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    random: Math.random() * 10, //生成10以内的随机数
  },
})

WXML页面结构如下:

  <text>
    {{randomNumber >=5? '随机数大于等于5' : '随机数小于5'}}
  </text>

算数运算:

页面的数据如下:

// pages/mustache/mustache.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: 'init data',
    imgSrc: 'http://127.0.0.1/1.png',
    random: Math.random() * 10, //生成10以内的随机数
    randomNum: Math.random().toFixed(2), //生成一个带两位小数的随机数,例如0.34
  },
})

页面的结构如下:

  <text>
    生成100以内的随机数:{{randomNum*100}}
  </text>