微信小程序教程笔记2

最新推荐文章于 2025-07-04 01:33:04 发布

原创最新推荐文章于 2025-07-04 01:33:04 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了微信小程序的视图构建与渲染流程，包括组件的基本使用、数据绑定、渲染标签、模板的运用等核心内容。通过解析first.wxml与fist.js文件，展示了如何利用wx:if、wx:else、wx:for等指令进行条件渲染和列表渲染，并演示了按钮事件处理及数据更新的过程。

微信小程序的视图与渲染

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

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>