4

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

 1 year ago
source link: https://blog.51cto.com/u_15479723/5868496
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

使用低代码平台快速开发阅读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后，即会出现我们配置好的底部导航了。

使用低代码平台快速开发阅读APP_底部导航_02

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>
使用低代码平台快速开发阅读APP_底部导航_03

我们根据示例稍加改动，填充上我们从服务器请求回来的数据即可。

<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>
使用低代码平台快速开发阅读APP_json_04

3\. 实现打开书籍功能。可以根据不同的书籍类型，选择不同的模块打开 。如 pdf 格式的可选择pdf 阅读器模块 。

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK