>>>Link Start!

LinkStart.jpg

目錄

• 配置環(huán)境

• 代碼編寫

• 界面跳轉(zhuǎn)傳參

• weex-bundle.js熱更新（緩存處理）

• 界面返回重繪問題（數(shù)據(jù)處理）

• 簽名校驗(yàn)失敗問題

關(guān)卡一：配置環(huán)境

• 1.安裝CLI命令行工具

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

$ npm install -g weex-dingtalk-cli

• 2.創(chuàng)建一個(gè)釘釘微應(yīng)用新項(xiàng)目

$ dingtalk init webpack-simple dingding

過程中可能會(huì)遇到這個(gè)錯(cuò)誤
? install node modules dingtalk-cli · Error: npm install fail

我們只需要進(jìn)入剛剛創(chuàng)建的dingding文件夾

$ cnpm install

前提是，npm的鏡像已經(jīng)配置成taobao鏡像了

• 3.運(yùn)行訪問Weex

$ npm run dev:weex

把這個(gè)地址
http://localhost:8089/weex-bundle-dev.js?dd_wx_tpl=http://localhost:8089/weex-bundle-dev.js
丟到釘釘客戶端IM聊天界面中，同時(shí)要將localhost替換成你本機(jī)的IP地址(端口號(hào)默認(rèn)是8089)。

關(guān)卡二：代碼編寫

• 1.目錄結(jié)構(gòu)

目錄結(jié)構(gòu).png

1. components 可以共享的組件放在這里
2. container 如果你使用了vue-router，那么需要使用這里的共用容器
3. lib 可以共享的函數(shù).js文件放在這里
4. pages 真正的頁面放在這里
5. platforms 平臺(tái)相關(guān)的入口放在這里

然后就可以在pages->home->index.vue里愉快的寫代碼了。
具體詳情，請(qǐng)參考Weex官方文檔和釘釘Weex微應(yīng)用官方文檔。
Weex使用的語法是基于Vue的，語法的使用請(qǐng)移步參考vue官方教程。

關(guān)卡三：界面跳轉(zhuǎn)傳參

我使用的是用vue-router進(jìn)行頁面管理跳轉(zhuǎn)及傳參。

• 1.配置路由

在container中創(chuàng)建一個(gè)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}});
            }

相對(duì)之下，要在下一個(gè)界面接收參數(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

# 啟動(dòng) 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下使用：在站點(diǎn)目錄下開啟命令行輸入（端口號(hào)自行指定）

http-server -p 8888

然后，把地址（localhost改成服務(wù)器的地址，corpId改成你的企業(yè)id）
http://localhost:8888/?dd_wx_tpl=https://localhost:8888/weex-bundle.js&corpId=ding92f3ce1bc64e3e5b35c2f4657eb6378f#/
配置到企業(yè)工作臺(tái)的自建應(yīng)用。

• 3.weex-bundle.js熱更新

上面都搞好了后，終于大功告成。然而在下次更新js文件時(shí)，發(fā)現(xiàn)明明都已經(jīng)改掉的代碼，在釘釘上還是沒有任何改變。此時(shí)，只需要點(diǎn)開我->設(shè)置->通用->清理緩存，就好了，但是，這樣只是緩兵之計(jì)。

解決方法：修改http緩存策略

通過http頭信息設(shè)置Cache-Control : no-cache來實(shí)現(xiàn)。

釘釘Weex微應(yīng)用采用的是加載weex-bundle.js文件實(shí)現(xiàn)的，就是意味著我們可以通過http頭信息設(shè)置E-Tag結(jié)合Cache-Control來實(shí)現(xiàn)緩存策略。
最終效果就是，index.vue -> index.js，第一次讀取加載index.js是從網(wǎng)絡(luò)下載下來并且保存到本地，第二次加載index.js是直接加載的保存到本地的 index.js文件，當(dāng)線上index.vue被修改時(shí)，index.vue -> index.js，第三次加載index.js時(shí)根據(jù)緩存策略會(huì)知道線上index.js 已經(jīng)和本地index.js 有差異，于是重新下載index.js到本地并加載(參考HTTP緩存這篇文章)。

關(guān)卡五：界面返回重繪問題（數(shù)據(jù)處理）

在開發(fā)時(shí)，我遇到從第二個(gè)界面回到第一個(gè)界面時(shí)，第一個(gè)界面會(huì)重新繪制，不會(huì)像手機(jī)app中會(huì)把第一個(gè)界面在內(nèi)存中存下來。
我的解決方法是把第一個(gè)界面的交互數(shù)據(jù)存儲(chǔ)下來，界面返回時(shí)再重新讀取繪制界面。

• 1.數(shù)據(jù)存儲(chǔ)(封裝的方法)

// 存儲(chǔ)數(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ù)

// 獲取存儲(chǔ)數(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ù)

// 刪除存儲(chǔ)數(shù)據(jù)
export function removeItem (name){
  dingtalk.ready(function(){
    dingtalk.apis.util.domainStorage.removeItem({
      name: name
    });
  });
}

調(diào)用

removeItem('data');

• 4.微應(yīng)用退出時(shí)刪除數(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)卡六：簽名校驗(yàn)失敗問題

在調(diào)用釘釘提供的API的時(shí)候，有時(shí)會(huì)遇到簽名校驗(yàn)失敗的問題，如圖：

簽名校驗(yàn)失敗圖.png

我遇到的情況是在實(shí)現(xiàn)免登的時(shí)候和調(diào)用需要鑒權(quán)的API的時(shí)候出現(xiàn)的。

解決方法：把服務(wù)端調(diào)用釘釘API中的回調(diào)域名，改成簽名校驗(yàn)失敗圖中url的參數(shù)：http://192.168.22.3:8089/weex-bundle-dev.js

如果有其他問題，可以參考釘釘官方給出的demo。
還可以參考一位前輩的《可能是史上最全的weex踩坑攻略》。