全网免费小说,功能齐全,书架、分类、各大排行榜,搜索、详情页,评论、阅读、夜间模式,字体大小,目录。
小说是自动更新的,数据来源第三方API,无依赖库。
学习到的东西很多,强大的文字排版功能。
搜索,分类,排行榜的可以点击添加到书架。
只需 要修改小程序appid和在小程序公众号中添加服务器域名(开发工具有添加域名提示),就可以发布小程序了。
代码摘要:
index.wxml:
<!--index.wxml-->
<view class="container">
<view class="bookcase-box">
<view class="bookcase-item" bindtap="skip" data-bookid="{{index}}" wx:for="{{bookcase}}" wx:key="index">
<image class="cover" src="{{item.cover}}"></image>
<view class="book-content">
<text class="title">{{item.title}}<text class="book-new" wx:if="{{item.isUpdate}}">更新</text></text>
<text class="content"><text class="text-hint">{{item.updated}}</text> {{item.lastChapter}}</text>
</view>
</view>
</view>
<view class="book-add" bindtap="toSearch">
<image class="add-btn" src="../../static/image/add.png" background-size="cover"></image>
<text class="user-motto">添加您喜欢的小说</text>
</view>
</view>
index.wxss:
/**index.wxss**/
.book-add{
width: 100%;
padding: 20rpx 0;
background: #ebf0f0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: 5;
}
.add-btn{
width: 50rpx;
height: 50rpx;
}
.bookcase-item{
display: flex;
width: calc(100vw - 80rpx);
flex-direction: row;
padding: 20rpx 40rpx;
border-bottom: 1rpx solid #ccc;
}
.book-content{
justify-content: space-around;
}
.book-new {
margin-left: 20rpx;
padding: 0 6rpx;
background: red;
color: white;
font-size: 12px;
}
search.wxml:
<!--search.wxml-->
<view class="container">
<view class="search-head">
<input class="search-input" bindinput="setSearchWord" value="{{search}}" placeholder="输入书名或者作者名" >
<button class="clear" wx:if="{{showClear}}" bindtap="clearWord">
<icon type="clear" size="20" bindtap="clearWord"/>
</button>
</input>
<button class="search-btn" bindtap="search">搜索</button>
</view>
<view class="search-tags" wx:if="{{books.length < 1}}">
<view class="tag-head">热门搜索</view>
<text class="tag" wx:for="{{tags}}" wx:key="index" bindtap="setWord" data-word="{{item}}">
{{item}}
</text>
</view>
<scroll-view class="search-books" scroll-y wx:else>
<view class="search-book" bindtap="skip" data-bookid="{{item._id}}" wx:for="{{books}}" wx:key="index">
<image class="cover" src="{{item.cover}}"></image>
<view class="book-content">
<text class="title">{{item.title}}</text>
<text class="content text-hint">{{item.author}} | {{item.cat}}</text>
<text class="content text-hint">{{item.shortIntro}}</text>
<text class="content">{{item.latelyFollower}}人在追</text>
</view>
</view>
</scroll-view>
</view>
search.wxss:
/* search.wxss */
.search-head{
width: 100%;
height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.search-input {
border: 1rpx solid #ebf0f0;
border-radius: 5px;
padding: 10px;
margin-right: 10px;
position: relative;
}
.search-btn{
margin: 0px;
}
.search-books{
margin-top: 10px;
height: calc(100vh - 120rpx);
background: #ebf0f0;
}
.search-book{
display: flex;
flex-direction: row;
padding: 10px;
border-bottom: 1rpx solid #ccc;
}
.search-tags {
padding-top: 100rpx;
text-align: center;
}
.tag-head {
margin-bottom: 50rpx;
}
.tag {
color: cornflowerblue;
}
.clear{
position: absolute;
right: 0;
top: 0;
border: none;
background: transparent;
display: flex;
align-items: center;
height: 100%;
/*padding: 15px;*/
z-index: 9999;
}
.clear:after{
border: none;
}