使用低代码平台快速开发阅读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.qianyuthink.pkg.sdk/filePDF.pdf", 

    //传入网络路径
    "path":"网络路径",
    "fileName":"文件保存的自定义名称",
    "showLoading":true,
    "diaLogStyle":"horizontal"
}
muPDF.viewpdfFile(param,function(ret){
    alert(JSON.stringify(ret));
});

以上就是使用低代码平台开发一款阅读app的过程。

千语创想移动低代码开发平台，是用Web语言去开APP和小程序，多端开发框架，可视化操作，只需简单托拉拽就能完成APP开发，而且一次编码同时开发安卓、iOS、H5和小程序，这样将开发难度大幅降低，开发周期缩短将近一倍。此外，平台上有上千个各式各样的功能模块，一键调用方便去开发各类App。

立即免费在线制作一个APP/小程序，新手注册即送开发大礼包