微信小程序_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>