>>>Link Start!
![]()
LinkStart.jpg
目錄
-
配置環(huán)境
-
代碼編寫
-
界面跳轉(zhuǎn)傳參
-
weex-bundle.js熱更新（緩存處理）
-
界面返回重繪問題（數(shù)據(jù)處理）
-
簽名校驗失敗問題
關(guān)卡一：配置環(huán)境
-
1.安裝CLI命令行工具
在此之前要確保Node.js >= 6.9.4
$ npm install -g weex-dingtalk-cli
-
2.創(chuàng)建一個釘釘微應用新項目
$ dingtalk init webpack-simple dingding
過程中可能會遇到這個錯誤
? install node modules dingtalk-cli · Error: npm install fail
我們只需要進入剛剛創(chuàng)建的dingding文件夾
$ cnpm install
前提是并闲，npm的鏡像已經(jīng)配置成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)谷羞。
關(guān)卡二：代碼編寫
-
1.目錄結(jié)構(gòu)
- components 可以共享的組件放在這里
- container 如果你使用了vue-router帝火，那么需要使用這里的共用容器
- lib 可以共享的函數(shù).js文件放在這里
- pages 真正的頁面放在這里
- platforms 平臺相關(guān)的入口放在這里
然后就可以在pages->home->index.vue里愉快的寫代碼了。
具體詳情湃缎，請參考Weex官方文檔和釘釘Weex微應用官方文檔犀填。
Weex使用的語法是基于Vue的，語法的使用請移步參考vue官方教程嗓违。
關(guān)卡三：界面跳轉(zhuǎn)傳參
我使用的是用vue-router進行頁面管理跳轉(zhuǎn)及傳參九巡。
-
1.配置路由
在container中創(chuàng)建一個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.使用路由跳轉(zhuǎn)并傳參
需要指定界面名稱和參數(shù)，界面名稱是在路由管理里配置好的
doClick (index){
var self = this;
var data = self.list[index];
this.$router.push({name:'detail',params:{data: data}});
}
相對之下蹂季，要在下一個界面接收參數(shù)
export default {
name: 'detail',
data (){
return {
data: ''
}
},
mounted (){
this.data = this.$route.params.data;
}
}
關(guān)卡四：weex-bundle.js熱更新（緩存處理）
-
1.代碼打包
# build vue web release 環(huán)境
$ npm run build:web
# 啟動 weex release 環(huán)境
$ npm run build:weex
# 編譯weex和web環(huán)境下所需要的資源冕广，這是可以正式部署的靜態(tài)資源
$ npm run build
-
2.部署到服務(wù)器
把dist文件夾里面打包好的文件，部署到服務(wù)器上偿洁，我是用Node搭建的http-server服務(wù)
$ npm install http-server -g
Windows下使用：在站點目錄下開啟命令行輸入（端口號自行指定）
http-server -p 8888
然后撒汉，把地址（localhost改成服務(wù)器的地址，corpId改成你的企業(yè)id）
http://localhost:8888/?dd_wx_tpl=https://localhost:8888/weex-bundle.js&corpId=ding92f3ce1bc64e3e5b35c2f4657eb6378f#/
配置到企業(yè)工作臺的自建應用涕滋。
-
3.weex-bundle.js熱更新
上面都搞好了后睬辐，終于大功告成。然而在下次更新js文件時宾肺，發(fā)現(xiàn)明明都已經(jīng)改掉的代碼溯饵，在釘釘上還是沒有任何改變。此時爱榕，只需要點開我->設(shè)置->通用->清理緩存瓣喊，就好了，但是黔酥，這樣只是緩兵之計藻三。
解決方法：修改http緩存策略
通過http頭信息設(shè)置
Cache-Control : no-cache來實現(xiàn)堪澎。
釘釘Weex微應用采用的是加載weex-bundle.js文件實現(xiàn)的颠猴，就是意味著我們可以通過http頭信息設(shè)置E-Tag結(jié)合Cache-Control來實現(xiàn)緩存策略。
最終效果就是旺矾，index.vue -> index.js渣玲，第一次讀取加載index.js是從網(wǎng)絡(luò)下載下來并且保存到本地逗概，第二次加載index.js是直接加載的保存到本地的 index.js文件，當線上index.vue被修改時忘衍，index.vue -> index.js逾苫，第三次加載index.js時根據(jù)緩存策略會知道線上index.js 已經(jīng)和本地index.js 有差異卿城，于是重新下載index.js到本地并加載(參考HTTP緩存這篇文章)。
關(guān)卡五：界面返回重繪問題（數(shù)據(jù)處理）
在開發(fā)時铅搓，我遇到從第二個界面回到第一個界面時瑟押，第一個界面會重新繪制，不會像手機app中會把第一個界面在內(nèi)存中存下來星掰。
我的解決方法是把第一個界面的交互數(shù)據(jù)存儲下來多望，界面返回時再重新讀取繪制界面。
-
1.數(shù)據(jù)存儲(封裝的方法)
// 存儲數(shù)據(jù)
export function setItem (name,val){
dingtalk.ready(function(){
dingtalk.apis.util.domainStorage.setItem({
name: name,
value: JSON.stringify(val)
});
});
}
調(diào)用
setItem('data', this.data);
-
2.獲取數(shù)據(jù)
// 獲取存儲數(shù)據(jù)
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);
}
}
}
});
});
}
調(diào)用
getItem('data', (err,res) => {
this.data = res;
});
-
3.刪除數(shù)據(jù)
// 刪除存儲數(shù)據(jù)
export function removeItem (name){
dingtalk.ready(function(){
dingtalk.apis.util.domainStorage.removeItem({
name: name
});
});
}
調(diào)用
removeItem('data');
-
4.微應用退出時刪除數(shù)據(jù)
重寫左側(cè)返回按鈕
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);
});
}
調(diào)用（用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);
關(guān)卡六：簽名校驗失敗問題
在調(diào)用釘釘提供的API的時候氢烘，有時會遇到簽名校驗失敗的問題怀偷，如圖：
我遇到的情況是在實現(xiàn)免登的時候和調(diào)用需要鑒權(quán)的API的時候出現(xiàn)的。
解決方法：把服務(wù)端調(diào)用釘釘API中的回調(diào)域名播玖，改成簽名校驗失敗圖中url的參數(shù)：http://192.168.22.3:8089/weex-bundle-dev.js
如果有其他問題椎工，可以參考釘釘官方給出的demo。
還可以參考一位前輩的《可能是史上最全的weex踩坑攻略》黎棠。
