名词解释:
Weex:Weex 是一套构建高性能,可扩展的原生应用跨平台解决方案;
Vue:这个就很火了,尤雨溪大神搭建的一套框架;
微应用:这是我们搭建在钉钉平台上的一个应用,可制作我们需要的功能,同时可以调用一些钉钉提供的开放接口以及js调用原生的SDK;
其他:
SaltFetch:微应用数据层解决方案,提供了数据获取(ajax/jsonp/tunnel)以及数据本地缓存的能力。SaltFetch提供了语义化api,使用者可以无需关注底层数据获取及缓存的细节(数据来自网络还是本地缓存?数据通过ajax、jsonp还是tunnel方式获取?),所有底层繁琐的操作实现均可交给SaltFetch解决。
SaltUI :钉钉官方微应用组件库,提供了微应用开发中常用设计元素的实现,旨在带给开发者极速、便捷、一致的体验。
salt-router:钉钉微应用提供路由及转场解决方案,基于页面预加载及转场效果等原生能力,提供了一套简明的路由api(当然也有可以使用Vue路由插件以及钉钉的openLinkSDK来实现转场)。
Nowa:在 Salt 的整体解决方案中,使用 Nowa 作为工具层面的支持;Nowa 是基于 webpack 的前端开发解决方案集合。包含一系列前端开发生命周期中可能使用到的工具。
mock:数据mock测试方案,全部由前端人员写测试数据,可以避免数据库污染以及提高前后端工作效率,只需确定接口文档即可同步开发。
钉钉推荐weex解决方案跑在钉钉客户端,同时也有一个web端,是构建三端一致很好的方案之一。
开始我们配置步骤:
- 在本地新建一个项目工程,如DingDemo;
- 打开CMD,安装node(6.9.4版本以上) npm管理器;
- 进入新建的项目工程地址,下载安装脚手架,npm install -g weex-dingtalk-cli
dingtalk init webpack-simple dingding创建项目,并安装一些必要的依赖,时间稍长;
- 初始化成功之后,即可在web浏览器访问,也可在钉钉客户端访问;web端:输入npm run dev:web 默认打开8080端口,如果端口被占用,在入口文件修改未被占用的端口即可,在手机打开,将localhost换成你的IP地址访问即可;weex端同理http://localhost:8089/weex-bundle-dev.js?dd_wx_tpl=http://localhost:8089/weex-bundle-dev.js ;
- 接下来可能你会使用到一些钉钉原生API,同样使用之前需要先引用,步骤,退出运行状态,ctrl+c 选择Y即可;键入npm install dingtalk-javascript-sdk --save下载;报警告了,因为 fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,解决方法就是删除node_modules依赖文件,重装依赖即可,还不行,到package.json中删除fsevents相关依赖;
- 接下来再运行项目,npm run dev:weex ,打开home中index.vue 即可使用SDK了;
- 热加载,修改起来很爽,快试试吧,希望对您有一点点帮助!
<template> <div class="wrapper"> <text class="title" v-on:click="getClick">Hello Dingtalk Micro App {{ link }},点我</text> <text class="subtitle">这里测试钉钉SDK</text> </div> </template> <script> import dingtalk from 'dingtalk-javascript-sdk'; var modal = weex.requireModule('modal'); export default { name: 'home', data: function(){ return { link: ', author: Ime' } }, mounted: function(){ dingtalk.ready(function(){ const dd = dingtalk.apis; // 设置导航 dd.biz.navigation.setTitle({ title: '微应用DEMO标题Ime' }); }); dingtalk.error(function(err){ console.log(err); }); }, methods: { getClick: function(){ modal.toast({ message: 'Hello World ICEPY ! by Ime', duration: 2 }); } } } </script> <style scoped> .wrapper { display: flex; flex-direction: column; justify-content: center; width: 750px; align-items: center; } .title { font-size: 40px; color: #505050; text-align: center; } .subtitle { display: block; font-size: 30px; color: #AAAAAA; text-align: center; margin-top: 20px; } .bind-vue-container { width: 702px; height: 88px; justify-content: center; align-items: center; border-radius: 6px; background-color: #4fc08d; } .bind-vue{ font-size: 34px; color: #ffffff; text-align: center; } </style>
效果:
安装weex-toolkit调试:
最后就可以愉快的玩耍了!谢谢