03、小程序视图与渲染

最新推荐文章于 2020-12-04 07:49:46 发布

nikeylee

最新推荐文章于 2020-12-04 07:49:46 发布

阅读量152

点赞数

分类专栏：小程序开发

本文链接：https://blog.csdn.net/nikeylee/article/details/105402611

版权

本文档详细介绍了小程序的视图与渲染，包括组件基本使用、数据绑定、渲染标签（条件标签、循环标签）以及模版的使用。通过实例演示了如何在WXML和JS中操作，展示了条件控制和循环遍历数据的方法，同时也讲解了如何创建和引入模版以实现代码复用。

摘要由CSDN通过智能技术生成

小程序视图与渲染

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

1、组件基本使用

微信参考地址：小程序组件

如：按钮和文本

pages\demo\demo01.wxml

<button type="default" hover-class="other-button-hover">default</button>
<button type="primary">primary</button>
<text>这里是文本内容</text>

结果显示：

2、数据绑定

js中定义，wxml中使用，使用{ {变量}}

pages/demo/demo01.js

Page({
  data: {
    text:"这是文本的内容",
    btnText:"这是按钮的内容"
  }
})

pages/demo/demo01.wxml

<button type="default" hover-class="other-button-hover">default</button>
<button type="primary">{
  {btnText}}</button>
<text>{
  {text}}</text>

例子：点击按钮，显示不同内容的文本内容

在wxml中给button添加一个绑定事件bindtap，在js中定义事件；

pages/demo/demo01.wxml

<button type="primary" bindtap="btnClick">{
  {btnText}}</button>
<text>{
  {text}}</text>

pages/demo/demo01.js

Page({
  data: {
    text:"这是【点击前】的文本显示内容...",
    btnText:"自定义按钮"
  },
  btnClick:function(){
    console.log("button被点击了....")
    this.setData({
      btnText:"【点击后】按钮",
      text:"这是一个新的内容..."
    })
  }
})

button点击前和后运行效果：