uniapp公众号跳转小程序支付按钮不显示点击没反应的各种坑解决

最好：'wx-open-subscribe', 'wx-open-launch-weapp','updateTimelineShareData', 'chooseImage', 'previewImage'上面几个问题解决了基本就显示按钮和可以点击了，还有些小问题就是可以通过vconsole查看，注入配置的时候可以通过debug:true来看，这都小事。特别注意的是，如果页面有参数获取签名的网址

hyswl666

2670人浏览 · 2022-08-13 15:20:41

hyswl666 · 2022-08-13 15:20:41 发布

这两天用uniapp做公众号，需要跳转到小程序进行支付，网上搜了下使用wx-open-launch-weapp 但是坑太多了，几乎走了一遍。

下面从大到小列出来和解决方案，最后列出我的代码

一，按钮为啥不显示咋解决

官方的demo里 button，一定要定义一个样式：display:block; 或者直接使用图片<image></image>

二，jweixin版本一定是1.6

三，uniapp 使用什么标签？ 必须是：<script type="text/wxtag-template"> 不能是template 那个是h5的

四，签名失败的坑

官方的php里获取域名是动态获取的当前域名，应该是前端请求页面的域名，不是接口的域名。

特别注意的是，如果页面有参数获取签名的网址也需要有。最好是前台传过去当前网址，这个可以通过debug:true来看到错误信息。

五，公众号一定是认证过的服务号不能是测试号

六，测试一定要打包上线在手机里测试，其他不行

七，jsApiList里面需要有啥，最好：'wx-open-subscribe', 'wx-open-launch-weapp','updateTimelineShareData', 'chooseImage', 'previewImage'

上面几个问题解决了基本就显示按钮和可以点击了，还有些小问题就是可以通过vconsole查看，注入配置的时候可以通过debug:true来看，这都小事。

下面是我的前后端代码

<template>
	<view class="container">
	<wx-open-launch-weapp
	  id="launch-btn"
	  username="gh_########"
	  :path="path"
	>
	  <script type="text/wxtag-template">
		  <style>
			  .btn{
				  display:block;
				  border:none;
				  width:100%;
				  height:50px;
				  color:#ffffff;
				  font-weight:bold;
				  
				  background-color:#07c261;
				  margin: 0 auto;
			  }
		  </style>
		 <button class="btn"  >立即支付</button>
	  </script>
	</wx-open-launch-weapp> 
</view>
 </template>
<script>
	  //import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
 
	export default {
		data() {
			return { 
				path: 'pages/article/index?ordersn=2323223&paymoney=2'
			}
		},
		onLoad(option) {
		    
            //let vConsole = new VConsole(); // 初始化 
		     
			this.path='pages/article/index?ordersn='+option.ordersn+'&paymoney='+option.paymoney;
			var jweixin = require('jweixin-module');
		       //最好是在这里把当前网址传给后台进行签名
			uni.request({
				url: 'https://########/getsdk/index.php',  
				success: result2 => { 
						 jweixin.config({
						 	debug: false,
						 	appId: result2.data.appId,
						 	timestamp: result2.data.timestamp,
						 	nonceStr: result2.data.nonceStr,
						 	signature: result2.data.signature,
						 	// 需要使用的JS接口列表
						 	jsApiList:['wx-open-subscribe', 'wx-open-launch-weapp','updateTimelineShareData', 'chooseImage', 'previewImage'],
						 	// 开放标签，跳转小程序时必填
						 	openTagList: ['wx-open-launch-weapp']
						 });
						 
						 jweixin.ready(function() { 
						         console.log("..1...."); 
						                 
						 });
						 
						 jweixin.error(function(res) {
						 	 console.log("..2....",JSON.stringify(res));
						 });
						 
						 
					} ,
					fail: result3 => {
						uni.showToast({
						 title:" reques terr" 
						});
					}
				});
				
				
			
		},
		methods: { 
			// 监听跳转
				sucFun() {
					console.log('跳转');
				},
				// 监听错误
				errFun() {
					console.log('失败');
				}
		}
	}
</script>
 
 

<style>
.container {
		 
			display: block;
			box-sizing: border-box;
			padding: 30px;
			width: 100%;
			background-color: red;
		 
	}
</style>