基于钉钉平台采用Weex解决方案的Vue微应用项目搭建步骤

名词解释：

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测试方案，全部由前端人员写测试数据，可以避免数据库污染以及提高前后端工作效率，只需确定接口文档即可同步开发。

创建微应用文档：

https://open-doc.dingtalk.com/docs/doc.htm?spm=a219a.7629140.0.0.VTxh74&treeId=367&articleId=104938&docType=1

钉钉推荐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调试：

最后就可以愉快的玩耍了！谢谢

基于钉钉平台采用Weex解决方案的Vue微应用项目搭建步骤

猜你喜欢