微信开发-微信分享和支付模块代码记录

文章目录

微信H5开发【分享模块】
- 写在前面
- 准备工作
- - 微信后台配置
  - 获取配置微信环境的参数
  - 引入weixin-js-sdk
  - 分享配置源码
  - 启动以后日志显示OK即可
  - 注意事项
微信H5开发支付模块
- 需要知道的点
- - 步骤解读
  - 获取用户code源码分享
  - 支付源码分享
  - 如何使用该js
  - - 引入mixins
    - 进行统一下单
- 写到后面
- - 文档链接

微信H5开发【分享模块】

写在前面

微信的支付和分享模块都是需要使用微信内置的类，需要在微信app中使用的，所以如果脱离了微信的环境，很大程度是不可以进行使用的，这一点是需要知悉的，分享和支付基本上都是固定的一个代码写法！

准备工作

微信后台配置

js安全域名配置

PS:如果这里不配置，是没办法进行自定义分享的，分享出去也只是当前页面的一个链接地址，是没有对应的icon和链接隐藏的！

获取配置微信环境的参数

PS：这里说一下过程：后端需要提供一个接口，我们给他当前页面的host地址，也就是我们上面js配置的安全域名地址，然后该接口返回对应的微信环境配置的参数，供我们初始化微信环境使用！

引入weixin-js-sdk

let jweixin = require('weixin-js-sdk')

分享配置源码

    //accessToken是我们业务需要，不是微信需要，根据自己的业务需求进行即可 isHiddenLoading:true是我配置的请求不进行loading效果展示的字段，这里根据自己的配置进行configPay() {var that = thisrequest({url: api.configInit + "?webUrl=" + location.href.split("#")[0] + "&accessToken=''",method: 'post',isHiddenLoading:true}).then(res => {var data = res.datajweixin.config({debug: !true,timestamp: data.timeStamp,appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timeStamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，这里需要啥就写啥});})let configIn = {title: '这是你的title',page: '/',desc: '这是你的描述信息',icon: '这是你的icon，只接受线上图片的icon，尽量不要使用本地的静态文件'}jweixin.ready(function() {console.log("开始准备分享配置...")// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致jweixin.updateAppMessageShareData({title: configIn.title, // 分享标题desc: configIn.desc, // 分享描述link: location.origin + location.pathname + '#', imgUrl: configIn.icon, // 分享图标success: function() {}})// 自定义“分享到朋友圈”jweixin.updateTimelineShareData({title: configIn.title, link: location.origin + location.pathname + '#' + configIn.page,desc: configIn.desc, imgUrl: configIn.icon, success: function() {}})//老版本分享好友是这个写法jweixin.onMenuShareAppMessage({title: configIn.title, desc: configIn.desc, link: location.origin + location.pathname + '#', imgUrl: configIn.icon, success: function() {}})});}

这里可以将上述代码写到一个js文件中，然后进行全局加载即可！也就是在main.js中引入即可

启动以后日志显示OK即可

注意事项

1、微信是不支持直接链接分享的，也就是如果你是别人给你的链接直接点开分享是不可以的
2、微信支持点击收藏以后分享出去
3、微信支持从公众号直接分享出去

微信H5开发支付模块

需要知道的点

1、这里的支付指的是微信的内部浏览器支付也就是微信所说的jsapi支付，不是微信外部的浏览器h5支付
2、jsapi支付是需要openID的，但是微信外部的h5支付是不需要的
3、网上的授权域名不要忘记配置，同上

步骤解读

页面第一步是获取用户的code—》根据code获取用户的openID----〉根据openID进行处理支付相应的逻辑

获取用户code源码分享

mounted() {this.code = this.GetQueryString('code')if (this.code) {//将code发送给后端，供他获取openIDthis.sendCode(this.code)}else{//获取codethis.getCode()}},
methods:{getCode() {this.code = ''var local = window.location.href.split("#")[0]var appid = getApp().globalData.appid //这里是公众号的appid，写到一个全局的参数里面了this.code = this.GetQueryString('code')if (this.code == null || this.code === '') {window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`} else {// this.sendCode(this.code)}},/*** @param {Object} name 获取url中的参数*/GetQueryString(name) {console.log(name)var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return decodeURI(r[2]);return null;},//将code给后端sendCode(code) {let that = thisrequest({url: api.getOpenIdApi + "?code=" + code,method: "get",}).then(res => {console.log(res)if (res.success) {// that.tipToast("获取openId成功")} else {// that.tipToast("获取openId失败")}}).catch(err => {console.log(err)// that.tipToast("获取openId失败===》")})},}

ps:sendCode将code通过接口给到后端，后端会将openID返回给你，这里处理的时候，你可以不进行存储openID，因为你后面也可以不进行传输openID，这个后端通过你给的code进行openID的获取，获取到了就可以，至于你存还是他存都无所谓，但是尽量是后端进行存储，因为openID是用户的唯一凭证，尽量不要放到前端！到这里支付前期的openID准备工作就结束了！

支付源码分享

/*** @Description: 工具类mixins* @author:clearlove* @param * @return * @createTime: 1/7/2022, 3:00:33 PM*/
import {api
} from '@/utils/apis'
import {request
} from '@/utils/request.js'
export const pay = {data() {return {}},methods: {//根据openId获取支付参数_createOrder(params) {let that = thisuni.setStorageSync('orderNo', params.orderNo)request({url: api.h5Pay,method: "post",data: {totalAmount: params.orderAmount,description: params.orderContent,outTradeNo: params.orderNo,attach: "",openId: ""},}).then((res) => {if (res.success) {let params = {appId: res.data.appId ? res.data.appId : "",timeStamp: res.data.timeStamp ?res.data.timeStamp.toString() : "",nonceStr: res.data.nonceStr ?res.data.nonceStr : "",package: res.data.pkg ? res.data.pkg : "",signType: res.data.signType ?res.data.signType : "",paySign: res.data.paySign ? res.data.paySign : "",};that.payWechart(params)} else {//获取参数失败}}).catch((err) => {console.log(err);});},/*** @param {Object} params 微信内部H5支付*/payWechart(params) {let that = thisWeixinJSBridge.invoke('getBrandWCPayRequest', params,function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {uni.navigateTo({url:'/pages/activity/success'})} else if (res.err_msg == "get_brand_wcpay_request:cancel") {uni.navigateTo({url:'/pages/activity/cancel'})} else {uni.navigateTo({url:'/pages/activity/error'})}})},}
}

PS:知道有人看完以后会骂我，说写的什么玩意，也没说怎么用，也没说参数，这里说一下，上面这一段代码是封装的微信支付的功能，封装在mixins里面的，也就是说我们使用的时候需要的过程是下面这样的

如何使用该js

引入mixins

import { pay } from '@/mixins/pay.js'
mixins: [utils, pay],
//这个是vue的固定写法，引入mixins

进行统一下单

comfirmPay() {//唤醒支付let params = {orderNo: JSON.parse(uni.getStorageSync('payParams')).orderNo, orderContent: JSON.parse(uni.getStorageSync('payParams')).orderContent,totalAmount: JSON.parse(uni.getStorageSync('payParams')).orderAmount }this._createOrder(params)},

ps：这里的写法也不是固定的，因为统一下单的接口是你们后端提供的，他需要什么参数你对应进行更改自己需要的参数即可，更改以后在mixins的pay.js中进行对应的调整，_createOrder这个函数就是上面pay.js中写的第一个函数，他的一个过程是统一下单（后端的接口）----》获取下单返回参数（微信拉起支付所需要的appid和验证签名等参数）—〉拉起微信支付——》判断用户是不是已经支付结束（这个是微信的固定写法，分为支付成功、失败、取消【也就是用户输入密码的时候点击了左上角的叉】）

写到后面

如果按照上述的过程还是出现了一些别的问题，可以下方留言进行讨论，微信的分享和支付还是不少坑的，但是总体对接下来难度确实是不大的，都是一些现成的api供我们使用的！小生不才，写的过程中有任何问题希望不要恶语相向，直接指出来，鄙人会及时修改！

文档链接

微信支付文档大全
jsapi支付
微信文档大全
微信支持功能文档大全

微信开发-微信分享和支付模块代码记录相关推荐

Android之调用微信登陆、分享、支付
转载:http://blog.csdn.net/lowprofile_coding/article/details/48086381 前言:用了微信sdk各种痛苦,感觉比qq sdk调用麻烦多了,回调 ...
微信开发 ━━ 微信商户v3微信支付H5方式开发之php篇
native方式开发纪要:<微信开发 ━━ 微信商户native方式支付v3开发之php篇> 一.流程流程是必须要弄懂的,弄懂之后遇到问题也能知道出在哪里. 官方说明:<H5支付统 ...
微信公众号分享、支付开发
为什么80%的码农都做不了架构师?>>> 现在这个'气候'就是这样子,要扛得住雾霾,写的了段子,修的了bug,过的了安检,实属不易,11月的天气就是雾霾并存驾驭健康的指示,等等 ...
native react 集成微信登录_react-native——微信登陆、分享、支付
-------android篇java 推荐使用react-native-wechat库,githup地址:github.com/yorkie/reac- 登陆,分享,收藏(v1.9.9+) 和支付的 ...
微信开发，分享部分出现的问题
最近开发微信活动的时候,发现分享到朋友圈和发送给朋友功能不稳定,时而有效时而无效,打开debug模式查看,发现多数报的数签名错误,仔细看了官方文档,最终问题出在ticket的缓存上. 1.签名: ur ...
微信开发-关于分享朋友朋友圈以及录音功能
前两天刚整理了一个关于微信开发录音功能的开发步骤,网上这方面资料已经很多了,写下来就当作自己的笔记. 一. 首先需要在微信公众号中进行配置(其中Token为自定义项) 二．在配置的域名文件夹下放置 ...
微信开发 ━━ 微信商户v3微信支付回调之php篇
开发内容都在这里: 微信支付API v3 证书和回调报文解密在微信支付时提供一个回调地址,支付完成后微信会向这个回调地址发送一个json格式的报文,将报文内容解密后获取订单号等数据报文内容: {& ...
微信开发 ━━ 微信支付之商户API证书获得
微信开发需要用到商户平台密钥,可用于生成签名等工作.操作时跟着提示一步一步走就行了,里面下载的最新软件链接都有. 进入商户平台 => 账户中心 => API安全 => API证书 = ...
微信php开发用户分组,asp.net微信开发用户分组管理的示例代码
这篇文章主要介绍了asp.net微信开发中有关用户分组管理的相关内容,需要的朋友可以参考下上一篇已讲解到新建用户分组,移动用户到分组的功能,这一章主要讲解修改分组名称和删除分组直接上代码,废话不多 ...