{"id":18808574,"url":"https://github.com/lightningminers/weex-dingtalk","last_synced_at":"2026-02-14T01:06:14.712Z","repository":{"id":57157373,"uuid":"88934163","full_name":"lightningminers/weex-dingtalk","owner":"lightningminers","description":"Dingtalk Weex JSAPIs SDK","archived":false,"fork":false,"pushed_at":"2017-05-26T02:58:39.000Z","size":128,"stargazers_count":30,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-30T06:51:39.600Z","etag":null,"topics":["javascript","js-api-dingtalk","rax","vue2","weex","weex-dingtalk"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lightningminers.png","metadata":{"files":{"readme":"README-cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-21T03:11:35.000Z","updated_at":"2025-10-11T08:52:43.000Z","dependencies_parsed_at":"2022-08-31T15:11:01.862Z","dependency_job_id":null,"html_url":"https://github.com/lightningminers/weex-dingtalk","commit_stats":null,"previous_names":["icepy/weex-dingtalk"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/lightningminers/weex-dingtalk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightningminers%2Fweex-dingtalk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightningminers%2Fweex-dingtalk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightningminers%2Fweex-dingtalk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightningminers%2Fweex-dingtalk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lightningminers","download_url":"https://codeload.github.com/lightningminers/weex-dingtalk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightningminers%2Fweex-dingtalk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29427771,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T22:20:51.549Z","status":"ssl_error","status_checked_at":"2026-02-13T22:20:49.838Z","response_time":78,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","js-api-dingtalk","rax","vue2","weex","weex-dingtalk"],"created_at":"2024-11-07T23:13:23.427Z","updated_at":"2026-02-14T01:06:14.686Z","avatar_url":"https://github.com/lightningminers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# weex-dingtalk 文档\n\nweex-dingtalk是钉钉开放平台提供在weex容器中使用的SDK，其中实现的功能与H5的Dingtalk.js大同小异。\n\n通常你可以用传统的webapp的形式构建钉钉的微应用，然而有时候用户在使用你的微应用时会感觉到明显的体验不佳。为什么？那是因为网络，渲染，Web形式的应用与Native编写的应用会有明显的差距，你可能需要花费数倍的时间和精力去优化Web，但收获不佳。这正是为什么我需要weex的原因，在weex的帮助下，你可以只关注业务，不再需要关注性能的优化，只需要享受编程的乐趣和构建钉钉微应用本身即可。\n\n目前钉钉微应用的运行是基于weex，用户并无法区分这是一个什么样的实现，你可以优雅放心的使用weex来开发你的微应用。这门技术栈并不需要你具备`java`或者`Objective-c`的知识背景，只你要会使用HTML/CSS/JavaScript，再学习一些简单的Vue2.0语法，你就可以很快的上手来开发你的微应用。\n\nEnjoy the fun of building dingtalk microapp with weex ☺\n\n## 安装\n\n```bash\nnpm install weex-dingtalk --save\n```\n\n\u003e 注意：使用 `--save` 将版本信息存储起来，方便后续升级维护。\n\n## 使用\n\n### Vue\n\n入口weex-entry.js：\n\n```JavaScript\n  import Hello from './Hello.vue';\n  Hello.el = '#app';\n  new Vue(Hello);\n```\n业务Hello.vue：\n\n```Vue\n    \u003ctemplate\u003e\n        \u003cdiv class=\"wrapper\"\u003e\n            \u003ctext class=\"title\"\u003eHello icepy\u003c/text\u003e\n            \u003ctext class=\"subtitle\" v-on:click=\"getClick\"\u003e{{ link }}\u003c/text\u003e\n        \u003c/div\u003e\n    \u003c/template\u003e\n    \u003cscript\u003e\n\n        var stream = weex.requireModule('stream');\n        var modal = weex.requireModule('modal');\n        var dingtalk = require('weex-dingtalk');\n\n        export default {\n            name: 'hello',\n            data: function(){\n                return {\n                    link: 'DingTalk'\n                }\n            },\n            mounted: function(){\n              dingtalk.ready(function(){\n                const dd = dingtalk.apis;\n                // 设置导航\n                dd.biz.navigation.setTitle({\n                    title: 'icepy'\n                });\n              });\n            },\n            methods: {\n                getClick: function(){\n                  modal.toast({\n                    message: 'Hello World ICEPY !!!',\n                    duration: 2\n                  });\n                }\n            }\n        }\n    \u003c/script\u003e\n    \u003cstyle\u003e\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        width: 750px;\n        height: 1000px;\n        background-color: #333377;\n      }\n      .title {\n        font-size: 60px;\n        color: #505050;\n        text-align: center;\n      }\n      .subtitle {\n        display: block;\n        font-size: 30px;\n        color: #AAAAAA;\n        xxxx: static;\n        text-align: center;\n        margin-top: 20px;\n      }\n    \u003c/style\u003e\n```\n\n### Rax\n\n入口weex-entry.js:\n\n```JavaScript\nimport { createElement, render } from 'rax';\nimport App from './app.js';\nrender(\u003cApp/\u003e);\n```\n\n业务app.js：\n\n```JavaScript\nimport { createElement, Component, render} from 'rax';\nimport View from 'rax-view';\nimport Text from 'rax-text';\nimport dingtalk from 'weex-dingtalk';\nexport default class App extends Component{\n\trender(){\n\t\treturn(\n\t\t\t\u003cView\u003e\n\t\t\t\t\u003cText onPress={\n\t\t\t\t\t()=\u003e{\n\t\t\t\t\t\tdingtalk.ready(function(){\n\t\t\t\t\t\t\tconst dd = dingtalk.apis;\n\t\t\t\t\t\t\tdd.biz.util.openLink({\n\t\t\t\t\t\t\t\turl: 'https://github.com/icepy/weex-dingtalk'\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\u003e\n\t\t\t\t\tHello World icepy !!!\n\t\t\t\t\u003c/Text\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n```\n\n\u003e 注意：\n\n* 调用js-api时需要写在dingtalk.ready方法中\n\n例子：\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n  const dd = dingtalk.apis;\n  dd.biz.navigation.setTitle({\n      title: 'icepy'\n  });\n})\n```\n\n* 如果你有签名的需要，可以调用dingtalk.config，将你的签名对象传入，整个应用的周期内，你应该只可以调用一次config方法\n\n例子：\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.config({\n  any Object your server response sign\n});\n```\n\n* 你可以使用error注册一个error函数，与H5保持一致\n\n例子：\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.error(function(err){\n  console.log(err);\n});\n```\n\n* 正常的js-api可以通过dingtalk.apis来获取\n\n例子：\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n  const dd = dingtalk.apis;\n});\n```\n\n## apis 描述\n\n* config （Function | 参数 Object | 返回值 void） 配置签名对象\n* ready （Function | 参数 Function Callback | 返回值 void） 使用js-api必须写在ready callback中\n* error （Function | 参数 Object ）权限校验失败时\n* apis （Object）必须在ready方法中使用，钉钉 js-api 列表（与H5一致）\n* on 注册一个事件（与H5中的addEventListener保持一致）\n* off 注销一个事件（与H5中的removeEventListener保持一致）\n\n其他API的具体使用方法请参考 [https://open-doc.dingtalk.com/doc2/detail?spm=0.0.0.0.O1cH5b\u0026treeId=171\u0026articleId=104906\u0026docType=1](https://open-doc.dingtalk.com/doc2/detail?spm=0.0.0.0.O1cH5b\u0026treeId=171\u0026articleId=104906\u0026docType=1)\n\n## 降级H5之后如何使用\n\n为了达到让你的应用可以同时使用两种环境下的js-api，你应该继续使用 `import dingtalk from 'weex-dingtalk'` 的方式来引入模块，在这个模块中会自动判断环境给你导出相应的SDK模块。\n\nH5环境：\n\n```JavaScript\n\nimport dingtalk from 'weex-dingtalk';\n\ndingtalk.ready(function(){\n  const dd = dingtalk.apis;\n  // 设置导航\n  dd.biz.navigation.setTitle({\n      title: 'icepy'\n  });\n});\n\n```\n\n## 统一的事件回调机制\n\n当你注册了事件之后，触发事件将由客户端来执行。\n\n- 页面`resume`事件\n\n当页面重新可见并可以交互的时候，钉钉客户端会触发这个事件。\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n\tdingtalk.on('resume',function(){\n\t\t// do something\n\t})\n});\n```\n\n- 页面`pause`事件\n\n当页面不可见时，钉钉客户端会触发这个事件。\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n   dingtalk.on('pause',function(){\n       // do something\n   })\n});\n```\n\n- 导航栏 `navRightButton` 事件\n\n导航栏右侧按钮的点击事件。\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n\tconst dd = dingtalk.apis;\n\tdd.biz.navigation.setRight({\n\t\tcontrol: true,\n\t\tshow: true,\n\t\ttext: 'icepy'\n\t})\n\tdingtalk.on('navRightButton',function(){\n\t // do something\n\t})\n})\n```\n如果想让你注册的`navRightButton`客户端可以正常的触发，需要在设置`setRight`时传`control`为`true`。\n\n- 导航栏 `navTitle` 事件\n\n导航栏上`title`的点击事件\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n\tdingtalk.on('navTitle',function(){\n\t  // do something\n\t})\n});\n```\n\n- 导航栏 `navHelpIcon` 事件\n\n导航栏上点击icon时会触发的事件\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n\tconst dd = dingtalk.apis;\n\tdd.biz.navigation.setIcon({\n\t\tshowIcon: true,\n\t\ticonIndex: 101\n\t})\n\tdingtalk.on('navHelpIcon',function(){\n\t  // do something\n\t})\n});\n```\n\n- 导航栏 `backbutton` 事件\n\n导航栏左侧按钮的点击事件，注意：**这个事件触发之后会自动返回**\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n\tconst dd = dingtalk.apis;\n\tdd.biz.navigation.setLeft({\n\t  show: true,\n\t  control: true,\n\t  text: 'icepy'\n\t});\n\tdingtalk.on('backbutton',function(){\n\t\t//do something\n\t})\n})\n```\n如果想让你注册的`backbutton`客户端可以正常的触发，需要在设置`setLeft`时传`control`为`true`。\n\n- 导航栏 `navMenu` 事件\n\n当你在导航栏右侧设置了多个按钮，你就需要注册`navMenu`事件来处理点击。\n\n```JavaScript\nimport dingtalk from 'weex-dingtalk';\ndingtalk.ready(function(){\n\tdingtalk.on('navMenu',function(){\n\t\t// do something\n\t})\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightningminers%2Fweex-dingtalk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flightningminers%2Fweex-dingtalk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightningminers%2Fweex-dingtalk/lists"}