一、示例

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

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

二、pages.json

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

四、HBuilderX 内置浏览器运行 web

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

uni-app的示例功能

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

一、示例

在uni-app项目中创建一个"书架"页面。
在书架页面中，可以展示已添加的书本列表。你可以使用一个组件或者循环来展示书本列表，例如使用<view>、<text>标签配合v-for指令。
使用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指令遍历书架数据并展示
```

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

当用户点击添加到书架按钮时，将书本的相关信息添加到本地存储的书架数据中，同样使用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.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全家桶的库，也可以考虑使用状态管理来管理书架数据，以便在不同页面共享书架数据。

uniapp实现书本添加书架相关推荐

【uniapp】swiper 添加click事件
前言 Hbuilder X 2.7.14.20200618 (不清楚uniapp的版本,用工具版本代替) 关于uniapp多端:用uniapp对多端的支持不一致,适配工作很繁琐 swiper的clic ...
uniapp 项目中添加百度统计
需求描述在uniapp开发的H5项目中,需要通过百度统计代码将用户的操作信息进行记录统计. 1.新建 count.html 文件将文件放置在项目根目录下,文件名称自己随意. 2.百度统计代码 ...
uniapp iOS自定义添加至主屏幕的书签名称和图标
百度到的方法如下: <!doctype html> <html><head><meta charset="utf-8"><me ...
uni-app扫码添加声音
uni-app uni.scanCode app扫码时是没有声音的只有震动,那扫码如何添加声音呢? uni.scanCode({success: (res) => {consle.log(res ...
uniapp多语言添加i18n
官方地址 https://uniapp.dcloud.net.cn/collocation/i18n?id=vue%e7%95%8c%e9%9d%a2%e5%92%8cjs%e5%86%85%e5%a ...
uniapp 离线打包添加文件读写权限
问题:项目中用到文件存储数据的需求,在项目中 manifest.json 中已经添加了读写权限,真机运行和云打包都没有问题,能读取文件中的数据,但是离线打包,读出的数据就是空. uniapp 离线打包 ...
uniapp 模糊搜索文字添加颜色
项目场景: 项目场景:最近写商城模块,遇到了搜索功能.模糊搜索,搜素框中的文字和检索出的内容一样的字添加颜色. 问题描述例如:模糊搜索,搜素框中的文字和检索出的内容一样的字添加颜色. 分析: 首先要 ...
uni-app 小程序添加联系客服功能
小程序添加联系客服 0. 写在前面: 1. 开通小6客服 2. 添加客服入口 3. 避免入坑 4. 联系客服如下很多小程序,为了更好的服务用户.收到反馈之类的,一般都有联系客服的功能.那么,该如何实 ...
uniapp中动态添加及修改导航栏
在pages.json {"path": "pages/cart/cart","style": {"navigationBarTi ...

uniapp实现书本添加书架

一、示例

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

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

二、`pages.json`

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

四、HBuilderX 内置浏览器运行 web

uniapp实现书本添加书架相关推荐

最新文章

热门文章