微信小程序——电子书橱

前言

在初步了解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.pathwx.openDocument({filePath: path,fileType:'pdf',success: function(res) {console.log('打开图书成功')},fail: function(error) {console.log(error);}})},//下载图书saveBook: function(path) {var that=thiswx.downloadFile({url: path,success:function(res){if(res.statusCode===200){console.log(res)that.setData({path:res.tempFilePath})}}})},readBook: function(e) {var that = this//获取当前点击的图书idlet id = e.currentTarget.dataset.idconsole.log('当前的id值：'+id)//获取当前点击的图书url地址let fileUrl = e.currentTarget.dataset.fileconsole.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得到文件路径值了，相应的也可以打开网页查看里面内容！（代码功能可能并不是很完善，读者可以将其看做发布者的一个小程序案例测试，感谢阅读！）

微信小程序——电子书橱相关推荐

基于微信小程序电子产品商城系统（springboot+ mybatis-plus+mysql+原生微信小程序）
一.系统介绍近年来,随着微信在我国互联网中的广泛使用,基于微信的小程序应用也如雨后春笋,2020年全网小程序已超600万,其中,微信小程序数量超380万.本论文所研究的正是基于微信小程序的电子商城的 ...
uniapp - 实现微信小程序电子签名板，横屏手写姓名签名专用写字画板（详细运行示例，一键复制开箱即用）
效果图实现了在uniapp项目中,微信小程序平台流畅的写字签名板(也可以绘图)功能源码,复制粘贴,改改样式几分钟即可搞定! 支持自动横屏.持预览,真机运行测试非常流畅不卡顿. 基础模板如下代码所示 ...
微信小程序电子合同、电子签名 canvasToTempFilePath: fail canvas is empty
我要实现的是:电子文档 +电子签名 = 电子合约,也就是两张图合成一张图. 我的实现思路是这样的, 1.页面初始show:true,显示两张图片: 2.合成合约成功后,that.setData({sh ...
微信小程序电子优惠券领取，淘宝客，微信小程序商城
效果如图所示代码地址: https://github.com/herry-zhang/E-Coupon
微信小程序之电子商场的设计以及实现
随着移动互联网迅速发展,手机上安装的移动应用越来越多,导致长尾现象严重,浪费了大量的资源.近年来,各大应用提供商相继提出各自的轻型应用解决方案,但都没有成功,微信小程序的出现给业界带来了新的震动.文章 ...
电子木鱼微信小程序源码今天你积功德了吗？
电子木鱼已经是火了很久的小程序了,今天闲来无事自己搞着玩玩.大家没事可以部署一个放松一下心情.纯属娱乐.大家可以点击看看我部署的项目. 1.首先新建一个微信小程序,这个我就不在演示了. 2.htm ...
【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...
基于Springboot+Vue2前后端分离框架的智慧校园系统源码,智慧学校源码+微信小程序+人脸电子班牌
▶ 智慧校园开发环境: 1.使用springboot框架Java+vue2 2.数据库MySQL5.7 3.移动端小程序使用小程序原生语音开发 4.电子班牌固件安卓7.1:使用Java Android ...
微信小程序项目-电子木鱼
好久之前就看到过电子木鱼这类微信小程序,当时认为这东西热度很快就没了.所以,就没把这项目当作一回事.后来,发现经小红书炒作后,电子木鱼变得越来越红.因此,就有了这个项目. 界面介绍核心代码 // i ...

微信小程序——电子书橱

微信小程序——电子书橱

前言

一、准备工作

二、实验结果

三、实验代码

总结

微信小程序——电子书橱相关推荐

最新文章

热门文章