vue php企业站案例,vue 开发企业微信整合案例分析
本文实例讲述了vue 开发企业微信整合。分享给大家供大家参考,具体如下:
概述
手机端程序可以和企业微信进行整合,我们也可以使用企业微信JSSDK功能,实现一些原生的功能。
整合步骤
在整合之前需要阅读 整合步骤。
1.引入JSSDK
npm i -S weixin-js-sdk 这样就引入了微信sdk。
2.通过config接口注入权限验证配置
export function initWxConfig(vm){
var url=_baseUrl + "/initConfig.do";
var curUrl=location.href.split("#")[0];
var params="url="+curUrl;
vm.$ajax.post(url,params).then(res=>{
var data=res.data;
wx.config({
beta: true,
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'previewFile',
'getLocation',
]
});
wx.error(function (res) {
console.log("调用微信jsapi返回的状态:"+res.errMsg);
});
}).catch(function(error) {
//vm.errorToast(error,1000);
console.info(error);
})
}
服务端
initConfig.do 对应的代码。
这个微信需要绑定到一个应用中,我们需要定义应用的可信域名。
在企业微信登陆后,我们会记录一个应用的ID。
在服务端调用方法:
public static Map getWxConfig(String url,String corpId,String secret) throws Exception {
TokenModel tokenModel = TokenUtil.getEntTicket(corpId, secret);
String timestamp = Long.toString(System.currentTimeMillis() / 1000); // 必填,生成签名的时间戳
String nonceStr = UUID.randomUUID().toString(); // 必填,生成签名的随机串
String ticket=tokenModel.getToken();
String signature = "";
// 注意这里参数名必须全部小写,且必须有序
String sign = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr+ "×tamp=" + timestamp + "&url=" + url;
try {
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(sign.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
Map ret = new HashMap();
ret.put("appId", corpId);
ret.put("timestamp", timestamp);
ret.put("nonceStr", nonceStr);
ret.put("signature", signature);
return ret;
}
3.这个配置代码在应用启动时执行。
import {initWxConfig} from '@/assets/app.js';
4.使用相应的API
wxImage(type){
var self_=this;
wx.chooseImage({
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: [type], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
for(var i=0;i
wx.uploadImage({
localId: localIds[i], // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
var url=_baseUrl +"/wx/saveFile.do";
var params="mediaId=" + serverId;
self_.$ajax.post(url,params).then(res=>{
var data=res.data;
self_.handFile(data);
});
}
});
}
}
});
}
选择相册或者拍照。
希望本文所述对大家vue.js程序设计有所帮助。
vue php企业站案例,vue 开发企业微信整合案例分析相关推荐
- vue框架可以配合php做企业站,基于Vue和PHP打造前后端分离的通用管理系统(一)...
实用人群 适合小白入门,高手请绕行 技术栈 javascript vuejs webpack babel eslint nodejs axios php mysql redis git vagrant ...
- redis6 入门级教程,有整合案例,可以直接看整合案例,简单入门,直接上手
文章目录 简介 安装CentOS7 安装与使用 Key操作 String类型 List 集合 Set 集合 Hash 类型 Zset 集合 配置文件 发布和订阅 BitMap HyperLogLog ...
- Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录 需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录.相比传统的账号密码方便很多. 企业微信扫码登录流程文档:(链接) 对于前端来说,重要的是如何构造 ...
- vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载 功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...
- 解决:vue文本识别 “ \n ” 的换行问题(完整案例说明)
文章目录 vue文本识别 " \n " 的换行问题:(完整案例说明) 一.需求场景: 二.效果图对比: 三.实现方法: 1:通过 `css属性`实现 2:使用`v-html`实现 ...
- 【Vue】路由Router嵌套的实现及经典案例
Vue 中路由在使用的时候 嵌套 使用是非常频繁的,所以本文我们就来通过案例介绍一下嵌套路由的使用. Vue路由嵌套 先来准备一个普通的路由案例: <!DOCTYPE html> < ...
- vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案 参考文章: (1)vue 单页面(SPA) hist ...
- 简易版购物车案例(vue)
简易版购物车案例(vue) <div id="app"><div v-if="books.length"><table>&l ...
- 案例:后台管理案例(VUE路由案例)
目录 1. 素材下载: 2. 案例效果 3. 案例用到的知识点 4. 案例各个部分的实例代码(这里只提供修改的代码) 项目目录: 路由模块index.js部分: main.js部分: App.vue部 ...
最新文章
- R语言plotly可视化:使用PCA算法进行数据降维、使用plotly可视化随着主成分的增加解释的方差的量(plotting explained variance)
- 字符类型(Java)
- 域控制器活动目录之备份与恢复
- 最近在弄ionic3的时候遇到的一些问题(遇到就更新)
- Git之深入解析工作流程、常用命令与Reset模式分析
- 第五章 数组、矩阵与广义表
- linux cron读哪个文件,linux-管理cron作业创建的日志文件
- 地图定点图表联动_拿下这套地图组件,快人一步做出炫酷报表!
- php切割文件上传,php+ajax实现文件切割上传功能示例
- 同等质量下那种图片格式小_最实用的Window小工具合集,总有一款适合你!
- FastDFS点滴记录
- plsql developer无监听程序_252百战程序员022天
- django form 介绍
- php中传址调用,PHP中foreach引用传地址
- zerorpc java_Zerorpc 支持暴露多个远程Api接口类
- linux虚拟核显,PVE直通核显搭建虚拟Win10 HTPC避坑指南
- win10+tensorflow1.14+cuda10安装踩坑
- 如何完全清除微信聊天记录
- 读书笔记 - 机器学习实战 - 4 利用概率理论进行分类:朴素贝叶斯
- rtb中的win_广告:RTB
热门文章
- jca使用_使用JCA的密码学–提供者中的服务
- Java泛型中的多态
- Openshift:使用Java 8在Wildfly 8.2.0上构建Spring Boot应用程序
- Hazelcast入门指南第1部分
- Spring Batch作为Wildfly模块
- 在Spring MVC中使用多个属性文件
- 使用Guava的AbstractInvocationHandler正确完成代理
- Apache Camel –从头开始开发应用程序(第1部分/第2部分)
- 编码Java时的10个微妙的最佳实践
- IntelliJ IDEA:使用Google Guava生成equals,hashCode和toString