uniapp实现书本添加书架_uniapp小说阅读器阅读指定事件加入书架

目录

一、示例

目录

一、示例

在uni-app项目中创建一个"书架"页面。

在书籍列表页面（例如搜索页面或书籍详情页面）中，提供添加到书架的操作。

二、pages.json

三、Android原生应用清单文件和资源

四、HBuilderX 内置浏览器运行 web

---

.recommend_content {
 
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;
 
 
	}

uni-app的示例功能

要在uni-app中实现书本添加到书架功能，你可以按照以下步骤进行操作：

一、示例

1. 在uni-app项目中创建一个"书架"页面。

2. 在书架页面中，可以展示已添加的书本列表。你可以使用一个组件或者循环来展示书本列表，例如使用<view>、<text>标签配合v-for指令。

3. 使用uni-app提供的本地存储API（如uni.setStorageSync和uni.getStorageSync）来保存和获取用户的书架数据。

   • 在用户添加书本到书架时，将书本的相关信息（例如书名、作者等）存储到本地存储中。可以使用uni.setStorageSync将书本数据保存到本地存储中。示例代码如下：

   // 假设book对象包含书本的相关信息
   const book = {
     id: 1,
     title: '《JavaScript高级编程》',
     author: 'John Doe',
     // 其他书本字段...
   };
    
   // 添加书本到书架
   let bookshelf = uni.getStorageSync('bookshelf') || [];
   bookshelf.push(book);
   uni.setStorageSync('bookshelf', bookshelf);
   

   • 在书架页面加载时，从本地存储中获取书架数据，并展示在页面上。可以使用uni.getStorageSync来获取本地存储中的书架数据。示例代码如下：

   // 获取书架数据
   let bookshelf = uni.getStorageSync('bookshelf') || [];
    
   // 在页面中使用v-for指令遍历书架数据并展示
   

4. 在书籍列表页面（例如搜索页面或书籍详情页面）中，提供添加到书架的操作。

   • 当用户点击添加到书架按钮时，将书本的相关信息添加到本地存储的书架数据中，同样使用uni.setStorageSync来保存书架数据。

   // 假设book对象包含书本的相关信息
   const book = {
     id: 1,
     title: '《JavaScript高级编程》',
     author: 'John Doe',
     // 其他书本字段...
   };
    
   // 添加书本到书架
   let bookshelf = uni.getStorageSync('bookshelf') || [];
   bookshelf.push(book);
   uni.setStorageSync('bookshelf', bookshelf);
   

5. 刷新书架页面

   • 当用户添加书本到书架后，可以在书架页面调用uni.reLaunch或者重新加载书架页面，以便展示最新的书架数据。

   // 在书架页面调用uni.reLaunch
   uni.reLaunch({
     url: '/pages/bookshelf/bookshelf'
   });
   

二、pages.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置

三、Android原生应用清单文件和资源

app打包，在Android原生开发中提供了配置 AndroidManifest.xml 和 资源目录 assets、res。uni-app中对常用项进行了封装，提供了manifest.json。

但manifest.json不能包含所有Android的配置。

url: '/pages/index/detail?item=' + encodeURIComponent(JSON.stringify(item))

在HBuilderX 3.6以前，开发者如需使用manifest未封装的配置、或需自定义资源目录 assets、res下的内容，只能离线打包或开发App原生语言插件。

四、HBuilderX 内置浏览器运行 web

打开 uni-app 项目的页面，点 HBuilderX 右上角的预览按钮，可以在内置浏览器里打开 Web 运行结果，也可以点右键打开控制台调试。

修改保存工程源码时，右边的浏览器内容可以自动刷新。

在 HBuilderX 控制台里，可以直接看到内置浏览器打印的日志。

点击日志，可以直接跳转到对应的代码处。

HBuilderX3.6.0起，支持直接在应用项目中配置应用清单文件 AndroidManifest.xml 和资源目录 assets、res

总结

上述步骤提供了一个简单的实现方式，你可以根据实际需求和项目结构进行适当的调整和修改。此外，如果你使用了类似Vue全家桶的库，也可以考虑使用状态管理来管理书架数据，以便在不同页面共享书架数据。