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

Posted 2022-11-19

设计实现效果如下图：

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

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

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