电子书架-小程序文件API

顺其自然lll

已于 2022-03-24 13:33:26 修改

阅读量1.6k

点赞数 1

分类专栏：微信小程序开发文章标签：学习微信小程序

于 2022-03-23 11:49:32 首次发布

本文链接：https://blog.youkuaiyun.com/m0_46965984/article/details/123637044

版权

本文介绍如何在微信小程序中实现电子书下载、保存及阅读功能。首先搭建本地模拟服务器，允许不校验域名，然后创建项目并设计图书展示容器。用户点击图书时，未下载的会进行下载，已下载的则直接打开。通过封装提示消息和打开图书的函数，简化代码复用。最后提供完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

在上一篇文章中搭建的模拟服务器phpStudy中的文件地址中的www文件

在www文件中再创建一个books文件用于存放电子书

创建完电子书文件之后就可以在浏览器上输入http://localhost/books/book001.pdf

就可以查看电子书了

在本次小程序项目需要使用模拟服务器,那么我们要先创建一个项目，然后在项目页右上方的”详情“->"本地设置" 中找到”不校验合法域名，web-view(业务域名)，TLS版本以及HTTPS证书“

并勾选上

这样才能成功的使用本地模拟服务器中书籍的路径地址

在正式上线的时候，我们所有的图书，资源地址有相应的规定要求，而图书是pdf格式的，它的上传和下载是HTTPS格式

进行微信小程序项目创建

创建文件夹bookDemo

app,json

{
  "pages":[
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#663366",
    "navigationBarTitleText": "我的书架"
  }
}

用户第一次点击书时需要从服务器下载对应的文件，此时将隐藏图书展示容器内容并显示下载蒙层。

进度条<progress>组件

图书展示容器设计：

index.wxss

/**index.wxss**/
/* 图书展示容器 */
.book-container{
  display: flex;
  flex-direction: row;  /*水平排列*/
  flex-wrap: wrap;      /*允许换行*/
}

/* 图书单元区域样式 */
.box{
  width:50%;
  height: 400rpx;
  display: flex;
  flex-direction: column; /*垂直排列*/
  align-items: center;   /*水平方向居中*/
  justify-content: space-around;/*分散布局*/
}
/* 图书封面图片样式 */
image{
  width: 200rpx;
  height: 300rpx;
}
/* 图书标题文本样式 */
text{
  text-align: center;
}
/* 下载时蒙层容器 */
.loading-container{
  height: 100vh;
  background-color: silver;
  display: flex;   /* fle

最低0.47元/天解锁文章