友空间小程序开发教程

1. 基本介绍

1.1 友空间APP

友空间是用友旗下的一款移动办公软件。友空间是面向大中型企业和组织的“融合、开放、连接”的社交与协同平台，帮助企业实现高效办公协同工作。实现企业与企业、企业与人、人与人的沟通、协同、交易等社会化商业活动。

1.2 友空间小程序

在友空间上可以运行的小应用，就叫做友空间小程序。

如果应用需要依赖友空间相关 API 和分发机制，则可以使用友空间小程序。开发完成以后，应用可以上架到友空间相关租户的应用中心。

可以理解为 APICloud 为友空间提供了一种：通用的、高性能的、统一技术标准的小程序解决方案。

1.3 支持程度

  1. 因为运行时是在友空间 APP 中，支持调用友空间统一 js 接口 mtl.js 。

  2. 因为友空间 APP 已经内置了 APICloud 相关引擎，可以同时调用 APICloud 已有的 API 能力。

  3. 因为内置的 APICloud 引擎是全量的，所以在渲染模式上：

    • 支持 WebView 的 HTML 渲染模式
    • 支持基于 AVM.JS 的原生渲染模式

  4. 因为 APICloud 的模块机制需要依赖于原生 SDK 的资源实现，此部分由于数量和范围较大，暂不支持模块调用。相关业务拓展能力建议依赖友空间提供的 SDK 和 mtl.js 提供的插件能力。

类别 APICloud应用 友空间小程序
端 API ✔️支持 ✔️支持
HTML 渲染模式 ✔️支持 ✔️支持
AVM 渲染模式 ✔️支持 ✔️支持
友空间 JSBridge ❌不支持 ✔️支持
模块 Store ✔️支持 ❌不支持

2. 开发和调试

2.1 前置工作

前期和开发普通 APICloud 应用一样，需要注册账号、创建应用、进行编码。详细参考 APICloud 开发通用教程：《多端开发快速上手教程》。

请阅读本文档的第一部分，了解基本概念和支持程度。

2.2 调试方法

2.2.1 自定义 Loader 和 友空间的选择

  • 在开发过程中，如果不涉及友空间相关 mtl.js 提供的 API ，可以直接使用 APPloader 或者是 自定义 Loader 进行调试即可。此时调试方式与之前的开发过程无异。

  • 如果逻辑中涉及到友空间相关 mtl.js 提供的 API，需要下载“友空间 APP ”，登录账号后，进行扫码调试。

2.2.2 调试过程

使用开发工具 APICloud Studio 3，确保版本在 3.2.3 以上。

确保友空间APP所在的设备和开发工具所在的设备是在同一局域网（或者是能够访问连通）。

右键代码编辑区域空白处，选择“实时预览”。

image.png

右侧会显示预览窗口。在预览窗口顶部，有一个红色的友空间图标，点击图标，会显示相应的调试二维码。 使用友空间 APP 扫码即可进行预览调试。

image.png

3. 示例代码

3.1 注意事项

  • 调用端 API 的情况和 APICloud 原有方式一样。
  • 调用友空间的 API 推荐统一使用 mtl.js 。

3.3 整体代码

3.3.1 HTML 模式

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>友空间演示</title>
</head>

<body>
    <h1 onclick="openWin()">APICloud:页面跳转</h1>
    <h1 onclick="getNetworkType()">友空间获取网络状态: getNetworkType </h1>
</body>

<script type="text/javascript">
    // apiready 生命周期
    apiready = function () {
        // 在页面初始化的时候执行逻辑
        api.toast({
            msg:"页面已经加载"
        })
    };

    // 演示调用端 API 能力
    function openWin() {
        api.openWin({
            url: './demo.html',
            name: 'demo'
        });
    }


    // 演示调用友空间 JSBridge 
    function getNetworkType() {
        mtl.getNetworkType({
            success: function (res) {
                api.alert({
                    title: "获取网络状态",
                    msg: JSON.stringify(res)
                })
            },
            fail: function (err) { alert('调用失败'); },
            complete: function (res) { alert('调用完成后执行'); }
        });
    }

</script>

</html>

3.3.2 AVM.JS 组件化模式(Vue风格)

<template>
    <safe-area class="page">
        <text>{{msg}}</text>
        <text @click="openWin">APICloud:页面跳转</text>
        <text @click="getNetworkType">友空间获取网络状态: getNetworkType</text>
    </safe-area>
</template>
<script>
export default {
    name: 'demo',
    data() {
        return {
            msg: "Hello 友空间"
        }
    },
    apiready() { // apiready 生命周期
        // 在页面初始化的时候执行逻辑
        api.toast({
            msg:"页面已经加载"
        })
    },
    methods: {
        openWin() {
            api.openWin({
                url: './demo.html',
                name: 'demo'
            });
        },
        getNetworkType() {
            mtl.getNetworkType({
                success: function (res) {
                    api.alert({
                        title: "获取网络状态",
                        msg: JSON.stringify(res)
                    })
                },
                fail: function (err) { alert('调用失败'); },
                complete: function (res) { alert('调用完成后执行'); }
            });
        }
    }
}
</script>

<style>
.page {
    font-size: 32px;
}
</style>

4. 上架和发布

请参考后续上架发布文档。

5. 相关链接