微信小程序开发之十一 —— 页面渲染

文章目录

学习前后
变量渲染到页面
响应的数据绑定
响应的布尔操作
响应的数组操作
事件对象

学习前后

上一篇：微信小程序开发之十 —— 点击事件
下一篇：微信小程序开发之十二 —— 数据携带

变量渲染到页面

首先先在页面的js文件的page({})函数前面添加一些JavaScript代码

let title = "小程序假期开发学习";
let name = "bushenghan";
let a = -3;
let now = new Date();

这个是写在js最前面的，跟Page并列，不要写在Page里面
这个是js语法，所以要使用分号隔开，注意区分与Page里面逗号分隔的区别

在page的data数据里面添加以下代码：

data: {
    charat: title.charAt(5),
    concat: name.concat(title),
    upcase: name.toUpperCase(),
    abs: Math.abs(a),
    now: now.toString(),
    year: now.getFullYear(),
    time: now.getTime(),
  },

.wxml绑定数据，将数据渲染到页面

<view>两个字符串连接: {{concat}}</view>
<view>全部转成大写: {{upcase}}</view>
<view>绝对值: {{abs}}</view>
<view>当前时间: {{now}}</view>
<view>{{year}}年</view>
<view>1970年1月1日至今的毫秒数: {{time}}</view>

响应的数据绑定

前面我们已经了解到，逻辑层js文件里的data数据可以渲染到页面。除此之外，如果逻辑层data的数据发现变化，页面也会做出相应的更新，这就是响应的数据绑定。我们是通过page的setData()方法来实现数据更改的。
比如我们设置一个更改背景的按钮
.wxml

<view style="background-color:{{bgcolor}};width:320px;height:200px;"></view>
<button style="background-color:red" bindtap="redTap">让背景变红</button>
<button style="background-color:yellow" bindtap="yellowTap">让背景变黄</button>

.js的data里添加

bgcolor: "#000000",

然后添加两个按钮绑定事件，放在page里面，与data，onload等同级

 redTap: function(){
    this.setData({
      bgcolor: "#f80a0a"
    })
  },
  yellowTap: function(){
    this.setData({
      bgcolor: "#fdf909"
    })
  },

效果：

响应的布尔操作

如果是只有两个值布尔操作，Swiper组件的是否轮播、video组件的是否静音播放等，点击一下就互相切换，这个我们可以使用否操作来进行，比如video的是否显示播放按钮
.wxml

<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{controls}}" event-model="bubble"></video>
<button style="background-color:green;width=30px;hight='auto' "bindtap="changeControls">是否显示播放按钮</button>

.js的data

controls: true,

添加changeControls按钮事件

changeControls: function(){
    this.setData({
      controls: !this.data.controls
    })
  },

效果：

响应的数组操作

直接上代码了
.wxml,注意，这次用的是text组件，不是view组件，虽然个人感觉两个组件没啥区别，但今天发现view组件不能识别换行符，使用text才可以识别

<text>{{text}}</text>
<button bindtap="addline">增加一行</button>
<button bindtap="removeline">删除最后一行</button>

.js的Page前面添加js语法

let initData = "学习小程序开发"
let extraline = []

在Page的data里面添加数据

text: initData,

在Page里面添加按钮响应事件

 addline: function(e){
    extraline.push('今天你学习小程序开发了吗')
    this.setData({
      text: initData + '\n' + extraline.join('\n')
    })
  },
  removeline: function(e){
    if(extraline.length > 0){
      extraline.pop()
      this.setData({
        text: initData + '\n' + extraline.join('\n')
      })
    }
  },

还记得数组的join操作吗
它是将数组的值使用指定的分割符拼接成一个字符串
默认是逗号分割符

效果：

事件对象

官方文档：事件对象
这个敲长敲长，这个就不写了，文档写得比较清楚，大家简单看一下文档吧，了解一下是个怎么回事先。

本文地址：https://blog.csdn.net/weixin_45079619/article/details/107528952