设计实现成果如下图：
次要包含书架，浏览，珍藏性能。
通过剖析，咱们能够先实现底部导航性能，和书架列表页面。
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 ，有前端根底的，非常容易上手。新建利用时，能够抉择模板，通过学习模板利用的代码能够很快上手。