基于uniapp的仿书旗小说的小程序

这篇具有很好参考价值的文章主要介绍了基于uniapp的仿书旗小说的小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

仿照书旗小说做的一个基于uni-app + Vue的实现的小程序

一、前言介绍

书旗小说是阿里文学旗下手机阅读APP,拥有阿里文学平台上的小说资源 [1] 。书旗小说除了拥有传统阅读器的书籍同步阅读、全自动书签、自动保存阅读历史、点击翻页、全屏文字搜索定位、自动预读、同步更新等功能外,更有离线书包、增强书签以及资讯论坛等扩展内容,还可以阅读SD卡中TXT/UMD/EPUB内容,使阅读更丰富更自由。

软件架构

涉及技术

前端:

uni-app、uview、vue、自定义导航、组件(components)封装化等核心

使用情况

安装HbuilderX、微信开发者工具、安装uview插件运行小程序
**

代码编写

<template>
	<view>
		<u-navbar title=" " :is-back="false"></u-navbar>
		<view class="title-box">
			<view class="head-text">
				让阅读成为习惯
			</view>
			<view class="head-icon">
				<view class="icon">
					<u-icon name="search" size="40" @click="searchto()"></u-icon>
				</view>
				<u-icon name="more-dot-fill" size="40"></u-icon>
			</view>
		</view>
		<!-- 主体区域 -->
		<view class="body-box">
			<view class="content-tittle">
				<u-icon name="man-add-fill" size="48rpx" color="#C4A880"></u-icon>
				<text>我的书架</text>
			</view>
			<view class="content-image-body">
				<block v-for="(item1,i1) in centerList" :key="i1">
					<view class="content-image">
						<image :src="item1.image_src" @click="changeto()"></image>
						<text>{{item1.img_name}}</text>
						<view class="text-name">
							{{item1.name}}
							<text>{{item1.read}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="foot-box">
			<view class="foot-title">
				为你定制
			</view>
			<view class="box-nav">
				<block v-for="(item, i) in list" :key="i">
					<view class="scroll-box">
						<view class="ancient">
							{{item.name}}
						</view>
					</view>
				</block>
			</view>
			<!-- 内容 -->
			<block v-for="(item2,i2) in footList" :key="i2"> 
			<!-- 自定义组件 -->
			<book-list :item2="item2"></book-list>
			</block>	
		</view>
	</view>
</template>

<script>
	import {centerList,footList} from '../../utils/bodyList.js'
	export default {
		data() {
			return {
				centerList: centerList,
				footList: footList,
				list: [{
						name: "#古代言情"
					},
					{
						name: "#现代言情"
					},
					{
						name: "#都市生活"
					},
					{
						name: "#玄幻科技"
					}
				]
			}
		},
		methods: {
			changeto() {
				uni.navigateTo({
					url: '../book-detail/book-detail'
				})
			},
			searchto(){
				uni.navigateTo({
					url:"../searchlist/searchlist"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		display: flex;
		justify-content: space-between;

		.head-text {
			font-size: 40rpx;
			font-weight: 700;
			font-family: "宋体";
			margin: 0 20rpx;
		}

		.head-icon {
			display: flex;

			.icon {
				margin: 0 20rpx;
			}

			margin: auto 30rpx;

		}
	}

	.body-box {
		background: #fff;
		margin: 20rpx 0;

		.content-tittle {
			font-size: 36rpx;
			font-weight: solid;
			padding: 20rpx;

			text {
				padding-left: 20rpx;
			}
		}

		.content-image-body {
			margin: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			// width: 33.3%;
			.content-image {
				display: flex;
				flex-direction: column;
				margin: 20rpx 10rpx;

				.text-name {
					font-size: 24rpx;
					color: gray;

					text {
						padding-left: 10rpx;
					}
				}

				text {
					margin-top: 10rpx;
					font-size: 24rpx;
				}

				image {
					width: 180rpx;
					height: 250rpx;
					// margin-right: 30rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.foot-box {
		display: flex;
		flex-direction: column;

		.foot-title {
			font-size: 36rpx;
			font-weight: 600;
			margin: 20rpx;
		}

		.box-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx;

			.scroll-box {
				margin: 20rpx;

				.ancient {
					color: #18B566;
					font-size: 24rpx;
					border: 1px solid #18B566;
					border-radius: 10rpx;
					padding: 10rpx;
				}
			}
		}

		.text-nav {
			margin: 20rpx;

			.nav-list {
				font-size: 30rpx;
				// height: 100rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-left: 20rpx;

			}
		}
	}
</style>

实现页面效果:

uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js
uniapp小说阅读器,Uniapp,前端,uni-app,小程序,vue.js

注意:

本小程序主要是模仿书旗小说页面做练习开发,仅用于学习开发和项目实践,不涉及后端开发, 喜欢本文的记得给博主一个小小的关注和点赞,你的关注和点赞是我进步的动力

**文章来源地址https://www.toymoban.com/news/detail-527007.html

到了这里,关于基于uniapp的仿书旗小说的小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于uniapp的小程序ssm的童装购买购物商城平台[文档+答疑+远程

     网站介绍:✌本网站专注专注于计算机技术领域的毕业设计辅导,提供JAVA、微信小程序、Python、APP、PHP、微服务、NET等毕设项目的定制和成品服务!✌         ✌IT实战营站长,拥有10年软件相关系统架构及教学经验,Java、大数据培训讲师,曾任公司技术总监;其与团队

    2024年01月16日
    浏览(49)
  • 在uniapp的小程序中使用自己的字体库

    很多人下载字体库都是在阿里字体库找字体下载字体。但是我还是喜欢这个这个网站弄字体 1.假设我们找一个网站上面发现了不错的字体 1.1 我们打开控制台然后在网络中过滤woff,就找到了字体文件    1.2 在网上找到字体转svg的网站 TTF转SVG - 在线转换图像文件  (我用tt

    2024年02月09日
    浏览(47)
  • 基于Spring Boot的仿豆瓣平台

    访问【WRITE-BUG数字空间】_[内附完整源码和文档] 后端为了提高性能和用户体验,该系统平台使用Spring Boot集合Spring,Spring MVC和MyBatis框架做基础,并且集成Spring Data框架,MySQL做数据持久化,Redis缓存提高速度,反向代理和负载均衡为Nginx,Dubbo分布式开发,服务器使用目前较流

    2024年02月06日
    浏览(35)
  • 基于 ChatGPT 实现一个 PDF 阅读器

    最近随着 OpenAI 开放了相关 API, 市面上出现了越来越多的 AI 应用,chatpdf 这个项目吸引了我的注意,它是如何突破 API 最大 token 的限制来读取这种长文本的呢? 基于对 chatpdf 原理的好奇,我开始研究起市面上相关的应用,于是简单了解后写了个简单的 demo 用于学习,顺便熟

    2023年04月09日
    浏览(38)
  • 案例265:基于微信小程序的小说阅读系统

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 用户信息管理 作品信息管理 作品类型管理 公告信息管理

    2024年02月20日
    浏览(51)
  • uniapp+node.js前后端做帖子模块:分享帖子和分享页面(社区管理平台的小程序)

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 温馨提示:我做的思路可能是复杂化了或者说代码写的不规范,如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码,我的后端是写的

    2024年03月11日
    浏览(48)
  • Uniapp学习之从零开始写一个简单的小程序demo(新建页面,通过导航切换页面,发送请求)

    先把官网文档摆在这,后面会用到的 [uniapp官网文档]: https://uniapp.dcloud.net.cn/vernacular.html# 按照官方推荐,先装一个HBuilder 如果要在微信小程序上运行,再装一个微信开发者工具 为了之后的调试,在HBuilder里配置微信开发者工具的安装路径 在微信开发者工具中设置端口开发、不

    2024年02月10日
    浏览(42)
  • 基于MiniTest的小程序自动化测试

    什么是MiniTest MiniTest是专属于小程序和小游戏的自动化测试框架,由三个部分组成, Minium小程序自动化框架 小程序云测试服务 小游戏云测试服务 什么是Minium minium 是为小程序专门开发的自动化框架。使用 minium 可以进行小程序 UI 自动化测试, 但是 minium 的功能不止于仅仅是

    2024年02月14日
    浏览(38)
  • 案例106:基于微信小程序的小说实体书商城设计与实现

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 前言 系统展示 用户功能模块的实现 用户注册登录界面 首页界面 小说信息界面

    2024年01月20日
    浏览(56)
  • 基于php微信小程序小说电子书阅读系统设计与实现

    开发概要 开发操作系统:windows10 + 4G内存 + 500G 小程序开发:微信开发者工具(MINA框架) 后台环境:IIS +PHP 后台开发语言:PHP 后台开发工具:Dreamweaver +PhpStorm 数据库:mysql8 数据库管理工具:navicat 其他开发语言:html + css +javascript

    2024年02月11日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包