vue 钉钉微应用的正确打开方式

使用vue开发钉钉微应用,下载钉钉开放平台官网提供的demo(vue-fed-oapage+nodejs-server-todo),地址:https://github.com/open-dingtalk/which-language-demo,会出现不能发送网络请求、页面空白等问题。需要解决项目中存在的问题才能成功运行。以下是修改的内容:


vue-fed-oapage

第一步:设置服务端地址,把lib/env.js下的
OPENAPIHOST = ‘’;
设置为OPENAPIHOST = ‘http://www.xxx.com:3000’;(注意:‘http://’千万不能省略,否则会报跨域错误)
第二步:修改ding-web.js

axios.interceptors.request.use(function(config){
// msgLog(config.url); (该方法的wpo未定义,导致报错,注释掉以后就可以调用axios方法)
return config;
},function (error) {
return Promise.reject(error);
});

第三步:修改index.html


(dingtal.js版本太低,鼠标停留在这里,输入“Alt+Enter”安装library)
第四步:修改src/components/complexAPP.vue
注释掉以下代码(因为模拟数据中val变量未定义,导致安卓手机上页面空白)


第五步:npm install
第六步:npm run dev
在浏览器的网址中添加corpId:?corpId=xxx(微应用的corpid)


nodejs-server-todo

第一步:将env.js 中的CorpID以及CorpSecret设置为自己的:

CorpID: 'xxx',
CorpSecret: 'xxx',

这两个值可以登录钉钉开放平台(http://open-dev.dingtalk.com),在应用开发/开发账号管理下查看。
第二步:修改app/request/getJsApiTicket.js

if (ticket){
if((ticket.timestamp - currentTime) > (200*100)){
return {
ticket: ticket.ticket, (原来是ticket:ticket)
errcode: 0
}
}else {
logger.log('warn', 'ticket cache overdue');
return sendTicketRequest();
}
}

第三步:npm install
第四步:npm run serve


【关于钉钉微应用开发以及本地电脑搭建公网服务器并部署微应用的完整过程可关注我的GitChat:使用本地服务器开发和部署可远程访问的钉钉企业微应用 】

你可能感兴趣的:(钉钉微应用)