900字范文 > 微信小程序微信公众号支付宝小程序H5（获取信息用户信息支付分享人脸识别）

微信小程序微信公众号支付宝小程序H5（获取信息用户信息支付分享人脸识别）

时间：2021-01-26 21:06:44

文章目录

一、微信小程序1. 获取信息用户信息2.支付3.分享4. 腾讯云小程序人脸核身二、微信公众号1.获取信息用户信息2.支付3. 分享（普通分享）4.分享（vue单页面配置分享）5. 人脸识别三、支付宝小程序1. 获取信息用户信息2.支付（此能力暂不支持个人账户）3. 分享4. 人脸识别四、H5(支付宝相关的大部分功能个人用户很多需要企业用户)1. 获取信息用户信息2.支付3. 分享4. 人脸识别总结

一、微信小程序

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: '',//titleimageUrl: "/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./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./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, // urlimgUrl, // 图片} = shareOptionswx.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/') {// 通过环境变量修改homeUrlhomeUrl = "https://t-xxxxxx/#/"} else {homeUrl = "https://xxxxxxx/#/"}export const initwxConfig = (configoptions = {}, shareOptions = {}) => {const {appId, // 必填，公众号的唯一标timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串signature, // 必填，签名} = configoptionswx.config({debug: false,appId,timestamp,nonceStr,signature,jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"],})wx.ready(function () {const {title, // 大标题desc, //小标题link, // urlimgUrl, // 图片} = shareOptionswx.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-/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";//后端接口返回的配置//methodswxShareInit() {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. 人脸识别

人脸识别H5接入文档

三、支付宝小程序

1. 获取信息用户信息

支付宝小程序获取用户授权

前后端具体实现步骤

在小程序端获取 auth_code，目的是获取用户授权码把第一步获取的授权码 auth_code 传到咱们自己的后台，也就是说后台需要编写一个接口，方便小程序端的传入

后台拿到这个 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.支付

支付宝H5支付

3. 分享

选择系统通信录中某个联系人的电话。

<script src="/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>

打开支付宝通讯录，选择一个或者多个支付宝联系人。