uniapp 小程序 h5登录、支付、分享、相关授权

小程序登录

<button :loading="loading" class="delButtonStyle confirm" open-type="getUserInfo" @getuserinfo="getuserinfo"
					 withCredentials="true" lang="zh_CN">微信登录</button>

// 小程序登录
getuserinfo() {
		this.loading = true
		let that = this
		// 获取用户名  获取性别 获取头像 获取js_code去换取后台返回的openID
		uni.login({
			provider: 'weixin',
			success: (loginRes) => {
				let js_code = loginRes.code; //js_code可以给后台获取unionID或openID作为用户标识
				// 获取用户信息
				uni.getUserInfo({
					success: (infoRes) => {
						//infoRes里面有用户信息需要的话可以取一下
						let username = infoRes.userInfo.nickName; //用户名
						let gender = infoRes.userInfo.gender; //用户性别
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						// 判断是否授权
						uni.getSetting({
							success: (res) => {
								if (!res.authSetting['scope.userInfo']) {
									//这里调用授权
								} else {
									//用户已经授权过了
									// 弹出正在登录的弹框
									uni.showLoading({
										mask: true,
										title: '正在登录···',
										complete: () => {}
									});
									// 判断已授权调取接口并获取openId
									let params = {
										code: js_code,
										iv: infoRes.iv,
										encryptedData: infoRes.encryptedData,
									}
									that.$http.post('mp_auth', params).
									then(function(response) {
										console.log('response', response)
										//这里只会在接口是成功状态返回
										that.$store.commit({
											type: 'login',
											userInfo: response
										})
										uni.showToast({
											title: '登录成功',
											icon: 'success',
											duration: 1000
										});
										that.loading = false
										that.$emit("loginSucess");
										that.hide()
									}).catch(function(error) {
										//这里只会在接口是失败状态返回，不需要去处理错误提示
										uni.showToast({
											title: error.errMsg,
											icon: 'none',
											duration: 1000
										});
										that.loading = false
									})
								}
							}
						})
					},
					fail: (res) => {

					}
				})
			},
			fail: (res) => {

			}
		})
	},

H5登录

<button :loading="loading" class="delButtonStyle confirm" withCredentials="true" lang="zh_CN" @click="arouseLogin">登录</button>

// h5登录
arouseLogin(){
	this.loading = true
	let redirect = window.location.href
	// 测试
	let appid = 'xxx'
	let redirect_uri = ''
	redirect_uri = encodeURIComponent(`${redirect}`)
	window.location.href = `xxxx`
}



// App.vue
if (getUrlParam('code') && getUrlParam('code') !== '') {
let params = {
	code: getUrlParam('code'),
	login_type: 'default'
}
this.$http.get('wechat/login', params).then(res => {
	store.commit({
		type: 'login',
		userInfo: res
	})
	uni.setStorageSync('userInfo', res)
}).catch(err => {
	console.log('err', err)
})
}

公众号登录api
可和后端协商具体操作方式，该项目是通过访问后端接口连接，后端将code返回到连接参数上，然后调用接口获取用户信息

小程序支付

小程序的支付比较简单，只要后端返回的参数没问题就行

uni.requestPayment({
	provider: 'wxpay',
	 timeStamp: response.timeStamp,
	 nonceStr: response.nonceStr,
	 package: response.package,
	 signType: 'MD5',
	 paySign: response.paySign,
	 success: function (res) {
		uni.hideLoading()
	 },
	 fail: function (err) {
		  uni.hideLoading()
	 }
	});

H5支付

h5支付比较繁琐，商户号那边需要配置准确，不然很容易出错
api文档

//wechat全局挂载的方法

_that.$wechat.pay(response,_that.type,_that.id, function(res){
	
	uni.showLoading({
		title: '加载中',
	});
	setTimeout(() => {
		uni.hideLoading();
	},2000)
	})



<-- wechat.js -->
pay: function(response, type, id, callback) {
	if (typeof WeixinJSBridge == "undefined") {
			if (document.addEventListener) {
				document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
			} else if (document.attachEvent) {
				document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
				document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
			}
		} else {
			this.onBridgeReady(response, type, id,function(res){
				callback('success')
			})
		}
	},

onBridgeReady: function(response, type, id, callback) {
		WeixinJSBridge.invoke(
			'getBrandWCPayRequest', response,
			function(res) {
				if (res.err_msg == "get_brand_wcpay_request:ok") {
					// layer.msg('支付成功')
					callback(res.err_msg)
				} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
				} else {
				}
			})
	},

小程序分享

//方法不是写在methods中
//需要分享的页面都需要配置分享
onShareAppMessage(res) {
	if (res.from === 'button') {// 来自页面内分享按钮
	  console.log(res.target)
	}
	return {
	  title: '',
	  path: ``,
	  imageUrl: ''
	}
  },

H5分享

if (this.$wechat && this.$wechat.isWechat()) {
		this.$wechat.share({
			title: this.dataList.title,
			desc: this.dataList.description,  
			img: 'http://img.sscai.club/click.jpeg'
		});  
	}

//在需要自定义分享的页面中调用  
	share: function(data, url) {
		//每次都需要重新初始化配置，才可以进行分享  
		this.initJssdkShare(function(signData) {
			jweixin.ready(function() {
				var shareData = {
					title: data && data.title ? data.title : signData.site_name,
					desc: data && data.desc ? data.desc : 'xxx',
					link: url,
					imgUrl: data && data.img ? data.img : 'https://file.amzcfo.com/ke/static/images/indexShare.png',
					success: function(res) {
						// 分享后的一些操作,比如分享统计等等
					},
					cancel: function(res) {
					}
				};
				//分享给朋友接口  
				jweixin.onMenuShareAppMessage(shareData);
				//分享到朋友圈接口  
				jweixin.onMenuShareTimeline(shareData);
			});
		}, url);
	},

//初始化sdk配置  

// jsdk有两个版本 两个版本内的jsApiList有区别 会导致出现问题
let jweixin = require('../components/jweixin-module/index.js');


	initJssdkShare: function(callback, url) {
		$http.get('wechat/jssdk', params).then(res => {
			jweixin.config({
				debug: false,
				appId: res.appId,
				timestamp: res.timestamp,
				nonceStr: res.nonceStr,
				signature: res.signature,
				jsApiList: res.jsApiList
			});
			//配置完成后，再执行分享等功能  
			if (callback) {
				callback(res);
			}
		}).catch(err => {
		})
	},

// 禁止分享页面需要额外设置

if(this.$wechat && this.$wechat.isWechat()){
	this.$wechat.closeShare()
}


// wechat.js 
// 在开发者工具中会报错，真机上正常
closeShare: function(){
		if (typeof WeixinJSBridge == "undefined"){
			    if( document.addEventListener ){
			        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
			    }else if (document.attachEvent){
			        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
			        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
			    }
		}else{
		   WeixinJSBridge.call('hideOptionMenu');
		}
	},

onBridgeReady: function(response, type, id, callback) {
		WeixinJSBridge.invoke(
			'getBrandWCPayRequest', response,
			function(res) {
				if (res.err_msg == "get_brand_wcpay_request:ok") {
					callback(res.err_msg)
				} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
				} else {
				}
			})
	},