微信小程序——电子书橱

微信小程序——电子书橱

---

前言

在初步了解wx.setStorageSync(KEY，DATA)，wx.getStorageSync(KEY)的用法后，然后我尝试写下该小程序进一步展开应用。

一、准备工作

二、实验结果

结果如下（示例）：

三、实验代码

js部分：

Page({
     
  data:{
     
    path:'',
    id:'',
    tempFilePath:'',
    bookList:[
      {
     
        id:'01',
        title:'Java编程思想',
        poster:'../image/tp1.png',
        fileUrl:'http://localhost/books/book01.pdf'
      },
      {
     
          id:'02',
          title:'web前端框架技术',
          poster:'../image/tp2.png',
          fileUrl:'http://localhost/books/book02.pdf'
        },
        {
     
          id:'03',
          title:'微信小程序开发',
          poster:'../image/tp3.png',
          fileUrl:'http://localhost/books/book03.pdf'
        },
        {
     
          id:'04',
          title:'Node.js开发',
          poster:'../image/tp4.png',
          fileUrl:'http://localhost/books/book04.pdf'
        }
    ]//bookList数组存放数据
  },
  //封装函数(showTips,openBook,saveBook),方便调用
  showTips: function(content) {
     
    wx.showModal({
     
      title: '提醒',
      content: content,
      showCancel: false
    })
  },
  //打开图书
  openBook: function() {
     
    let path=this.data.path
    wx.openDocument({
     
      filePath: path,
      fileType:'pdf',
      success: function(res) {
     
        console.log('打开图书成功')
      },
      fail: function(error) {
     
        console.log(error);
      }
    })
  },
  //下载图书
  saveBook: function(path) {
     
    var that=this
    wx.downloadFile({
     
      url: path,
      success:function(res){
     
        if(res.statusCode===200){
     
          console.log(res)
          that.setData({
     
            path:res.tempFilePath
          })
        }
      }
    })
  },
  readBook: function(e) {
     
    var that = this
    //获取当前点击的图书id
    let id = e.currentTarget.dataset.id
    console.log('当前的id值：'+id)
    //获取当前点击的图书url地址
    let fileUrl = e.currentTarget.dataset.file
    console.log('当前的fileUrl值：'+fileUrl)
    //查看本地缓存
    let path = wx.getStorageSync(id)
    //未曾下载过
    if (path ==''){
     
      that.showTips('该书未下载！点击开始下载')
      //异步存储
      wx.setStorageSync(id,fileUrl)     
    }
    //之前下载过的，直接打开
    else {
     
      //打开图书
      wx.navigateTo({
     
        url: '../index1/index1',
      })
      console.log('当前path的值是：'+path)
      that.saveBook(path)
      that.openBook()
    }
  }
})

wxml部分：

<view class="demo-box">
  <view class='box' wx:for='{
     {bookList}}' wx:key='book{
     {index}}' data-file='{
     {item.fileUrl}}' data-id='{
     {item.id}}' bindtap='readBook'>
      <image src="{
     {item.poster}}"></image>
      <text>{
     {
     item.title}}</text>
    </view>
</view>

总结

Tips:用户在书籍未下载之前，点击书籍，弹出下载提示；初始控制台和Storage也没有存储相应数据，再次点击会进入下载页面，这时就会通过wx.setStorageSync() 会在Storage存储数据；手动返回上一页面后，再次双击，可以看到控制台path已经通过getStorageSync得到文件路径值了，相应的也可以打开网页查看里面内容！（代码功能可能并不是很完善，读者可以将其看做发布者的一个小程序案例测试，感谢阅读！）