文章目录
一、微信小程序
1. 获取信息用户信息
- 需要微信前端调用wx.login接口获取code。 然后再调用wx.getUserProfile接口获取用户的信息。
- 前端调用服务器接口,将获取到的code,以及encryptedData,和iv一起发送到后端。
- 服务器在解密encryptedData之前,需要调用微信接口获取sessionkey. 有了encryptedData才能解密。
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> (已废弃)
//此处调用登录 之后不需要再使用 open-type="getUserInfo"
wx.login({
success(response) {
if (response.code) {
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
//发起网络请求
let data = {
js_code: response.code,
iv: res.iv,
encryptedData: res.encryptedData,
}
//..调用后台接口
GetWxInfoAPI(data).then((result) => {
//...
})
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
2.支付
//例:
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) { },
fail (res) { }
})
3.分享
//微信小程序分享
onShareAppMessage: function (res) {
let url = `pages/index/index?chiefUsername=${wx.getStorageSync("userData").UserName}` //分享的路径
if (res.from == 'button' || res.from == 'menu') {
return {
path: url,//进入的路径
title: '',//title
imageUrl: "https://xxxxxx.com/images/shareImg.jpg",//img
}
}
}
4. 腾讯云小程序人脸核身
二、微信公众号
1.获取信息用户信息
/******
* 微信公众号 登录验证,需要用户自己授权
* redirect_uri 用户授权后的回调链接 只能是域名方式
* state 为了我们自己做校验用的,这个数当授权成功后微信会给我们传回来,使用随机数就可以
*/
function weiChatLogin(redirect_uri,state){
//回调链接一定要惊醒urlencode编码
redirect_uri=encodeURIComponent(redirect_uri);
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXX&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state="+state+"#wechat_redirect";
}
2.支付
//掉起微信支付
onBridgeReady(data) {
const that = this;
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": data.appId, //公众号名称,由商户传入
"timeStamp": data.timeStamp, //时间戳,自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式:
"paySign": data.paySign //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
console.log('支付成功')
that.$toast.success({
message: '支付成功!',
duration: 1000
});
that.love = false;
that.init()
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
console.log('支付过程中用户取消')
that.$toast.fail({
message: '支付过程中用户取消!',
duration: 1000
});
} else if (res.err_msg == "get_brand_wcpay_request:fail") {
console.log('支付失败')
that.$toast.fail({
message: '支付失败!',
duration: 1000
});
}
});
},
3. 分享(普通分享)
- 获取引入微信实例
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> //引入微信sdk
- 配置wx实例
//分享 //微信分享函数
var signature = {};
//此处通过自己的后台接口获取参数
$.ajax({
url: 'XXXX',
timeout: 10000, // 超时时间 10 秒
type: 'get',
data: {
url: window.location.href
},
async: false,
cache: false,
dataType: 'json',
success: function (data) {
console.log(data)
if (data.code == 200) {
console.log(data)
signature = data.data;
}
},
error: function (data) {
}
});
//配置微信实例
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: signature.appid, // 必填,公众号的唯一标识
timestamp: signature.timestamp, // 必填,生成签名的时间戳<?= $data['timestamp']?>
nonceStr: signature.noncestr,// 必填,生成签名的随机串<?= $data['noncestr']?>
signature: signature.signature,// 必填,签名<?= $data['signature']?>
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']// 必填,需要使用的JS接口列表
});
wx.ready(function () {
const {
title, // 大标题
desc, //小标题
link, // url
imgUrl, // 图片
} = shareOptions
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, //描述
link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function () { // 设置成功
console.log("自定义“分享给朋友");
},
});
wx.onMenuShareTimeline({
title, // 分享标题
desc, //描述
link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl, // 分享图标, // 分享图标
success: function () {
console.log("自定义“分享给朋友圈");
},
});
});
4.分享(vue单页面 配置分享)
- 在需要分享的页面路由 配置
{
path: '/xxx', //
name: 'xxx',
meta: {
shareInfor: {
title: '自定义标题',
imgUrl: '自定义图标',
desc: '自定义描述',
link: '自定义link'
}
},
component: () =>
import('@/views/xxx')
},
- wxShare.js
//vue npm i weixin-js-sdk
//初始化微信配置信息;
import wx from "weixin-js-sdk";
var homeUrl = ''
if (process.env.VUE_APP_URL !== 'https://xxxxx/') { // 通过环境变量修改homeUrl
homeUrl = "https://t-xxxxxx/#/"
} else {
homeUrl = "https://xxxxxxx/#/"
}
export const initwxConfig = (configoptions = {}, shareOptions = {}) => {
const {
appId, // 必填,公众号的唯一标
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名
} = configoptions
wx.config({
debug: false,
appId,
timestamp,
nonceStr,
signature,
jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"],
})
wx.ready(function () {
const {
title, // 大标题
desc, //小标题
link, // url
imgUrl, // 图片
} = shareOptions
wx.onMenuShareAppMessage({
title: title ? title : '默认通用标题', // 分享标题
desc: desc ? desc : '默认描述', //描述
link: link ? link : homeUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl ? imgUrl : 'http://xxxxxxx 默认分享图标链接', // 分享图标
success: function () { // 设置成功
console.log("自定义“分享给朋友");
},
});
wx.onMenuShareTimeline({
title: title ? title : '默认通用标题', // 分享标题
desc: desc ? desc : '默认描述', //描述
link: link ? link : homeUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl ? imgUrl : 'http://img.zk-mall.net/prod/logo.png?x-oss-process=style/b3', // 分享图标, // 分享图标
success: function () {
console.log("自定义“分享给朋友圈");
},
});
});
// console.log(configoptions, shareOptions, "分享配置")
wx.error(function () {
console.log("通过error接口0000处理失败验证"); // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
}
- 在单页面中使用
import { initwxConfig } from "@/common/js/wxShare";//引入 initwxConfig
import { GetWeixinShareInfoAPI } from "@/api/other";//后端接口返回的配置
//methods
wxShareInit() {
if (window.localStorage.getItem("isWeiXin") == "true") {
if (meta && meta.shareInfor) {
//后端接口 为了获取配置参数
GetWeixinShareInfoAPI({ url: `${window.location.href}` }, "get").then(
(res) => {
let configoptions = res.data; //配置参数
let shareOptions = meta.shareInfor; //分享参数 此处可以重新定义 shareInfor
//let shareOptions= {
//title: "重新定义的标题",
//imgUrl: "重新定义的图标",
//desc: "重新定义的描述",
//link: "重新定义的分享链接 例如 可以加一下参数进去", //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//};
initwxConfig(configoptions, shareOptions); //初始化微信分享
}
);
} else {
initwxConfig({}, {}); //初始化微信分享
}
}
}
//mouted 或者在请求完数据之后 配置
this.wxShareInit()
5. 人脸识别
三、支付宝小程序
1. 获取信息用户信息
- 在小程序端获取 auth_code,目的是获取用户授权码
- 把第一步获取的授权码 auth_code 传到咱们自己的后台,也就是说后台需要编写一个接口,方便小程序端的传入
var me = this;
my.getAuthCode({
scopes: 'auth_user', // 主动授权(弹框):auth_user,静默授权(不弹框):auth_base
success: (res) => {
if (res.authCode) {
// console.log(app.serverUrl + '/login/' + res.authCode);
// 调用自己的服务端接口,让服务端进行后端的授权认证
my.httpRequest({
url: app.serverUrl + '/login/' + res.authCode,
method: 'POST',
header:{
'content-type': 'application/json'
},
dataType: 'json',
success: (res) => {
// 授权成功并且服务器端登录成功
console.log(res);
me.setData({
userInfo: res.data.data
});
}
});
}
},
});
- 后台拿到这个 auth_code 之后,需要调用支付宝的授权平台,从而获取用户的唯一 token 以及 支付宝的userid,都是唯一的,调用的接口为 [alipay.system.oauth.token]
- 获取到userid后,判断一下这个userid是否在我们自己的数据库中存在,如果存在,直接获取信息,并且直接返回用户对象到前台;如果不存在,则需要从支付宝授权平台再一次去获取支付宝用户的信息。
- 调用 [alipay.user.info.share],获取用户信息,这个用户对象里包含了大量的用户真实信息
2.支付(此能力暂不支持个人账户)
3. 分享
// API-DEMO page/API/share/share.js
Page({
onShareAppMessage() {
return {
title: '分享 View 组件',
desc: 'View 组件很通用',
path: 'page/component/view/view',
};
},
});
//手动分享
//hmtl
<view>
<button type="primary" open-type="share">推荐给朋友</button>
</view>
4. 人脸识别
支付宝小程序之人脸识别
目前暂时调用无效
四、H5(支付宝相关的大部分功能个人用户 很多需要企业用户)
1. 获取信息用户信息
2.支付
3. 分享
- 选择系统通信录中某个联系人的电话。
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>//引入阿里jsapi
<button id="J_btn" class="btn btn-default">选择联系人电话</button>
<script>
var btn = document.querySelector('#J_btn');
btn.addEventListener('click', function(){
ap.choosePhoneContact(function(res){
ap.alert('姓名:' + res.name + '\n号码:' + res.mobile);
});
});
</script>
- 打开支付宝通讯录,选择一个或者多个支付宝联系人。
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> //引入阿里jsapi
<style>.output{ display:block; max-width: 100%; overflow: auto}</style>
<button id="J_btn" class="btn btn-default">选择支付宝联系人</button>
<pre id="J_output" class="output"></pre>
<script>
var btn = document.querySelector('#J_btn');
var output = document.querySelector('#J_output');
btn.addEventListener('click', function(){
ap.chooseAlipayContact(2, function(res){
output.innerHTML = JSON.stringify(res, undefined, ' ');
});
});
</script>
4. 人脸识别
总结
大致流程