微信小程序实现电子书搜索与下载

1、背景

自己已经做了一版电子书下载网站（走蛟电子书），但用户使用手机更方便些，为改善用户体验，准备做一款微信小程序实现电子书搜索与下载的功能。

2、技术栈

由于功能较为单一，因此前端使用原生的微信小程序前端便可满足；后端采用C#语言编写，数据库采用MySQL。

开发此程序需要安装：

1）微信开发者工具：微信开发者工具（稳定版 Stable Build）下载地址与更新日志 | 微信开放文档

2）VS：

Download Visual Studio Tools - Install Free for Windows, Mac, Linux

3）MySQL：MySQL :: MySQL Downloads

4）数据库可视化工具Navicat（强烈推荐）： Navicat | 支持 MySQL、MariaDB、MongoDB、SQL Server、SQLite、Oracle 和 PostgreSQL 的数据库管理

3、前端源程序

 index/index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    keyword: '', // 搜索关键字
    fileId:'',
    fileUrl:'',
    fileName:'',
    fileContent : '<a href="{{fileUrl}}">{{fileName}}</a>',
    list:[],
    allData:[],
    showLoadMore: false, // 是否显示加载更多按钮
    currentPage: 1, // 当前页数
    pageSize: 10, // 每页数据数量
  },

  // 输入框输入事件处理函数
  handleInput: function(e) {
    this.setData({
      keyword: e.detail.value
    });
  },

  // 搜索按钮点击事件处理函数
  handleSearch: function() {
    // 获取搜索关键字
    this.setData({
      list:[]
    });
    const keyword = this.data.keyword;
    this.getData(keyword, this.data.fileId);
  },
  getData:function(keyword, fileId){
    console.log(keyword);
    var that = this;
    var tempList = [];
    setTimeout(()=>{
      wx.request({
        url: '接口地址',
        method: 'POST',
        data: {"clickFileID":fileId,"searchName":keyword,"ip":"192.168.100.1"},
        header: {
          'content-type': 'application/json'
        },
        success(res) {
          console.log(res.data);
          if(res.data.status == 1 && res.data.data.length > 0){
            for(var i = 0; i < res.data.totalNum;i++){
              tempList[i] = res.data.data[i];
            }
          }else{
            that.setData({
              list: [{"file_name":"再试试1"}]
            });
            clearTimeout();
          }
          if(tempList.length > 0){
            that.setData({
              allData:tempList
            });
            that.loadData();
            console.log(1,tempList.length);
            clearTimeout();
          }
        },
        fail(res) {
          console.log(res.errMsg);
          that.setData({
            list: [{"file_name":"再试试2"}]
          });
          wx.showModal({
            title: '失败',
            content: '2: ' + res.errMsg
          });
        }
      });
    },500);
  },
  loadData:function(){
    if(this.data.allData.length > 0){
      const { list, currentPage, pageSize } = this.data;
      const startIndex = (currentPage - 1) * pageSize;
      const endIndex = startIndex + pageSize;
      const updatedList = list.concat(this.data.allData.slice(startIndex, endIndex));
      this.setData({
        list: updatedList,
  showLoadMore: this.data.allData.length >= pageSize,
      });
    }else{
      this.setData({
        list: [{"file_name":"无数据3"}]
      });
    }
  },
  loadMore: function() {
    // 加载更多按钮点击事件
    const { currentPage } = this.data;
    this.setData({
      currentPage: currentPage + 1,
    });
    this.loadData();
  },
  download:function(e){
    var fileId = e.currentTarget.id; 
    var keyword = e.currentTarget.dataset.content;
    console.log(fileId, keyword);
    var that = this;
    wx.request({
      url: ''接口地址'',
      method: 'POST',
      data: {"clickFileID": fileId, "searchName": keyword, "ip": "168.192.100.2"},
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log(res.data);
        that.setData({
          fileName:res.data.data[0].file_name,
          fileUrl:res.data.data[0].file_url
        });
        that.showModal(that.data.fileUrl, that.data.fileName);
      },
      fail(res) {
        wx.showModal({
          title: '失败',
          content: '4: ' + res.errMsg
        });
      }
    });
  },
  showModal: function(fileUrl, fileName) {
    wx.showModal({
      title: '下载链接',
      content: fileName+"\n复制链接后在浏览器中打开",
      confirmText: '复制链接', // 设置确认按钮文字
      showCancel: false,
      success(res){
        if(res.confirm){
          wx.setClipboardData({
            data: fileUrl, // 设置要复制的链接内容
            success: function(res) {
              wx.showToast({
                title: '链接已复制',
                icon: 'success',
                duration: 2000
              });
            }
          });
        }
      }
    })
  }
});

index/index.json

{
  "usingComponents": {}
}

 index/index.wxml

<view class="mainview">
  <view class="mainfont" style="margin-top: 10rpx;">电子书查询</view>
  <view style="margin-top: 50rpx;">
    <view class="row">
      <view class="col">
        <input class="search-input" placeholder="请输入搜索内容" id="searchInfo" bindinput="handleInput" />
      </view>
      <view class="col2">
        <image class="minimage" src="../../image/sousuo.png" bindtap="handleSearch"></image>
      </view>
    </view>
  </view>
  <view>
  <view wx:for="{{list}}" wx:key="index" class="item">
  <text id ="{{item.file_id}}" data-content="{{item.file_name}}" bindtap="download">{{item.file_name}}</text>
  </view>
  <view class="load-more" wx:if="{{showLoadMore}}" bindtap="loadMore">
    加载更多
  </view>
  </view>
</view>

index/index.wxss

.mainview {
  margin: 10px;
}
.mainfont{
  font-weight:900;/*取值范围是100~900*/
}
.container{
  padding: 1px;
}
.search-input{
  font-weight:500;
}
.row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.col {
  padding: 5px;
  width: 90%;
}
.col2 {
  padding: 5px;
  width: 10%;
}
.minimage{
  width: 20px;
  height: 20px; 
}
.item{
  display: block;
  padding: 5px;
  background-color: #ffcece;
  margin-bottom: 5px;
  
}

4、后端源程序

待完善

5、效果图

6、尝鲜

目前小程序还未上线，请移步走蛟电子书使用。

小程序已上线：