【uniapp】小程序开发4：微信小程序支付、h5跳转小程序

一、微信小程序支付

// #ifdef MP-WEIXIN
isMpweixin=true
// 调用微信官方支付接口弹出付款界面
wx.requestPayment({
  appId: payData.appId,   
  timeStamp: payData.timeStamp,  //后端返回的时间戳
  nonceStr:  payData.nonceStr,   //后端返回的随机字符串
  package:  payData.package, //后端返回的prepay_id
  signType: payData.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
  paySign:  payData.paySign,  //后端返回的签名
  success (res) {
	console.log('用户支付扣款成功', res)
	uni.showToast({
		icon:'success',
		title:'支付成功',
		complete:()=>{
			try {
				setTimeout(()=>{
					uni.navigateTo({
						url:`/pages/success/index`
					})
					return;
				},1500)
			}catch(e){}
		}
	})
  },
  fail (res) { 
	console.log('用户支付扣款失败', res)
  }
 })
// #endif
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

二、h5跳转小程序

参考 微信网页开发 / 开放标签说明文档 (qq.com)

通过微信的开发标签wx-open-launch-weapp可以在服务号上面直接跳转到小程序

跳转小程序：wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。

开放对象

1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

使用步骤

微信开放标签使用步骤与微信JS-SDK类似，也需要引入JS文件等步骤。如果是公众号身份的网页，需要绑定安全域名，如果是使用小程序云开发静态网站托管的小程序网页，则不需绑定安全域名即可直接使用（即跳过下面"步骤一：绑定安全域名"）。

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

2. 引入JS文件

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

备注：支持使用 AMD/CMD 标准模块加载方法加载。

3. 通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

签名算法见JS-SDK说明文档的附录，所有开放标签列表见文末的附录1。

使用示例

<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  script>
wx-open-launch-weapp>

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });

	//通过接口拿到appId,nonceStr,signature,timestamp
	wx.config({
		debug: false,
		appId,
		timestamp,
		nonceStr,
		signature,
		jsApiList: ['chooseImage', 'previewImage'], //必写，否则不显示
		openTagList: ['wx-open-launch-weapp']//必写，否则不显示
	});

script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33