基于钉钉平台采用Weex解决方案的Vue微应用项目搭建步骤
名词解释：Weex：Weex 是一套构建高性能，可扩展的原生应用跨平台解决方案；Vue：这个就很火了，尤雨溪大神搭建的一套框架；微应用：这是我们搭建在钉钉平台上的一个应用，可制作我们需要的功能，同时可以调用一些钉钉提供的开放接口以及js调用原生的SDK；创建微应用文档：https://open-doc.dingtalk.com/docs/doc.htm?spm=a219a.7629140.0.0.
名词解释：
Weex：Weex 是一套构建高性能，动态化高扩展的，原生应用跨平台解决方案，一份代码可在Android IOS Web端同时运行的解决方案。其中方案（容器）包含native sdk、dingtalk sdk、weex项目、构建工具webpack、调试工具、文档等；同等解决方案就是React Native原生开发；
局限性：1、只能用webpack打包；2、构建器不同，weex用weex-loader，而vue用vue-loader；
好处：
1、快，原因Weex上层业务框架使用了现今非常流行的Vue2.0，可以理解为这是一套构建用户界面的框架，而Weex做了一层Runtime通过Native DOM API，将需要渲染的描述信息提交给Native，由Native来渲染最终的界面，这正是因为Weex比普通Web页面在体验，性能，稳定性方面要强上很多的原因；
Vue：这个就很火了，尤雨溪大神搭建的一套构建用户界面的MVVM框架（开源渲染引擎）；
特点： 1.轻量级的框架 2.双向数据绑定 3.指令 4.插件化
优点：
1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点：
1. 市面上算是新生儿（14年2月发布1.0，16年发布的2.0，同年9月加入了Weex团队，钉钉Weex的Vue接入应该就是他搞的）：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大但是很火，组件较少：。
3. 不支持IE8：
Weex+Vue接入：使用Vue2.0框架来编写weex的上层业务（其他框架有Rax，we）
坑：
1、调试toolkit 以及 devtool不友好，调试困难；
2、钉钉环境调式需联系钉钉团队；
好处：
1、受众偏前端开发；
Weex+Rax接入：使用类react的Rax框架来编写weex上层业务。Rax与React仅仅只是引入模块的不同的区别。可以使用redux驱动界面的渲染；
坑：
1、调式只支持IOS（可装模拟器）
2、技术支持缺乏，社区较少；
好处：
1、提供NuKe丰富的组件生态；
2、dingtalk sdk 3、体验度较HTML5 好 棒；
Weex Devtools：为weex前端和native开发工程师服务的一款调试工具，可同时检查weex里DOM属性和Javascript 代码断点调试，支持IOS和Android两个平台。
使用文档：https://blog.csdn.net/hopeyouknow/article/details/51800715
安装：npm install -g weex-toolkit
使用：weex debug [options] [we_file|bundles_dir]
注：在设备上或者模拟器调试需安装playbackground，具体debug流程见文档。
微应用：这是我们搭建在钉钉平台上的一个应用，可制作我们需要的功能，同时可以调用一些钉钉提供的开放接口以及js调用原生的SDK；
其他：
Rax：是一个基于 React 写法的跨容器的 js 框架（开源渲染引擎），偏向于解决多端问题，抹平各个端的差异，压缩大小约8K，语法和react近似，react开发者上手迅速，口号：Write once, run everywhere，是对react这套标准的实现；
特点：
1、设计上支持不同容器，web、weex以及node容器（即微应用，web端，安卓，ios端都可）；
2、体积足够小；
3、支持返回多个同级节点（react只能返回一个）减少crash；
4、标准化，遵循W3C，如可调用原生的API，alert、location、navigator、document等；
5、组件书写JSX，它是JavaScript语法的一个语法映射，需Babel Babel-loader编译，特点速度快；
6、使用webpack或者babel编译器可以使基于React和Rax协同工作，完美兼容。
React：是js的MVVM框架，偏向解决性能问题，大小约43K；
特点：1.声明式设计：React采用声明范式，可以轻松描述应用。2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活：React可以与已知的库或框架很好地配合。
优点：
1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点：并不是一个完整的生态框架，需搭配其他组件才能使得项目完整（如：ReactRouter等）
Salt：其中一种整体解决方案，使用Nowa作为工具层面支持，Nowa又是基于webpack的前端开发解决方案的集合，Nowa包含了前端开发生命周期中可能用到的所有工具。
SaltFetch：微应用数据层解决方案，提供了数据获取（ajax/jsonp/tunnel）以及数据本地缓存的能力。SaltFetch提供了语义化api，使用者可以无需关注底层数据获取及缓存的细节（数据来自网络还是本地缓存？数据通过ajax、jsonp还是tunnel方式获取？），所有底层繁琐的操作实现均可交给SaltFetch解决。
SaltUI ：钉钉官方微应用基于React的UI组件库，提供了微应用开发中常用设计元素的实现，旨在带给开发者极速、便捷、一致的体验，推荐使用Nowa作为项目开发工具。
salt-router：钉钉微应用提供路由及转场解决方案，基于页面预加载及转场效果等原生能力，提供了一套简明的路由api（当然也有可以使用Vue路由插件以及钉钉的openLinkSDK来实现转场）。
Nowa：在 Salt 的整体解决方案中，使用 Nowa 作为工具层面的支持；Nowa 是基于 webpack 的前端开发解决方案集合。包含一系列前端开发生命周期中可能使用到的工具。
mock：数据mock测试方案，全部由前端人员写测试数据，可以避免数据库污染以及提高前后端工作效率，只需确定接口文档即可同步开发。
Angular：前端JS引擎框架；
特点：
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点：
1. 模板功能强大丰富，自带了极其丰富的angular指令。
2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3. 自定义指令，自定义指令后可以在项目中多次使用。
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
缺点：
1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
5. DI 依赖注入 如果代码压缩需要显示声明.
钉钉推荐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调试：
最后就可以愉快的玩耍了！谢谢
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)