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

2022-05-09 19:29:13 浏览数 (1)

文章目录
  • 微信H5开发【分享模块】
    • 写在前面
    • 准备工作
      • 微信后台配置
      • 获取配置微信环境的参数
      • 引入weixin-js-sdk
      • 分享配置源码
      • 启动以后日志显示OK即可
      • 注意事项

  • 微信H5开发支付模块
    • 需要知道的点
      • 步骤解读
      • 获取用户code源码分享
      • 支付源码分享
      • 如何使用该js
      • 引入mixins
      • 进行统一下单
    • 写到后面
      • 文档链接

微信H5开发【分享模块】

写在前面

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

准备工作
微信后台配置
  • js安全域名配置

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

获取配置微信环境的参数

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

引入weixin-js-sdk
代码语言：javascript复制
let jweixin = require('weixin-js-sdk')
分享配置源码
代码语言：javascript复制
    //accessToken是我们业务需要，不是微信需要，根据自己的业务需求进行即可 isHiddenLoading:true是我配置的请求不进行loading效果展示的字段，这里根据自己的配置进行
	configPay() {
		var that = this
		request({
			url: api.configInit   "?webUrl="   location.href.split("#")[0]   "&accessToken=''",
			method: 'post',
			isHiddenLoading:true
		}).then(res => {
			var data = res.data
			jweixin.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源码分享
代码语言：javascript复制
mounted() {
			this.code = this.GetQueryString('code')
			if (this.code) {
			    //将code发送给后端，供他获取openID
				this.sendCode(this.code)
			}else{
			    //获取code
			    this.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 = this
				request({
					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准备工作就结束了！

支付源码分享
代码语言：javascript复制
/**
 * @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 = this
			uni.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 = this
			WeixinJSBridge.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
代码语言：javascript复制
import { pay } from '@/mixins/pay.js'
mixins: [utils, pay],
//这个是vue的固定写法，引入mixins
进行统一下单
代码语言：javascript复制
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支付 微信文档大全 微信支持功能文档大全

微信 访问管理 编程算法 面向对象编程 html5

0 人点赞