「小程序学习」_2

第六章 构建新闻详情页面

组件自定义属性

在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开始