設計實現效果如下圖:
主要包括書架,閱讀,收藏功能。
經過分析,我們可以先實現底部導航功能,和書架列表頁面。
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 ,有前端基礎的,非常容易上手。新建應用時,可以選擇模板,透過學習模板應用的程式碼可以很快上手。