| 博客班级 | 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实在是丑陋，希望之后可以加强前端的技术。