---

近期项目回顾：使用Webview+Amis开发复杂Excel策略分配应用

背景：

• 接到一个复杂的需求，需要提供一个独立应用程序，完成Excel数据的策略分配和结果导出。
• 要求过程数据的校验、策略选择、生成步骤都展现出来，允许人工介入。
• 交付时间紧迫，原生控件开发成本高，学习曲线陡峭。

---

为什么选择Webview+Amis？

Webview的优势：

• 提供卓越的交互能力
• 与web类项目工程完美适配
• 可以将精力集中在业务处理上，界面交互逻辑微乎其微

成品界面

Amis的优势：

• 控件覆盖完整，配置开发简单
• 提供js调用webview的方法，方便进行数据交互

Amis控件丰富

---

创建工程的步骤

1. 创建一个高级界面，横版导航的工程；
2. 打开工程目录，创建一个web目录，设置为内嵌和本地资源；
3. 下载amis库sdk.tar.gz，解压到web目录下。

创建工程步骤

---

工程目录结构

1. 窗体类代码简单的加载webview，然后访问网页入口即可；
2. amis的界面配置json置于资源文件；
3. 核心业务处理在api目录下，一个aardio文件，对应一个请求接口。

目录结构

---

几个实用技巧

1. amis里面可以通过js调用webview中export的方法；

"onEvent": {
    "click": {
        "actions": [
            {
                "actionType": "custom",
                "script": "document.querySelector('input[name=keyCode]').select();document.execCommand('copy');"
            },
            {
                "actionType": "custom",
                "script": "window.getAmisJson().then(function(data){console.log(data);});"
            },
            {
                "actionType": "toast",
                "args": {
                    "msgType": "success",
                    "msg": "复制成功",
                    "timeout": 3000
                }
            }
        ]
    }
}

2. amis的markdown控件，用来写文档非常方便；

{
    "type": "page",
    "body": {
        "type": "markdown",
        "src": "/web/help.aardio"
    }
}

3. 所有的业务逻辑都在请求中处理即可，amis的数据结构非常标准。Nice！

   
   实用技巧