在初步了解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得到文件路径值了,相应的也可以打开网页查看里面内容!(代码功能可能并不是很完善,读者可以将其看做发布者的一个小程序案例测试,感谢阅读!)
一、正则表达式概述 二、正则表达式在VBScript中的应用 三、正则表达式在VavaScr...
歌词编辑器 歌词编辑器 第一步:选择要播放的歌曲并播放 第二步:填写全部的歌词...
ADO对象: Connection Command Recordset Record Stream ASP支持的对象很多,可...
微信文件传输助手是微信电脑版与手机微信之间相互传输图片等文件的好工具,但很...
前言 相信大家都知道在IDE中代码的智能提示几乎都是标配,虽然一些文本编辑器也...
【排序算法】之lowb三人组冒泡、插入、选择 什么是lowb三人组 冒泡排序bubble so...
一石激起千层浪,继中国区浩浩荡荡的大裁员告一段落之后,甲骨文并未因此收起手...
本文将研究 ES6 的 for ... of 循环。 旧方法 在过去,有两种方法可以遍历 javas...
vbs:把一段文字中指定字符颜色变成红色的正则 functionc(Tstr,Word) Dimre Setre...
计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持...