使用低代码平台快速开发阅读App

使用以高效率著称的低代码平台开发一款阅读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));});

以上就是使用低代码平台开发一款阅读app的过程，如有建议可以留言讨论！