>>>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.目录结构
- components 可以共享的组件放在这里
- container 如果你使用了vue-router，那么需要使用这里的共用容器
- lib 可以共享的函数.js文件放在这里
- pages 真正的页面放在这里
- 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的时候，有时会遇到签名校验失败的问题，如图：
我遇到的情况是在实现免登的时候和调用需要鉴权的API的时候出现的。
解决方法：把服务端调用钉钉API中的回调域名，改成签名校验失败图中url的参数：http://192.168.22.3:8089/weex-bundle-dev.js
如果有其他问题，可以参考钉钉官方给出的demo。
还可以参考一位前辈的《可能是史上最全的weex踩坑攻略》。
