微信小程序demo——小說閱讀器

博客班級	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作業要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作業代碼	https://github.com/Harperyy/book-reading
學號	31801099
姓名	楊清倩

前言

這是一個非常簡易的小說閱讀器，由於第一次接觸小程序，只是一個雛形，數據量並不多，樣式設計上也十分粗糙，只能完成最基礎的功能。（該小程序的大量數據都存在雲開發提供的數據庫。）

設計思路及要求

要求如下：

• 通過男女生頻道來選擇想要的書
• 在頻道頁面可以通過簡介來選擇小說
• 可以搜索關鍵字來搜索想要的小說
• 可以添加小說
• 在首頁會有小說推薦

設計思路：
首先是首頁的設計，之后逐步完成各個頁面的布局設計，最后在寫js，實現各個頁面的跳轉和各種操作。

各頁面介紹

所有的頁面都存在pages文件夾中

首頁

由三部分組成，上半部分滑動的頁面會顯示熱門推薦的小說，通過選擇來進入不同頻道。首頁的設計參考了一個植物圖鑒的小程序，主要以簡潔方便為主。雖然是有參考的代碼，但仍需不小的改動。通過首頁的設計，我逐漸了解到小程序基本的開發流程，包括界面樣式設計的各種技巧以及js的編寫。可以說，在完成首頁的同時，我才真正入門了。

index.wxml

<import src="family-item/family-item-temp.wxml"/>
<view >
  <swiper indicator-dots="true" autoplay="true" interval="5000" width="200rpx">
    <swiper-item><image src="/img/family/timg.jpg"></image></swiper-item>
    <swiper-item><image src="/img/family/timg 2.jpg"></image></swiper-item>
  </swiper>
  <view class="tt">
    <text>--- ----- ---</text>
  </view>
  <view class="pai">
    <block  wx:for="{{familyKey}}" wx:for-item="item">
    <view catchtap="toGenus" data-family-id="{{item.familyId}}">
      <template is="familyItem" data="{{...item}}"></template>
    </view>
    </block>
  </view>
   
</view>

index.js

var faData = require("../../data/family.js");

Page({
  data: {
  },
  toGenus:function(event){
    var fId = event.currentTarget.dataset.familyId;
    var urlto="";
    if (fId == "f01"){
      urlto = '../male/male?fid=' + fId;
    }else{
      urlto = '../female/female?fid=' + fId ;
    }

    wx.navigateTo({
      url: urlto
    })
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.setData({familyKey:faData.familys});
  },

  onShareAppMessage: function (res) {
       
  }
})

男女頻道頁面

該頁面會顯示該頻道的所有小說以及小說文案
以女生頻道為例

female.wxml

<view>
  <view class="tt">
    
    <text>--- 女生頻道 ---</text>
  </view>
  <view class="pai">
    <block wx:for="{{genKey}}" wx:for-item="item">
    
    <view class="family" catchtap="toSpecies" data-gen-id="{{item.genId}}">
     <view class="imag">
      <image src="{{item.genImg}}"></image>
      <text>{{item.genName}}</text>
     </view>
     <view class="intro">
      <text>{{item.intro}}</text>
     </view>
    </view>

  </block>
  </view>
</view>

female.js

var genData = require("../../data/female.js");
Page({
  data: {

  },
  toSpecies: function (event) {
    var gid = event.currentTarget.dataset.genId;
      wx.navigateTo({
        url: '../tujian-family/sp/sp?gid='+gid
      })
  },
  onLoad: function (options) {
    var fid = "female_" + options.fid;
    var gens = genData[fid];

    this.setData({ genKey: gens });
  },

  onShareAppMessage: function () {

  }
})

小說界面

由於數據量太大，該頁面無法直接可以閱讀小說，只提供百度雲鏈接

sp.wxml

<view>
  <view class="title-container">
   
    <text class="fgName" > {{genName}}</text>
    <image src="{{genImg}}" mode="aspectFit"></image>
  </view>
  <view class="intro">
    <text>{{intro}}</text>
    
  </view>
  <view class="tt">
    
    <text>--- 正文 ---</text>
  </view>
  <view class="content">
    <text>{{context}}</text>
    
  </view>
</view>

sp.js

var speData = require("../../../data/female.js");
Page({
  data: {
  },
  onLoad: function (options) {
    var gid = options.gid;
    var spes = speData["female_f02"];
    var spedetail;
    spes.forEach(function (e) {
      if (e.genId==gid){
        spedetail=e;
      }
    });
    console.log(spedetail);
    this.setData(spedetail);
  },


  onShareAppMessage: function () {

  }
})

搜索界面

搜索功能是基於雲開發的數據庫。這一功能費了比較多的時間，首先是搜索框的設計，這個比較容易；然后就是連數據庫及其查詢修改。在連數據庫的過程中，有許多問題。有些問題實在是太低級了，比如數據庫權限沒開，導致一直連不上，一直到最后才發現這個問題差點崩潰。還有一些問題就比較常規，經過百度以及一些博文，很快能解決。

search.wxml

<view>
     <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="請輸入搜索內容"bindinput="searchInput"/>
                </view>
            </view>
            <view class="weui-search-bar__cancel-btn" bindtap='searchBook'>搜索</view>
        </view>
    </view>
    <view>
      <text>{{context}}</text>
    </view>
</view>

search.js

wx.cloud.init({
  env:"yqq-3g0xquwqdd5bcff3",
  traceUser: true
})
const db = wx.cloud.database()

Page({
  data: {
      inputValue:'',
      context:''
  },
  onLoad: function (options) {

  },
    searchInput: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  // 查詢搜索的接口方法
  searchBook: function (e) {
    var that = this;
    db.collection('book').where({
      bookname:this.data.inputValue
    })
    .get({
      success: function(res) {
        console.log(res.data[0].context)
        that.setData({
          context: res.data[0].context
        })
        that.onLoad()
      }
    })
  
  }
})

數據文件data

數據文件又來存儲大部分數據的鏈接

以女生小說為例
female.js

var female_f02=[
  {
    familyId: "f02",
    genId: "f02g01",
    genName: "十年一品溫如言",
    intro:"當一切開始的時候，將來的我們，把它冠作，過去。她說，我的過去，與你們相同。從一個人，再回歸到一個人的宿命。只是，留下一個無法消除的牙印，噬在喉頭，再深一寸，致命。",
    genImg: "cloud://yqq-3g0xquwqdd5bcff3.7971-yqq-3g0xquwqdd5bcff3-1303928640/十年.jpg"
  },
  {
    familyId: "f02",
    genId: "f02g02",
    genName: "三生三世枕上書",
    intro:"有一句話是情深緣淺，情深是她，緣淺是她和東華。 有一個詞是福薄，她福薄，所以遇到他，他福薄，所以錯過她。 “你說我只是個寵物，我走的時候，你也沒有挽留我。” “為什么我尤其需要你的時候，你都恰好不在呢",
    genImg: "cloud://yqq-3g0xquwqdd5bcff3.7971-yqq-3g0xquwqdd5bcff3-1303928640/ss.jpg"
  },
  {
    familyId: "f02",
    genId: "f02g03",
    genName: "東宮",
    intro:"我還沒有走到光華門，就忽然聽到眾人的驚叫，無數人喧嘩起來，還有人大叫：“承天門失火啦！” 我以為我聽錯了，我同所有人一樣往南望去，只見承天門上隱約飄起火苗，斗拱下冒出濃重的黑煙，所有人掩口驚呼，",
    genImg: "cloud://yqq-3g0xquwqdd5bcff3.7971-yqq-3g0xquwqdd5bcff3-1303928640/東宮.jpg"
  },
  {
    familyId: "f02",
    genId: "f02g04",
    genName: "半是蜜糖半是傷",
    intro:"你要相信，這世間總有一段情會讓你刻骨銘心，哪怕是要經歷八十一難的暗戀。她是職場上的女王，生活上的傲嬌妹子，外型上的霸氣御姐，心理上的變形金剛。他是職場上的霸王，生活上的毒舌漢子，外型上的不羈爺們，心理上的無敵超人。",
    genImg: "cloud://yqq-3g0xquwqdd5bcff3.7971-yqq-3g0xquwqdd5bcff3-1303928640/蜜糖.jpg"
  },
  
]
module.exports = {
    female_f02
  }

總結

通過這次demo的制作，讓我了解到了小程序開發的基本流程。雖然制作十分粗糙，但也花費了很多時間。期間遇到很多問題，由於對小程序的不熟悉，一些錯誤沒有那么敏感，需要花費很多時間去debug。不過熟能生巧，這個demo做下來，明顯進步很多，能盡量規避一些低級錯誤。還有就是，一定一定要保持清醒的頭腦，並且將不同文件放在不同文件中，否則分分鍾搞混。樣式class在取名字方面也要嚴謹，這次就是亂取，結果搞得頭昏。

優化

這個只是一個非常簡易的小程序，優化的空間很大。其實在一開始我也有很多設想，比如可以利用爬蟲在不同網站上爬到小說；可以建立一個社區，大家可以討論分享，甚至可以提供資源；在搜索方面可以更加人性化，可以搞個熱門小說排行榜；在推薦小說方面，可以通過用戶評論，興趣愛好來推薦。最后就是，界面設計美化，這個demo實在是丑陋，希望之后可以加強前端的技術。