低代码开发平台 YonBuilder 移动开发，开发阅读 APP 教程
作者：APICloud
- 2022-12-23 北京
本文字数：2414 字
阅读完需：约 8 分钟
设计实现效果如下图：
主要包括书架，阅读，收藏功能。
经过分析，我们可以先实现底部导航功能，和书架列表页面。
1. 使用 tabLayout 高级窗口实现底部导航 。 使用 tabLayout 有两种方式，一种是使用 api.openTabLayout 接口打开，如果在 app 首页使用 tabLayout 布局，则可以使用配置 json 文件的方式：
{ "name": "root", "preload": 1, "vScrollBarEnabled": false, "tabBar": { "height": 55, "fontSize": "14", "textOffset": "8", "reload": true, "frames": [{ "title": "页面一", "name": "main", "url": "pages/main/main.stml", "bgColor": "rgba(255,255,255,1.0)" }, { "title": "页面二", "name": "mylist", "url": "pages/main/mylist.stml", "bgColor": "rgba(255,255,255,1.0)" }], "list": [{ "text": "书架", "iconPath": "widget://image/book1.png", "selectedIconPath": "widget://image/book.png" }, { "text": "收藏", "iconPath": "widget://image/shoucang1.png", "selectedIconPath": "widget://image/shoucang2.png" }] }}
复制代码
接着我们将 APP 入口配置为以上 json 文件，这样打开 APP 后，即会出现我们配置好的底部导航了。
2. 使用 list-view 实现书目列表
先看官方文档的示例代码和效果：
<template> <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}> <cell class="cell" onclick={this.itemClick}> <text class="title">{item.title}</text> <text class="subtitle">{item.subtitle}</text> </cell> <list-footer class="footer"> <text>加载中...</text> </list-footer> </list-view></template><style> .main { width: 100%; height: 100%; } .cell { padding: 8px; height: 60px; border-bottom: 0.5px solid #ddd; background-color: #fff; } .cell:active { background-color: #ddd; } .title { font-weight: bold; font-size: 18px; color: #000; } .subtitle { color: #333; } .footer { justify-content: center; align-items: center; }</style><script> export default { name: 'test', methods:{ apiready() { this.initData(false); }, initData(loadMore) { var that = this; var skip = that.dataList?that.dataList.length:0; var dataList = []; for (var i=0;i<20;i++) { dataList[i] = { title: '项目' + (i + skip), subtitle: '这里是子标题' } } var listView = document.getElementById('listView'); if (loadMore) { that.dataList = that.dataList.concat(dataList); listView.insert({ data: dataList }); } else { that.dataList = dataList; listView.load({ data: dataList }); } }, onscrolltolower() { this.initData(true); }, itemClick(e) { api.alert({ msg: '当前项索引：' + e.currentTarget.index }); } } }</script>
复制代码
我们根据示例稍加改动，填充上我们从服务器请求回来的数据即可。
<template> <safe-area> <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}> <cell class="cell" data-title={item.title} data-url={item.bookurl} data-bookid={item.bookid} onclick={this.itemClick}> <text class="title">{item.title}</text> <text class="subtitle">{item.subtitle}</text> <img class="love" data-url={item.bookurl} data-bookid={item.bookid} data-title={item.title} data-subtitle={item.subtitle} onclick='this.fnchagelove' src={item.icon} alt=""></img> </cell> <list-footer class="footer"> <text>{toasttext}</text> </list-footer> </list-view> </safe-area></template>复制代码
3. 实现打开书籍功能。可以根据不同的书籍类型，选择不同的模块打开 。如 pdf 格式的可选择 pdf 阅读器模块 。
var muPDF = api.require('muPDF');var param = { //传入本地路径 // "path":"/data/user/0/com.apicloud.pkg.sdk/filePDF.pdf",
//传入网络路径 "path":"网络路径", "fileName":"文件保存的自定义名称", "showLoading":true, "diaLogStyle":"horizontal"}muPDF.viewpdfFile(param,function(ret){ alert(JSON.stringify(ret));});复制代码
使用 YonBuilder 移动开发平台开发 APP 体验是很好的，尤其是使用最新的 avm 多端框架，其语法类似 vue ，react ，有前端基础的，非常容易上手。新建应用时，可以选择模板，通过学习模板应用的代码可以很快上手。
划线
评论
复制
发布于: 刚刚阅读数: 5
APICloud
关注
一次编码多端运行，移动应用低代码开发平台 2020-12-22 加入
用友YonBuilder移动端低代码开发平台，快速构建高性能多端应用
评论