友空间小程序开发教程

1. 基本介绍

1.1 友空间APP

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

1.2 友空间小程序

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

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

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

1.3 支持程度

  1. 因为运行时是在友空间 APP 中,支持调用友空间原有的相关 JSbridge 。

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

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

    • 支持 WebView 的 HTML 渲染模式
    • 支持基于AVM.JS 的原生渲染模式
  4. 因为 APICloud 的模块机制需要依赖于原生 SDK 的资源实现,此部分由于数量和范围较大,暂不支持模块调用。相关业务拓展能力建议依赖友空间提供的 SDK 。

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

2. 开发和调试

2.1 前置工作

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

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

2.2 调试方法

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

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

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

2.2.2 调试过程

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

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

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

image.png

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

image.png

3. 示例代码

3.1 注意事项

  • 调用端 API 的情况和 APICloud 原有方式一样。
  • 调用友空间的 JSBridge 无需 引入 esn.min.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="getUserInfo()">友空间API: getUserInfo</h1>
</body>

<script type="text/javascript">
    // 演示 apiready 生命周期
    apiready = function () {
        // 执行 YYEsnBridge.do 'getUserAgent'
        YYEsnBridge.do('getUserAgent', {
            'success': function (res) {
                api.alert({
                    title: "页面加载获取UA演示",
                    msg: JSON.stringify(res)
                })
            },
            fail: function (err) { alert('调用失败'); },
            complete: function (res) { alert('调用完成后执行'); }
        });
    };

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


    // 演示调用友空间 JSBridge 
    function getUserInfo() {
        YYEsnBridge.do('getUserYHTInfo', {
            success: function (res) {
                api.alert({
                    title: "getUserYHTInfo",
                    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="getUserInfo">友空间API: getUserInfo</text>
    </safe-area>
</template>
<script>
export default {
    name: 'demo',
    data() {
        return {
            msg: "Hello 友空间"
        }
    },
    apiready() {
        // 执行 YYEsnBridge.do 'getUserAgent'
        YYEsnBridge.do('getUserAgent', {
            'success': function (res) {
                api.alert({
                    title: "页面加载获取UA演示",
                    msg: JSON.stringify(res)
                })
            },
            fail: function (err) { alert('调用失败'); },
            complete: function (res) { alert('调用完成后执行'); }
        });
    },
    methods: {
        openWin() {
            api.openWin({
                url: './demo.html',
                name: 'demo'
            });
        },
        getUserInfo() {
            YYEsnBridge.do('getUserYHTInfo', {
                success: function (res) {
                    api.alert({
                        title: "getUserYHTInfo",
                        msg: JSON.stringify(res)
                    })
                },
                fail: function (err) { alert('调用失败'); },
                complete: function (res) { alert('调用完成后执行'); }
            });
        }
    }
}
</script>

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

4. 上架和发布

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

5. 相关链接