Vueに基づいて釘企業内部応用を開発する鑑権過程の実現
24742 ワード
筆者は以前の博文で釘企業の内部応用の鑑権過程の実現方式を紹介したことがあるが,当時フロントエンドはjqueryを選んだ.先週Vueを学び、簡易な釘企業の内部応用を開発してみました.実現過程を要約してまとめる.PS:筆者はまだWebpackツールを勉強していないため、本文はscriptタグを用いてvueを導入した.jsは,httpVueLoaderを用いて外部Vueコンポーネントを導入する.
index.html
index.js
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<script src="js/vue.2.6.11.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/httpVueLoader.js" type="text/javascript" charset="utf-8">script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/dingtalk.open.2.7.13.js" type="text/javascript" charset="utf-8">script>
<title>** title>
head>
<body>
<div id="assets">
<compMarkup v-if="userComp">compMarkup>
div>
<script src="js/index.js" type="text/javascript" charset="utf-8">script>
body>
index.js
var _config = null; //
var assets = new Vue({
el: "#assets",
data: {
loginddname: "", // （ ），
userComp:0 // ，
},
components: {
// httpVueLoader
'compMarkup':httpVueLoader("./components/compName.vue")
},
created(){
this.dingdingApi() //
},
methods:{
//
dingdingApi () {
var that =this;// this ， that
axios.get("yourUrl?url=" + location.href).then((rs) => {
_config = rs.data;// 。 ： axios key data ， jquery ajax 。 。 。
var jsapilist = [
'device.notification.alert', //
'device.notification.confirm', //
'biz.navigation.setTitle', //
'biz.navigation.quit', //
'biz.util.openModal', // （ ）
'biz.contact.complexPicker' //
] // jsapi
//1、
dd.config({
agentId: "your agentId",
corpId: "your corpId", // ， ID
timeStamp: _config.timestamp, // ，
nonceStr: 'abcdefg', // ，
signature: _config.signature, // ，
jsApiList: jsapilist // ， jsapi ， ： dd。
});
dd.error(function(err) { //
console.log(" error ");
console.log('dd error: ' + JSON.stringify(err));
})
//
dd.ready(function() {
//
dd.runtime.permission.requestAuthCode({
corpId: _config.corpId,
onSuccess: function(result) {
_config.authCode = result.code; //
//
axios.get("yourUrl?authCode="+_config.authCode+"&access_token="+_config.access_token.access_token).then((rs)=>{
// ，
if(rs.data.code!=0)
{
dd.device.notification.alert({
message: rs.data.msg,
title: " ",//
buttonName: " ",
onSuccess : function() {
// “ ” ，
dd.biz.navigation.close({
onSuccess : function(result) {},
onFail : function(err) {}
})
},
onFail : function(err) {}
});
}
else
{
that.loginddname=rs.data.data[0].ddname;// ， data loginddname （ ）
if(rs.data.data[0].role==1) // ， userComp ，1 ，0 （ ）
{
that.userComp=1;
}
else
{
that.userComp=0;
}
}
})
}
})
})
})
}
}
})