第六章 构建新闻详情页面
组件自定义属性
在wxml中添加自定义属性时,需要添加data-
。
例如:
<block wx:for="{{posts_key}}" wx:key="unique">
<view catchtap="onPostTap" data-postID="{{item.postId}}">
<template is = "postItem" data="{{...item}}" />
</view>
</block>
这里data-postID
就是一个自定义属性。
在.js
文件中如果要调用这个自定义属性,注意把之前的大小写改为驼峰命名法。
例如,data-postID-name
,如果在.js
文件中被调用,那么名字为postidName
。
猜测的运行逻辑:
以上面的例子来说,加载页面时,给每一个<view>
组件注册响应函数,并给每一个<view>组件
一个自定义属性,postid
。这样在点击它时,运行相应的.js
中的JavaScript脚本,实现相应功能。
对上面的例子,在JavaScript文件中,使用小程序内置的event作为参数:
onPostTap:function(event){
var postID = event.currentTarget.dataset.postid;
// console.log("onPostTap");
// console.log("onpostid"+postID)
wx.navigateTo({
url: 'post-detail/post-detail',
})
},
event.currentTarget.dataset.postid;
通过这段代码,获得刚才创建的自定义属性。
构建新的页面
在构建新的页面时,遵守先静态后动态的规则。首先编写.wxml
和.wxss
文件,构建页面框架。
使用数据填充页面
传递postID
类似URL的快热参数,在?
后面加id
参数,把postID传递给id
。例如:
wx.navigateTo({
url: 'post-detail/post-detail?id=' + postID,})
实现点击不同文章跳转到不同页面的功能。
传递postsData
posts-data.js
存储于data目录下,是一个.js
文件,用来模拟数据库的数据。并通过下面这句代码进行传递:
module.exports = {
postList: local_database
}
通过require
函数,来获取来自posts-data中的数据。例如:
var postsData = require('../../data/posts-data.js')
需要注意的是,这时获取的postsData是一个对象。要访问posts-data.js
中的数据,从上面传递时的代码可以看出,需要访问postsData
下的postList
数组,即:
var postData = postsData.postList[postId];
之后,使用this.setData(postData);
进行数据绑定。这里,绑定的postData
中的属性在传递后不再存储于对象postData
,而是以一个个属性的方式存储。例如:
可以看到,不再含有postData
对象。
使用缓存实现文章的收藏功能
缓存storage的基本使用方法
wx.setStorageSync(key, data)//同步方法
wx.setStorage({//异步方法
key: '',
data: '',
})
如果用户不主动清除缓存,那么小程序不会自动清除缓存。
单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
名称 | 功能说明 |
---|---|
wx.setStorageSync | wx.setStorage 的同步版本 |
wx.setStorage | 将数据存储在本地缓存中指定的 key 中 |
wx.removeStorageSync | wx.removeStorage 的同步版本 |
wx.removeStorage | 从本地缓存中移除指定 key |
wx.getStorageSync | wx.getStorage 的同步版本 |
wx.getStorage | 从本地缓存中异步获取指定 key 的内容 |
wx.clearStorageSync | wx.clearStorage 的同步版本 |
wx.clearStorage | 清理本地数据缓存 |
wx:if
在框架中,使用 wx:if=""
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif
和 wx:else
来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
注意:<view wx:else> 3 </view>
与<view wx:if="{{length > 5}}"> 1 </view>
相当于两条语句,如果要使用相同的catchtap
,那么需要在两者中都添加。
block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
交互反馈
wx.showToast(Object object)
显示消息提示框
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
title | string | 是 | 提示的内容 | ||
icon | string | ‘success’ | 否 | 图标 | |
image | string | 否 | 自定义图标的本地路径,image 的优先级高于 icon | 1.1.0 | |
duration | number | 1500 | 否 | 提示的延迟时间 | |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 | |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.icon 的合法值
success | 显示成功图标,此时 title 文本最多显示 7 个汉字长度 | |
---|---|---|
loading | 显示加载图标,此时 title 文本最多显示 7 个汉字长度 | |
none | 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持 |
操作反馈
this
指针的指代
在Page({})
和它包含的响应函数中,this
指向的是Page({})
页面。而如果this
包含在其他的函数中,例如:
showModal:function(postsCollected,postCollected){
wx.showModal({
title: '收藏',
success:function(res){
if(res.confirm){
//更新文章是否收藏的缓存值
wx.setStorageSync('posts_collected', postsCollected);
//更新数据绑定,实现更新图片
this.setData({
collected: postCollected
});
}
}
})
}
此时,这里的this
指代的作用域已经改变,不再指向Page({})
页面。
异步同步方法调用的区别
都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
wx.showActionSheet
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
itemList | Array. | 是 | 按钮的文字数组,数组长度最大为 6 | |
itemColor | string | #000000 | 否 | 按钮的文字颜色 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
tapIndex | number | 用户点击的按钮序号,从上到下的顺序,从0开始 |