钉钉Weex微应用开发通关手册

>>>Link Start!

LinkStart.jpg

目录

• 配置环境

• 代码编写

• 界面跳转传参

• weex-bundle.js热更新（缓存处理）

• 界面返回重绘问题（数据处理）

• 签名校验失败问题

---

关卡一：配置环境

• 1.安装CLI命令行工具

在此之前要确保Node.js >= 6.9.4

$ npm install -g weex-dingtalk-cli

• 2.创建一个钉钉微应用新项目

$ dingtalk init webpack-simple dingding

过程中可能会遇到这个错误
⠹ install node modules dingtalk-cli · Error: npm install fail

我们只需要进入刚刚创建的dingding文件夹

$ cnpm install

前提是，npm的镜像已经配置成taobao镜像了

• 3.运行访问Weex

$ npm run dev:weex

把这个地址
http://localhost:8089/weex-bundle-dev.js?dd_wx_tpl=http://localhost:8089/weex-bundle-dev.js
丢到钉钉客户端IM聊天界面中，同时要将localhost替换成你本机的IP地址(端口号默认是8089)。

---

关卡二：代码编写

• 1.目录结构

目录结构.png

1. components 可以共享的组件放在这里
2. container 如果你使用了vue-router，那么需要使用这里的共用容器
3. lib 可以共享的函数.js文件放在这里
4. pages 真正的页面放在这里
5. platforms 平台相关的入口放在这里

然后就可以在pages->home->index.vue里愉快的写代码了。
具体详情，请参考Weex官方文档和钉钉Weex微应用官方文档。
Weex使用的语法是基于Vue的，语法的使用请移步参考vue官方教程。

---

关卡三：界面跳转传参

我使用的是用vue-router进行页面管理跳转及传参。

• 1.配置路由

在container中创建一个router.js文件

import VueRouter from 'vue-router';
import dingtalk from 'weex-dingtalk';
import journey from 'weex-dingtalk-journey';
import { toast,setLeft } from '../lib/util.js';
import detailPage from '../pages/detail/index.vue';
import HomePage from '../pages/home/index.vue';

const routes = [
  {
    path:'/',
    name: 'home',
    component: HomePage
  },
  {
    path: '/detail',
    name: 'detail',
    component: detailPage
  }
];

dingtalk.error(function(err){
  console.log(JSON.stringify(err));
  toast('Error : ' + JSON.stringify(err));
});

const { env } = journey;

export default function Router(Vue){
  Vue.use(VueRouter);
  const router = new VueRouter({
    routes: routes
  });

  const left = {
    show: true,
    control: true,
    text: '返回'
  }

  const backHandler = function(e){
    if (env.isWeb){
      e.preventDefault();
    }
    router.go(-1);
  }

  setLeft(left, backHandler);
  return {
    router
  }
}

• 2.使用路由跳转并传参

需要指定界面名称和参数，界面名称是在路由管理里配置好的

doClick (index){
                var self = this;
                var data = self.list[index];
                this.$router.push({name:'detail',params:{data: data}});
            }

相对之下，要在下一个界面接收参数

 export default {
        name: 'detail',
        data (){
            return {
                data: ''
            }
        },
      mounted (){
            this.data = this.$route.params.data;
        }
}

---

关卡四：weex-bundle.js热更新（缓存处理）

• 1.代码打包

# build vue web release 环境
$ npm run build:web

# 启动 weex release 环境
$ npm run build:weex

# 编译weex和web环境下所需要的资源，这是可以正式部署的静态资源
$ npm run build

• 2.部署到服务器

把dist文件夹里面打包好的文件，部署到服务器上，我是用Node搭建的http-server服务

$ npm install http-server -g

Windows下使用：在站点目录下开启命令行输入（端口号自行指定）

http-server -p 8888

然后，把地址（localhost改成服务器的地址，corpId改成你的企业id）
http://localhost:8888/?dd_wx_tpl=https://localhost:8888/weex-bundle.js&corpId=ding92f3ce1bc64e3e5b35c2f4657eb6378f#/
配置到企业工作台的自建应用。

• 3.weex-bundle.js热更新

上面都搞好了后，终于大功告成。然而在下次更新js文件时，发现明明都已经改掉的代码，在钉钉上还是没有任何改变。此时，只需要点开我->设置->通用->清理缓存，就好了，但是，这样只是缓兵之计。

解决方法：修改http缓存策略

通过http头信息设置Cache-Control : no-cache来实现。

钉钉Weex微应用采用的是加载weex-bundle.js文件实现的，就是意味着我们可以通过http头信息设置E-Tag结合Cache-Control来实现缓存策略。
最终效果就是，index.vue -> index.js，第一次读取加载index.js是从网络下载下来并且保存到本地，第二次加载index.js是直接加载的保存到本地的 index.js文件，当线上index.vue被修改时，index.vue -> index.js，第三次加载index.js时根据缓存策略会知道线上index.js 已经和本地index.js 有差异，于是重新下载index.js到本地并加载(参考HTTP缓存这篇文章)。

---

关卡五：界面返回重绘问题（数据处理）

在开发时，我遇到从第二个界面回到第一个界面时，第一个界面会重新绘制，不会像手机app中会把第一个界面在内存中存下来。
我的解决方法是把第一个界面的交互数据存储下来，界面返回时再重新读取绘制界面。

• 1.数据存储(封装的方法)

// 存储数据
export function setItem (name,val){
  dingtalk.ready(function(){
    dingtalk.apis.util.domainStorage.setItem({
      name: name,
      value: JSON.stringify(val)
    });
  });
}

调用

setItem('data', this.data);

• 2.获取数据

// 获取存储数据
export function getItem (name,cb){
    const date = new Date();
    dingtalk.ready(function(){
        dingtalk.apis.util.domainStorage.getItem({
            name: name,
            onSuccess (res){
                const value = res.value;
                if (!value){
                    if (typeof cb === 'function'){
                        cb(1,value);
                    }
                    return;
                }
                if (typeof cb === 'function'){
                    try {
                        let item = JSON.parse(value);
                        cb(null, item);
                    }catch(e){
                        cb(e,res);
                    }
                }
            }
        });
    });
}

调用

getItem('data', (err,res) => {
                this.data = res;
            });

• 3.删除数据

// 删除存储数据
export function removeItem (name){
  dingtalk.ready(function(){
    dingtalk.apis.util.domainStorage.removeItem({
      name: name
    });
  });
}

调用

removeItem('data');

• 4.微应用退出时删除数据

重写左侧返回按钮

export function setLeft(cb){
    dingtalk.ready(function(){
        const dd = dingtalk.apis;
        dd.biz.navigation.setLeft({
            show: true,
            control: true,
            text: '返回',
            android: true
        });
        dingtalk.on('goBack',cb);
    });
}

调用（用type判断界面是从哪里返回的）

var self = this;
const cb = function(){
                if (self.type == '1') {
                    dingtalk.ready(function () {
                        const dd = dingtalk.apis;
                        dd.biz.navigation.close({
                            onSuccess: function (result) {
                                removeItem('data');
                            },
                            onFail: function (err) {
                            }
                        });
                    });
                }
            };
            setLeft(cb);

---

关卡六：签名校验失败问题

在调用钉钉提供的API的时候，有时会遇到签名校验失败的问题，如图：

签名校验失败图.png

我遇到的情况是在实现免登的时候和调用需要鉴权的API的时候出现的。

解决方法：把服务端调用钉钉API中的回调域名，改成签名校验失败图中url的参数：http://192.168.22.3:8089/weex-bundle-dev.js

---

如果有其他问题，可以参考钉钉官方给出的demo。
还可以参考一位前辈的《可能是史上最全的weex踩坑攻略》。