低代码开发平台YonBuilder移动开发，开发阅读APP教程

设计实现效果如下图：

主要包括书架，阅读，收藏功能。

经过分析，我们可以先实现底部导航功能，和书架列表页面。

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 ，有前端基础的，非常容易上手。新建应用时，可以选择模板，通过学习模板应用的代码可以很快上手。

巴特西

低代码开发平台YonBuilder移动开发，开发阅读APP教程

最新文章

热门文章