dev中循环展示图片的样式怎么写_小程序api开发03：可用于pdf图书展示、下载和阅读的电子书橱（第一版）...

最新推荐文章于 2022-12-03 16:42:26 发布

weixin_39716417

最新推荐文章于 2022-12-03 16:42:26 发布

阅读量241

点赞数 2

文章标签： dev中循环展示图片的样式怎么写

本文链接：https://blog.csdn.net/weixin_39716417/article/details/111580997

版权

本文介绍了如何使用小程序开发一个电子书橱，展示并下载PDF图书。通过wx:for循环生成图书展示，利用wx.openDocument和wx.setStorageSync实现下载和阅读功能。此外，还详细讲解了导航栏设计、图书单元区域、下载蒙层的实现方法以及逻辑实现，包括显示图书列表、下载并打开图书的流程。

摘要由CSDN通过智能技术生成

从零基础开发小程序系列，这个是第三课，前两节课翻看过去的内容，标题中以01，02这样的标识来区分。今天用小程序做一个电子书架。可以展示并下载阅读图书。

一，项目需求说明

1.做一个电子书橱，如下图所示，可以陈列展示pdf图书，

2.点击想要观看的图书，然后就会下载对应的图书并打开图书，下载过程的界面是一个蒙层效果，并显示下载进度条，如下图：

如果下载失败则提示下载失败，如果下载成功，就直接打开pdf图书，

二，实现思路分析，

1.页面设计：通过页面分析可以发现，6本书是循环出现，所以，可以先做出一本书，然后用wx:for 循环出来其他的图书。

2.下载图书过程的蒙层效果，使用wx:if判断是否在下载图书，

3.下载并打开图书，用到两个小程序api wx.openDocument 和wx.setStorageSync

三、项目创建并配置，

用小程序开发工具，创建一个项目，本案例名称是bookSheif,名称自定义，然后开发工具会自动生成框架代码。这一部分同上一节课的相同，建立项目并删除用不到的文件和文件夹，具体可以参考上次的课件第二部分“项目创建”章节：

undefined：小程序开发02：手动创造一个小程序实例,open-type获取头像昵称zhuanlan.zhihu.com

（1）先找到配置文件app.json，删除pages/logs/logs，

（2）删除文件夹："utils"和"page/log"文件夹及其所有内容文件都要删除。

（3）删除index.wxml、index.wxss和app.wxss中的全部代码，

（4）删除index.js中的全部代码，然后，输入“page",找到第二个page选项,按回车让开发工具自动补全函数，

(5)删除app.js中的全部代码，输入关键词”app“，依然是选中第二次出现的app，自动补全代码，

不再重述项目创建，接下来直接进入正式开发部分：

本次开发用到的知识点：
image组件相关知识点： https:// club.cloudbase.net/hand book/tcb03.html
官方开发文章： https:// developers.weixin.qq.com /miniprogram/dev/component/
小程序api文档： https:// developers.weixin.qq.com /miniprogram/dev/api/storage/wx.setStorageSync.html

四、页面设计

1.导航栏设计，在app.json中自定义导航栏的标题和背景颜色，相关的开发文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html。本次配置成黄色，代码如下：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FFA500",
    "navigationBarTitleText": "电子书橱"
  },
  "sitemapLocation": "sitemap.json"
}

2.图书一个单元区域的设计。我们用先死后活的思路，先写一个静态的页面，然后，在用js给数据赋值并完成循环，先写一个如下的页面，：

用到的组件有<view>,<text>,<image>,。我们先用一个<view>组件实现一个可扩展的九宫格效果，每个格子单元包含一个封面和标题，后面就可以用就可以用wx:for循环添加全部内容了。index.wxml(pagesindexindex.wxml)代码片段如下：

<!-- 图书展示容器 -->
<view class='book-container' >
  <!-- 图书单元区域 -->
  <view class='box' >
    <!-- 图书封面 -->
    <image src='https://img1.doubanio.com/view/subject/l/public/s33543739.jpg'></image>
    <!-- 图书标题文本 -->
    <text>印光法师文钞</text>
  </view>
</view>

然后定义一样样式，在index.wxss（pagesindexindex.wxss）中的css代码如下：

/*图书展示容器样式*/
.book-container {
  display: flex; /*flex模型布局*/
  flex-direction: row; /*水平排列*/
  flex-wrap: wrap; /*允许换行*/
}

/* 图书单元区域样式 */
.box {
  width: 50%; /*宽度*/
  height: 400rpx; /*高度*/
  display: flex; /*flex模型布局*/
  flex-direction: column; /*垂直排列*/
  align-items: center; /*水平方向居中*/
  justify-content: space-around; /*分散布局*/
}

/*图书封面图片样式*/
image {
  width: 200rpx; /*宽度*/
  height: 300rpx; /*高度*/
}

/*图书标题文本样式*/
text {
  text-align: center; /*文本居中显示*/
}

3，图书下载蒙层设计

当我们点击图书，然后，整个页面都会显示下载进度，所以，下载蒙层页面和图书展示页面不能同时出现，下载蒙层如图效果：

这个时候，我们需要用一个判断语句wx:if,来判断是否在下载，在index.wxml中添加代码如下：

<!-- 下载时的蒙层 -->
<view class='loading-container' wx:if='{{isDownloading}}'>
  <text>下载中，请稍后</text>
  <progress percent="{{percentNum}}" stroke-width="6" activeColor="#663366" backgroundColor="#ffffff" show-info active active-mode="forwards"></progress>
</view>

<!-- 图书展示容器 -->
<view class='book-container' wx:else >
<!--以下内容略，注意上面有个闭环 wx:else-->

进度条progress组件的具体用法看文档： https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

在index.wxss中定义下载蒙层的样式：

/*下载时蒙层容器样式*/
.loading-container {
  height: 100vh; /*高度*/
  background-color: silver;/*背景颜色*/
  display: flex; /*flex模型布局*/
  flex-direction: column; /*水平排列*/
  align-items: center; /*水平方向居中*/
  justify-content: space-around; /*分散布局*/
}

/* 进度条样式 */
progress{
  width: 80%;/*宽度*/
}

在index.js（pagesindexindex.js）中对下载蒙层和进度条设置初始值：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isDownloading:false,
    percentNum: 0
}
})

任务：设置isDownloading为true，看看什么效果？给 percentNum设置一个0-100之间的任意值，看看进度条有啥变化？

五，逻辑实现

1、显示全部图书功能实现。上面我们只是做了一个静态的图书最小单元，我们要让数据“活”起来，在图书单元区域。添加wx:for属性，循环展示所有图书列表。找到 <view class='box' >片段，对index.wxml代码修改如下：

<!-- 图书展示容器 -->
<view class='book-container' wx:else>
  <!-- 图书单元区域 -->
  <view class='box' wx:for='{{bookList}}' wx:key='book{{index}}'>
    <!-- 图书封面 -->
    <image src='{{item.imgurl}}'></image>
    <!-- 图书标题文本 -->
    <text>{{item.title}}</text>
  </view>

在index.js中追加booklist数组，用于存放图书信息，

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isDownloading:false,
    percentNum: 0,
    bookList: [
      {
        id: '001',
        title: '印光文钞',
        imgurl: 'https://img1.doubanio.com/view/subject/l/public/s33543739.jpg',
        fileUrl: 'http://localhost/books/book004.pdf'
      }, 
      
      {
        id: '002',
        title: '苏州灵岩山志',
        imgurl: 'http://book.honghuashe.com/uploadfiles/image/1567490944355.jpg',
        fileUrl: 'http://book.honghuashe.com/uploadfiles/file/15674931568912.pdf'
      },
      {
        id: '003',
        title: '中外格言汇海',
        imgurl: 'http://book.honghuashe.com///uploadfiles/ueditor/image/20181227/1545897495180239.jpg',
        fileUrl: 'http://book.honghuashe.com/uploadfiles/file/15458974345322.pdf'
      },
      {
        id: '004',
        title: '保富法（白话增订本）',
        imgurl: 'http://book.honghuashe.com/uploadfiles/image/15458908313694.jpg',
        fileUrl: 'http://book.honghuashe.com/uploadfiles/file/15458909849564.pdf'
      },
    
      {
        id: '005',
        title: '故宫博物院',
        imgurl: 'https://img3.doubanio.com/view/subject/l/public/s3078482.jpg',
        fileUrl: 'https://www.dpm.org.cn/Uploads/pdf/6179/T00020_00.pdf'
      },
      {
        id: '006',
        title: '人类简史',
        imgurl: 'https://img3.doubanio.com/view/subject/l/public/s27814883.jpg',
        fileUrl: 'http://localhost/books/book006.pdf'
      }
    ]
  },

})

注意，上面图片地址imaurl和fileUrl都是来自网络和本地服务器，可以替换成自己的数据。到此为止，页面的全部展示部分已经完成，下面要写下载并阅读图书部分的逻辑

2、下载并打开图书，

2.1 、准备工作：封装一个消息框和打开指定图书函数等，首先我们封装提示信息。

因为我们会多次用到提示消息框，所以，我们在index.js里先封装一个提示框，在index.js中顶一个一个函数showTips

/**
   * 封装showModal方法
   */
  showTips: function(content) {
    wx.showModal({
      title: '提醒',
      content: content,
      showCancel: false
    })
  },

可在onLoad函数中输入 this.showTips('你好')，调用测试一下我们自己封装好的showTips，代码如下：

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    this.showTips('你好')

  },

输入以上代码片段，看看测试效果，然后恢复原来的代码

2.2，打开指定图书

点击一本图书，如已经下载过，直接打开，否则，进行下载、保存、然后再打开，我们封装一个打开图书openBook函数

/**
   * 打开图书
   */
  openBook: function(path) {
    wx.openDocument({
      filePath: path,
      success: function(res) {
        console.log('打开图书成功')
      },
      fail: function(error) {
        console.log(error);
      }
    })
  },

这样，在其他函数中只要调用this.openBook('对应的图书地址')，就可以打开图书了。 wx.openDocument是一个api函数，具体用法查看文档：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

2.3、保存下载的图书

/**
   * 保存图书
   */
  saveBook: function(id, path) {
    var that = this
    wx.saveFile({
      tempFilePath: path,
      success: function(res) {
        // 将文件地址存到本地缓存中，下次直接打开
        let newPath = res.savedFilePath
        wx.setStorageSync(id, newPath)
        //打开图书
        that.openBook(newPath)
      },
      fail: function(error) {
        console.log(error)
        that.showTips('文件保存失败！')
      }
    })
  },

wx.setStorageSync数据缓存文档： https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

2.4 ，阅读图书功能

/**
   * 阅读图书
   */
  readBook: function(e) {
    var that = this
    //获取当前点击的图书id
    let id = e.currentTarget.dataset.id
    //获取当前点击的图书url地址
    let fileUrl = e.currentTarget.dataset.file
    //查看本地缓存
    let path = wx.getStorageSync(id)
    //未曾下载过
    if (path == '') {
      //切换到下载时的蒙层
      that.setData({
        isDownloading: true
      })
      //先下载图书
      const downloadTask = wx.downloadFile({
        url: fileUrl,
        success: function(res) {
          //关闭下载时的蒙层
          that.setData({
            isDownloading: false
          })
          //下载成功
          if (res.statusCode == 200) {
            //获取地址
            path = res.tempFilePath
            //保存并打开图书
            that.saveBook(id, path)
          }
          //连上了服务器，下载失败
          else {
            that.showTips('暂时无法下载！')
          }

        },
        //请求失败
        fail: function(e) {
          //关闭下载时的蒙层
          that.setData({
            isDownloading: false
          })
          that.showTips('无法连接到服务器！')
        }
      })

      // 监听当前文件下载进度
      downloadTask.onProgressUpdate(function(res) {
        let progress = res.progress;
        that.setData({
          percentNum: progress
        })
      })
    }
    //之前下载过的，直接打开
    else {
      //打开图书
      that.openBook(path)
    }
  },

wx.DownloadTask 和监听下载进度的相关文档：https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

前半部分写的比较详细，后半部分如果觉得写的太简单，理解困难，可以留言提问，我会根据留言适度的补充说明解释相关细节。

下一章节，打算写《利用小程序云开发和云函数开发改造电子书架》，欢迎关注

待更新。。。

weixin_39716417

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
dev中循环展示图片的样式怎么写_小程序api开发03：可用于pdf图书展示、下载和阅读的电子书橱（第一版）...

从零基础开发小程序系列，这个是第三课，前两节课翻看过去的内容，标题中以01，02这样的标识来区分。今天用小程序做一个电子书架。可以展示并下载阅读图书。一，项目需求说明1.做一个电子书橱，如下图所示，可以陈列展示pdf图书，2.点击想要观看的图书，然后就会下载对应的图书并打开图书，下载过程的界面是一个蒙层效果，并显示下载进度条，如下图：如果下载失败则提示下载失败，如果下载成功，就直接打开pdf图书，...
复制链接

扫一扫