微信小程序教程笔记2

微信小程序的视图与渲染

• 组件的基本使用
• 数据的绑定
• 渲染标签
• 模板的使用
  
  first.wxml

<include src="../templates/head"/>
first page
<button type="default" hover-class="other-button-hover"> default </button>
<button type="primary" bindtap="btnClick">{{btnText}}</button>
<view wx:if="{{show}}">{{text}}1</view>
<view wx:else>{{text}}2</view>
<text>this is text</text>
<text>{{show}}</text>
<view wx:for="{{news}}" wx:for-item="newsitem" wx:for-index="ix">
recycling content
{{ix}}-{{newsitem}}
</view>
<import src="../templates/rear"/>
<template is="rear2" data="{{text:'导入设置的内容。。。'}}"/>

fist.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    text:"this is text in js",
    btnText:"this is button text",
    show:"false",
    news:['a','b','c']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

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

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

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
  btnClick : function(){
    console.log("button is clicked");
    var isShow=this.data.show;
    console.log("isShow:" + isShow);
    var newsdata=this.data.news;
    newsdata.shift()
    this.setData({ text: "this is a new content", show:!isShow,news:newsdata })
    
  }
})

<text>
this is head wxml;
</text>

<template name="rear1">
this is rear1 content template;
</template>

<template name="rear2">
this is rear2 content template;-{{text}}
</template>