简易的基于微信云开发的微信小说阅读器

为了试用微信云开发，参考了书上的小程序，通过自己修改做了一个简单的阅读器。比较简陋

大概功能展示

首页是从云数据库中渲染数据库中存储的书籍信息形成简单的书城 

点击首页对应的书籍后跳转到书籍的详情页，可以查看对应的信息并且设置两个按钮 “开始阅读”和“收藏”

点击开始阅读后 进入加载页面

然后会打开提前放置在云存储中的文件

 

这里并未对阅读作过多修改，主要是打开文件，然后用默认的PDF阅读器来阅读，这是以后可以优化的地方

点击“收藏”后

 如果原本没有收藏，则显示“收藏成功”；如果原本就收藏了，则显示“已收藏”

这里是书架，展示收藏的书籍，把收藏的对应的书籍的集合渲染到页面上来，点击文件的标题也可也打开文件进行阅读，还有“取消收藏”按钮

点击“取消收藏”按钮

会显示取消成功，并删除对应书籍集合中的信息记录 

个人信息页并未设置其他功能，主要是wxml的设计

接下来介绍一下云开发的设置

 

设置两个数据集合，books存放的是所有的书籍信息，collectbooks存放的是已收藏的数据信息，页面的展示就是通过获取这些数据字段来渲染。

 

这边云存储就是提前把书籍文件存入当中，主要调用的是File ID.

直接上代码

代码 

booklist

booklist.js

wx.cloud.init()
const db = wx.cloud.database()
const books = db.collection('collectbooks')
const app=getApp({allowDefault:true})
Page({

  /**
   * 页面的初始数据
   */
  data: {
    collectedBooklist:[],
    isShow:false,
    count:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onShow:function () {
    this.onLoad()
  },
  onLoad: function (options) {
    books.get({
      success:res=>{
        if(res.data.length==0){
          this.showTips("书架中暂无书籍")
        }
        this.setData({
          collectedBooklist:res.data
        })
      }
    })
  },
    /* 封装showModal方法 */
    showTips:function(content){
      wx.showModal({
        title:'提醒',
        content:content,
        showCancel:false
      })
    },
  cancelCollect:function (e) {
    var id=e.currentTarget.dataset.id
    db.collection("collectbooks").doc(id).remove()
    .then(res=>{
      this.showTips("取消收藏成功")
    })
    this.onLoad()
  },
  readBook:function(e){
    console.log(e.currentTarget.dataset.fileid)
    wx.cloud.downloadFile({
      fileID:e.currentTarget.dataset.fileid,
      success:res=>{
        console.log("文件下载成功",res);
      //打开文件
      var Path =res.tempFilePath
      wx.openDocument({
        filePath: Path,
        fileType:'pdf',
        success:function(res){
          console.log("文件打开成功")
        },
        fail:function(res){
          console.log("打开失败")
        }
          })
        }
      })
  },
})

booklist.json 

{} //不能为空，为空会报错

 booklist.wxml

<view class="book-container">
<!-- 图书单元区域设计 -->
  <view class="box" wx:for="{{collectedBooklist}}" wx:key='_id'  >
   <!-- 图书封面 -->
    <text bindtap="readBook" data-fileid="{{item.fileid}}">{{item.title}}</text>
    <button type="default" bindtap="cancelCollect" data-id="{{item._id}}">取消收藏</button>
  </view>
</view>

 booklist.wxss

/*已收藏图书容器*/
.book-container{
  display: flex;
  flex-direction: column;  /*水平排列*/
  flex-wrap: wrap;      /*允许换行*/
}

.box{
  width:100%;
  height: 200rpx;
  display: flex;
  border: 1px solid #000;
  flex-direction: raw; /*垂直排列*/
  align-items: center;   /*水平方向居中*/
  justify-content: space-around;/*分散布局*/
}

text{
  text-align: center;
}

 Index

index.js

// index.js
// 获取应用实例
wx.cloud.init()
const db = wx.cloud.database()
const books = db.collection('books')
const app=getApp({allowDefault:true})
Page({
  /*
   * 页面的初始数据
   */
  data: {
    bookList:[ ]
  },
  getBook:function(id){
    return new Promise((res,rej)=>{
      let db=wx.database();
      let news=db.collection('books');
      news.where({
        id:id
      }).get({
        success:function(data){
          res(data.data);
        }
      })
    })

  },
  // 显示图书详情
  showBookIntro:function(e){
    //获取图书ID编号
    let id=e.currentTarget.dataset.id
    let price=e.currentTarget.dataset.price
    let coverurl=e.currentTarget.dataset.coverurl
    let title=e.currentTarget.dataset.title
    let isbn=e.currentTarget.dataset.isbn
    let author=e.currentTarget.dataset.author
    let fileid=e.currentTarget.dataset.fileid
    wx.navigateTo({
      url:`/pages/intro/intro?id=${id}&price=${price}&coverurl=${coverurl}&title=${title}&author=${author}&isbn=${isbn}&fileid=${fileid}`
    })
    app.globalData.newid=id
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    books.get({
      success:res => {
        this.setData({
          bookList:res.data
        })
      }
    })
  
  },
})

 index.json

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

 index.wxml

<!-- stroke-width表示进度条宽度 show-info表示进度条数-->
 
<!-- 图书展示容器 -->
<view class="book-container">
<!-- 图书单元区域设计 -->
  <view class="box" wx:for="{{bookList}}" wx:key='id'  bindtap="showBookIntro" data-id="{{item.id}}" data-price="{{item.price}}" data-coverurl="{{item.coverurl}}"
  data-author="{{item.author}}" data-title="{{item.title}}" data-isbn="{{item.isbn}}" data-fileid="{{item.fileid}}">
   <!-- 图书封面 -->
    <image src="{{item.coverurl}}" ></image>
    <text>{{item.title}}</text>
  </view>
</view>

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;
}

 intro

intro.js 

// pages/intro/intro.js
wx.cloud.init
const db = wx.cloud.database()
const books = db.collection('books')
const collectbook=db.collection('collectbooks')
const app=getApp({allowDefault:true})
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    isDownloading:false, /* 没有下载 */
    percentNum:0,
    bookList:[],
    price:'',
    author:'',
    coverurl:'',
    isbn:'',
    title:'',
    fileid:''
  },

 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(e){
    let that=this
    let a=e.id
    this.setData({
      title:e.title,
      author:e.author,
      coverurl:e.coverurl,
      price:e.price,
      isbn:e.isbn,
      fileid:e.fileid
    })
    console.log(e)
  },
 
 
  /* 封装showModal方法 */
  showTips:function(content){
    wx.showModal({
      title:'提醒',
      content:content,
      showCancel:false
    })
  },

/* 阅读图书 */
readBook:function(e){
  var that=this
  console.log(this.data.fileid)
  that.setData({
    isDownloading:true
  })
  wx.cloud.downloadFile({
    fileID:this.data.fileid,
    success:res=>{
      console.log("文件下载成功",res);
      this.setData({
        isDownloading:false
      })
     

    //打开文件
    var Path =res.tempFilePath
    wx.openDocument({
      filePath: Path,
      fileType:'pdf',
      success:function(res){
        console.log("文件打开成功")
      },
      fail:function(res){
        console.log("打开失败")
      }
        })
        downloadTask.onProgressUpadate(function (res) {
          let progress=res.progress
          that.setData({
            percentNum:progress
          })
        })
      }
    })
},
collectBook:function (e) {
  console.log(this.data.title)
  db.collection('collectbooks').where({
    title:this.data.title
  }).get({
    success:res=>{
      console.log(res.data.length)
      if(res.data.length==0){
        this.showTips("收藏成功")
        app.globalData.isRenew=true
        console.log(app.globalData.isRenew)
        db.collection('collectbooks').add({
          data:{
            title:this.data.title,
            author:this.data.author,
            isbn:this.data.isbn,
            fileid:this.data.fileid,
            coverurl:this.data.coverurl,
            price:this.data.price
          }
        })
      }
      else{
        this.showTips("已收藏")
      }
    },
    fail:console.error
  })
}
})

 intro.json

{"navigationBarTitleText": "电子阅读器"}

 intro.wxml

<!--pages/intro/intro.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="intro-container" >
  <!-- 图书封面图片 -->
  <image src='{{coverurl}}' mode="widthFix"></image>
  <!-- 图书信息介绍 -->
  <view class="intro-box"  >
    <text>书名：{{title}}</text>
    <text>作者：{{author}}</text>
    <text>价格：{{price}}</text>
    <text>ISBN：{{isbn}}</text>
  </view>
  <!-- “开始阅读”按钮 -->
  <button type="warn" bindtap="readBook">开始阅读</button>
  <button type="warn" bindtap="collectBook">收藏</button>
</view>

intro.wxss 

/* pages/intro/intro.wxss */
/* 下载时蒙层容器 */
.loading-container{
  height: 100vh;
  background-color: silver;
  display: flex;   /* flex模型布局 */
  flex-direction: column; /*水平排列*/
  align-items: center;  
  justify-content: space-around; /*分散布局*/
}
/* 图书详细信息区域 */
.intro-container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
 
/* 图书封面图片 */
.intro-container image{
  width: 400rpx;
  margin: 20rpx;
}
 
/* 图书信息区域 */
.intro-box{
  display: flex;
  flex-direction: column;
}
/* 图书文字信息区域 */
.intro-box text{
  margin: 20rpx;
}
 
/* 进度条 */
progress{
  width: 80%;
}

 mine

mine.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

 mine.json

{}

mine.wxml

<!--index.wxml-->
<view>
    <!--头像区域-->
    <view class="top">
        <view class="user-img">
           <image src="/images/nimingtoux.jpg" />
        </view>
    </view>
    <!--详情区域-->
    <view class="menu">
      <view class="item">姓名：</view>
      <view class="item">性别：</view>
      <view class="item">年龄：</view>
      <view class="item">专业：</view>
      <view class="item">班级：</view>
      <view class="item">手机：</view>
      <view class="item">爱好：</view>
    </view>
</view>

mine.wxss 

/**index.wxss**/
.top {
  background: white;
  width: 100%;
  padding: 30rpx 0;
}

.top .user-img {
  width: 300rpx;
  margin: 0 auto;
}

.top image {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  border: 6rpx solid #777F92;
}

.menu .item {
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 2rpx solid #ccc;
  padding: 10rpx 40rpx;
  font-size: 34rpx;
}

app.js 

// app.js
App({
  globalData:{
   newid:'',
   allbookList:[],
   isRenew:false,
  },
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      });
    }
  }
});

 app.json

{
  "entryPagePath": "pages/index/index",  
  "pages": [
    "pages/index/index",
    "pages/intro/intro",
    "pages/booklist/booklist",
    "pages/mine/mine"
  ],
  "window": {
    "navigationBarBackgroundColor": "#663366",
    "navigationBarTitleText": "电子阅读器"
  },
  "tabBar": {
    "custom": false,
    "color": "#663366",
    "selectedColor": "white",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/bookcity.png",
        "selectedIconPath": "/images/selectcity.png"
      },
      {
        "pagePath": "pages/booklist/booklist",
        "text": "书架",
        "iconPath": "/images/listicon.png",
        "selectedIconPath": "/images/listSelect.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/my.png",
        "selectedIconPath": "/images/mySelect.png"
      }
    ]

  },
  "style": "v2",
  "renderer": "webview",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

本本章作为自学记录用，不足之处轻喷