微信小程序复习巩固 —— （事件处理，数据渲染，使用模板，属性自定义）
微信小程序复习巩固 —— （事件处理，数据渲染，使用模板，属性自定义）
微信小程序巩固 ——事件处理，数据渲染，使用模板，属性自定义
一、小程序的事件机制
在小程序当中处理用户的逻辑交互大概有如下步骤
- 产生事件
- 捕捉事件
- 使用回到函数处理事件的结果
1.1 小程序提供的事件
1.2 绑定事件
小程序事件的绑定是通过 bind 关键字实现的，我们直接在指定的组件上绑定上述的事件即可
- 在指定的标签绑定数据
- 然后指明回调函数
- 在回调函数汇中编写相对应的代码，用来处理用户的点击事件
eg: wxml
<view bindtap="onTap"> 点击我 view>
<view bind:tap="onTap"> 点击我 view>两种绑定方式没有任何区别
js
Page({
data: {
},
function (options) {
},
// 这里编写你的回调函数，我这里实现了一个简单的页面跳转功能
onTap: function() {
console.log("你点击了 tap");
wx.navigateTo({
url: '/pages/posts/posts',
success : function() {
console.log("跳转成功");
},
error: function() {
console.log("服务器出现错误");
}
})
}
})补充： 两种页面跳转的方式的区别
- wx.navigateTo
- wx.redirectTo
区别一：两种页面跳转的方式的区别就是左上角是否能够返回到上一页
区别二：
- 会执行 onHide 事件
- 会执行 Unload 事件
二、小程序中 catch 和 bind
catch 和 bind 的区别在于 事件冒泡的区别
在事件的捕捉中可以使用 bind 以及 catch，下面以简单的实例给大家展示一下事件冒泡
2.1 事件冒泡展示
wxml
<view class="outter" bindtap="onTap">
<view class="inner" bindtap="onTap1">我是内部view>
view>js
Page({
onLoad: function (options) {
},
onTap: function() {
console.log("outter 被点击了");
},
onTap1:function() {
console.log("inner 被点击了");
}
})效果图：
当我点击内圈的时候，两个绑定事件都会被触发，这个时候就发生了冒泡事件
2.2 冒泡事件的阻止
为了避免出现这样的情况，就出现了 catch ，来解决出现事件冒泡的问题，这里我把两个 bind 改成 catch，然后再分别点击内圈和外圈，这样就避免出现了事件冒泡的问题
三、js 数据的外部引用
在真实的开发环境当中，小程序的数据是来自服务端的，如果我们把所有的数据都写在一个 js 文件当中，显然是不太可能的，这里采用模拟服务端的数据，渲染到前端
3.1 在小程序的目录中创建一个 data 目录，用来模拟服务端传过来的数据
然后采用数组对象的形式，把数据全部集中起来
- 该文件命名为 data.js 文件
- 然后编写文件内容
- 使用 module.export 导出数据
- 在 数据传递的 js 文件中，引入该文件
3.2 案例实现
data.js
var test = [
{
title:"xxx",
description:"xxx",
pub_date: "xxx",
content: "xxx"
},
{
title:"xxx",
description:"xxx",
pub_date: "xxx",
content: "xxx"
},{
title:"xxx",
description:"xxx",
pub_date: "xxx",
content: "xxx"
}
// 重点来了，这里要把文件导出去给其他的 js 脚本使用
module.exports = {
test: test
}- 回到信息展示的 js 文件中，然后引入 上一步 导出的 js‘ 文件
// 导入数据
var test= require("../../data/test.js")
Page({
data: {
},
onLoad: function(options) {
// 页面加载时，从服务器取数据，这里模拟取数据,使用数据模拟的方式传数据
// 传数据
this.setData({
// 这里根据代码的实际情况进行适当的改变即可
test: test
});
},
})四、使用 templete 模板
template 支持 wxml 和 wxss 复用，而不能支持 js 和 json
4.1 大致步骤
- 先创建一个名为 template 的目录
- 然后根据样式创建不同的目录来保存成为不同的样式
- 然后添加与之对应的 wxml 和 wxss 文件
- 然后把我们需要复用的代码块复制进 wxml 以及相对的样式 wxss，外面用 template 包裹，其属性设置为 name=“xxx”
- 然后在外面把准备复用的代码块删除，改成 template 即可，其属性 is 设置为上一步中 name 的值，如果数据是动态绑定的，加一个 data属性，传入即可
4.2 template 实战练习使用
比如我要复用这样的代码块
把这部分的代码块单独放进一个 template 目录下的 wxml 文件中，name 设置为 postItem ，样式我就不复制了
<template name="postItem">
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="{{item.author_img}}">image>
<text class="post-date">{{item.date}}text>
view>
<text class="post-title">{{item.title}}text>
<image class="post-image" src="{{item.post_img}}">image>
<text class="post-content">
{{item.content}}
text>
<view class="post-like">
<image class="post-like-image" src="../../images/icon/chat.png">image>
<text class="post-like-image">{{item.view_num}}text>
<image class="post-like-image" src="../../images/icon/view.png">image>
<text class="post-like-image">{{item.collect_num}}text>
view>
view>
template>然后回到需要复用的地方
- 先引入 template 中的 wxml 文件，使用
.，这个路径可以是 绝对路径，可以是相对路径，但是建议使用 相对路径 - 然后使用 template 标签就可以展示出内容
<block wx:for="{{post_content}}" wx:key="{{this}}">
<template is="postItem" data="{{item}}" />
block>- 还有一点需要注意，当我们把样式复制到 模板的 wxss 文件中，我们也需要在 wxss 中引用它， 方式
@import "模板样式路径"
需要特别注意的一点，路径最容易错误的，这里一定要小心
模板中不能使用 js 文件，因此业务职能写在引用文件的 js 中
template 的引用记住使用绝对路径
五、自定义属性的使用
假定我们要实现如下业务，我们在一个 for 循环实现的新闻列表要做到点击哪一个新闻就会具体显示该新闻描述，在这种情况，我们就需要通过每条新闻的下标显示指定数据
5.1 如何编写自定义属性
在view 标签中就可以使用，data-xxx 指定相对应的属性，然后使用 插值表达式绑定一个唯一的 id
<view catch:tap="onPostTap" data-post_id="{{item.post_id}}">
<template is="postItem" data="{{item}}" />
view>5.2 获取自定义属性中的值
我们使用的是 bindtap 的点击事件，所以他会传一个值 event，通过 event.currentTarget.dataset.post_id 就可以获取到值了
腾讯云开发者
