第六、七章构建文章详情页面与.缓存机制与异步API的async和await

1.构建文章详情页面

1.先构建文章骨架

<view class="container">
<image src></image>

<view>
  <image></image>
  <text></text>
  <text>发表于</text>
  <text></text>
</view>

<view>
  <text></text>
</view>
<view>
  <image></image>
  <image></image>
</view>
<text></text>
</view>

2.填写内容

<view class="container">
<image src="/images/2.jpg"></image>

<view>
  <image src="/images/my/8.jpg"></image>
  <text>九月</text>
  <text>发表于</text>
  <text>12小时前</text>
</view>

<view>
  <text>哈利波特</text>
</view>
<view>
  <image src="/images/icon/share.png"></image>
  <image src="/images/icon/collection.png"></image>
</view>
<text>常规赛事结束之后</text>
</view>

3.样式

.container{
  display: flex;
  flex-direction: column;
}
.head-image{
  width: 100%;
  height: 460rpx;
}
.author-date{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
  margin-left: 30rpx;
}
.avatar{
  width: 64rpx;
  height: 64rpx;
}
.avatar{
  width: 64rpx;
  height: 64rpx;
}
.author{
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}

.const-text{
  font-size: 24rpx;
  margin-left: 30rpx;
  color: #999;
}
.date{
  font-size: 24rpx;
  margin-left: 30rpx;
  color: #999;
}
.title{
  margin-left: 40rpx;
  font-size: 36rpx;
  font-weight: 700;
  margin-top: 30rpx;
  letter-spacing: 2px;
  color: #4b556c;
}
.tool{
  display: flex;
  /* 方向是哪个方向 哪个就是主轴 */
  flex-direction: column;
  /* 设置子元素在交叉轴上面的分布 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;

}
.cricle{
  display: flex;
  /* 相当于给容器设设置一个宽度 它才能向右靠 */
  width: 660rpx;
  flex-direction: row;
  justify-content: flex-end;
}
.horizon{
  width: 660rpx;
  height: 1px;
  background-color: #e5e5e5;
  /* 脱离文档流  */
  position: absolute;
  /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
  z-index: -99;
}
.cricle image{
  width: 90rpx;
  height: 90rpx;
}
.share-img{
  margin-left:30rpx;
}
.detail{
  color: #666;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-right: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
}

4自定义属性 data-

5.在页面的onLoad函数
绑定id

<view data-post-id="{{item.postId}}" bind:tap="onGoToDetail" class="post-container">

post.js:

onGoToDetail(event){
    //事件对象
    //页面与页面间数据通信
    console.log(event)
    const pid=event.currentTarget.dataset.postId
    wx.navigateTo({
      url: '/pages/post-detail/post-detail?pid='+pid
    })

detail.js:拿到了当前文章的id号

onLoad: function (options) {
    console.log(options)

  },

6.加载详情数据并填充页面

//导入
import{postList} from '../../data/data.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    postData:{}

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    const postData=postList[options.pid]
    console.log(postData)
    this.setData({
      postData
    })

  },

<view class="container">
<image class="head-image" src="{{postData. headImgSrc}}"></image>

<view class="author-date">
  <image class="avatar" src="{{postData.avatar}}"></image>
  <text class="{{postData.author}}">九月</text>
  <text class="const-text">发表于</text>
  <text class="date">{{postData.dateTime}}</text>
</view>


  <text class="title">{{postData.title}}</text>

<view class="tool">
  <view class="cricle">
    <image class="" src="/images/icon/collection.png"></image>
  <image class="share-img" src="/images/icon/share.png"></image>
  
  </view>
  <view class="horizon"></view>
</view>

<text class="detail">{{postData.detail}}</text>
</view>

2.缓存机制与异步API的async和await

app.js
1.app.js中保存全局变量

App({
    onLaunch(){
        console.log("小程序启动")
    },
    test:1
});
  

const app=getApp()
console.log(app.test)

2.小程序缓存的增删查改与清除

 wx.setStorageSync('flag', true)
    wx.setStorageSync('flag', false)
    wx.setStorageSync('flag1', 7)
    //清空缓存
    //wx.clearStorageSync()
    //wx.removeStorageSync('flag')
    const flag=wx.getStorageSync('flag1')
    console.log(flag)

3.异步函数的几个方案：回调函数、promise与await

  async onLoad(options) {
   wx.setStorageSync('flag', 1)
   const flag=await wx.getStorage({
    key: 'flag',
   // success(value){
   // console.log(value.data)
 flag.then((value)=>{
      console.log(value)
    })

4.js的动态属性

  onCollect(event){
const postsCollected={}
    postsCollected[this.data._pid]=true
    wx.setStorageSync('posts_collected', postsCollected)
    //动态访问属性
    const obj={
      flag:1
    }
    obj.flag=2
    //obj[attr]=2

  },

5.收藏未收藏的切换

data: {
   // postData:{},
    //表明当前文章是否被收藏  默认值为false
    collected:false,
  //  _pid:null

  },

//onCollect(event){
    //假设当前文章未收藏->收藏
    //哪篇文章被收藏
    //数据结构 多篇文章是否被收藏
    //const postsCollected={}
   // postsCollected[this.data._pid]=true
    this.data.collected=true
    this.setData({
      collected:this.data.collected
    })
   // wx.setStorageSync('posts_collected', postsCollected)
    
  },

6.初始化收藏状态

onLoad: function (options) {
   
    const postData=postList[options.pid]
    this.data._pid=options.pid
    //定义变量  从缓存中取
    const postsCollected=wx.getStorageSync('posts_collected')
    //当前文章的状态
    const collected=postsCollected[this.data._pid]
    console.log(collected)
    console.log(postsCollected)
    this.setData({
      postData,
      collected
    })

7.缓存如何不被覆盖

 data: {
    //做数据绑定 加上_不做数据绑定
    postData:{},
    //表明当前文章是否被收藏  默认值为false
    collected:false,
    _pid:null,
    _postsCollected:{}

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    const postData=postList[options.pid]
    this.data._pid=options.pid
    //定义变量  从缓存中取
    const postsCollected=wx.getStorageSync('posts_collected')
    this.data._postsCollected=postsCollected
    //当前文章的状态
    let collected=postsCollected[this.data._pid]
    if(collected===undefined){
      //如果是undefind 说明文章从来没有被收藏过
      collected=false
    }
    console.log(collected)
   
    this.setData({
      postData,
      collected
    })

  },
  onCollect(event){
    //假设当前文章未收藏->收藏
    //哪篇文章被收藏
    //数据结构 多篇文章是否被收藏
    //读取缓存里的postsCollected
    const postsCollected=this.data._postsCollected
    wx.getStorageSync('key')
    postsCollected[this.data._pid]=!this.data.collected
    //this.data.collected=true
    this.setData({
      collected:!this.data.collected
    })
    wx.setStorageSync('posts_collected', postsCollected)
    
  },

8.showToast接口的应用

wx.showToast({
      title: '收藏成功',
      //停留多长时间
      duration:5000
    })

9.showModal

//轻提示
    //模态对话框
  //  const result=await wx.showModal({
  //     title:'是否收藏文章',
      // success(res){
      //   console.log(res)
      // }
     
    // })
  },

10.showActionSheet

 async onShare(event){
      const result=await wx.showActionSheet({
        itemList:['分享到QQ','分享到微信','分享到']
      
      // itemList:['分享到QQ','分享到微信','分享到'],
      // success(res){
      //   console.log(res)
     // }
    })
    console.log(result)
  },