精华内容
下载资源
问答
  • 微信内H5跳转小程序

    2022-01-04 16:40:13
    微信跳转小程序 H5跳转小程序

    前期准备工作:
    1:H5必须依赖于服务号,(认证服务号)
    2:绑定安全域名(微信公众平台设置)
    3:IP白名单
    4:将小程序和H5公众号进行关联
    5:需要跳转的小程序页面path和原始ID
    注意点:
    1:页面path可以直接拼接参数 正常使用。
    2:原始ID不是appId 原始ID是gh开头的可以在小程序后台拿到
    上面流程在网上能找到很多相关资料,文章后面会挂上官方文档链接和我个人认为描述最全的一个文章链接

    页面需要引入文件http://res.wx.qq.com/open/js/jweixin-1.6.0.js

    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
     	<wx-open-launch-weapp
    	    id="launch-btn"
    	    username="gh_xxxxxx"
    	    :path=path
    	    style="height: 100%;width: 100%; display:block"
    	>
    	<script type="text/wxtag-template">
    		<style type="text/css">
    		.btn{width: 80%;}
    		</style>
    		<button class="btn" :style="'height:'+ btnHeight">打开小程序</button>
    	</script>
    	</wx-open-launch-weapp>
    	
    

    在使用时需要先进行配置

     		wx.config({
                beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: res.data.data.appid, // 必填,公众号的唯一标识
                timestamp: Number(res.data.data.timestamp), // 必填,生成签名的时间戳
                nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
                signature: res.data.data.signature,// 必填,签名
                jsApiList: ['chooseImage', 'previewImage'], // 必填,需要使用的JS接口列表
                openTagList: ['wx-open-launch-weapp']
            });
           
            wx.ready(function() {
              var btn = document.getElementById('launch-btn');
              // 标签初始化完毕,可以进行点击操作
              btn.addEventListener('ready', function (e) {
                console.log('ready');
              });
              // 用户点击跳转按钮并对确认弹窗进行操作后触发
              btn.addEventListener('launch', function (e) {
                console.log('success');
              });
              // 用户点击跳转按钮后出现错误
              btn.addEventListener('error', function (e) {
                alert('fail', e.detail);
              });
              document.addEventListener('WeixinOpenTagsError', function (e) {
                alert('无法使用开放标签' + e.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开放标签,JS-SDK其他功能不受影响
              });
    	      });
    	      wx.error(function(err) {
              console.log(err);
              alert("配置失败" + err.errMsg);
    	      });
    

    以上代码有三个注意点
    1:wx.config的配置参数一定要确保是正确的,可以在wx.error中写console打印(PC端开发时才可以),很多人报错都是因为参数有问题,建议一定要打印出来看看,别盲目自信。
    2:debug 调试模式开启之后如果配置失败wx.error触发后也会自动触发wx.ready 这一点不要大惊小怪。
    3:当时我有报错 config: fail 排查了很久最后就是发现配置参数传的有问题
    以下我在分享几个在本页面中常用到的方法
    1:获取当前页面url window.location.origin
    2:获取当前页面宽度document.body.clientWidth
    3:我使用的Vue单页面开发在使用<wx-open-launch-weapp></wx-open-launch-weapp>标签H5端会报错,可以通过配置一下代码避免报错

    `Vue.config.ignoredElements = [
        'wx-open-launch-app',
        'wx-open-launch-weapp'
      ]`
    

    4:获取当前页面url参数的方法

    // 调用 this.getQueryVariable('key')
     	getQueryVariable (variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
          }
    

    官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
    相关文章链接:https://blog.csdn.net/weixin_43541368/article/details/121919811

    展开全文
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 一、必备条件:在微信内打开H5页面、其他浏览器可查看 静态网站 H5小程序;已认证的服务号,注意服务号必须是已认证的,我因为这问题调试几个小时[无语]服务号绑定“JS接口安全域名”下的网页可使用此标签跳转...

    一、必备条件:

    在微信内打开H5页面、其他浏览器可查看 静态网站 H5 跳小程序;

    已认证的服务号,注意服务号必须是已认证的,我因为这问题调试几个小时[无语]

    服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序;

    已认证的非个人主体的小程序云开发也可以查看 静态网站 H5 跳小程序;

    二、绑定安全域名

    登录微信公众平台,进入公众号设置 -> 功能设置里设置js接口安全域名。

    25d001b1c526af9bf4fd0b1df5c2b591.png

    三、IP白名单设置

    登录微信公众平台,进入开发 -> 基本配置,在IP白名单内填写你服务器的IP。

    四、PHP后端代码

    其实使用Laravel/Guzzle使用只需10几行代码就能搞定,但是为了方便大家查看所以使用PHP。

    public function wechatApp()

    {

    // 微信 JS 接口签名校验工具: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

    $appid = 'AppID'; //填入服务号AppID

    $secret = 'AppSecret'; //填入服务号AppSecret

    // 获取access_token,注意使用过程中获取到access_token后保存起来,access_token有效期为2小时;多次调研access_token会报错

    $token_res = curlRequests("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}");

    $access_token = $token_res['access_token'];

    // 获取ticket

    $ticket_res = curlRequests("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi");

    $ticket = $ticket_res['ticket'];

    // 时间戳

    $timestamp = time();

    // nonceStr为16位随机数即可

    $nonceStr = createNonceStr();

    // URL为调用JSSDK的页面地址,后面有参数也需要放进去

    $url = "https://host.com/test?id=1"; // 调用JSSDK的页面地址

    // sha1加密

    $str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";

    $sha_str = sha1($str);

    return ["appid"=>$appid,"timestamp"=>$timestamp,"nonceStr"=>$nonceStr,"signature"=>$signature]

    }

    function createNonceStr($length = 16)

    {

    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

    $str = "";

    for ($i = 0; $i < $length; $i++) {

    $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);

    }

    return $str;

    }

    function curlRequests($url, $data = null)

    {

    // curl 初始化

    $curl = curl_init();

    // curl 设置

    curl_setopt($curl, CURLOPT_URL, $url);

    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);

    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

    // 判断 $data get or post

    if (!empty($data)) {

    curl_setopt($curl, CURLOPT_POST, 1);

    curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

    }

    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

    // 执行

    $res = curl_exec($curl);

    curl_close($curl);

    return json_decode($res, true);

    }

    五、H5前端代码

    wx-open-launch-weapp内的username和path改为您的小程序原始号和path即可。

    微信浏览器跳转小程序

    .notice-msg{

    width: 100%;

    float: left;

    line-height: 30px;

    text-align: center;

    margin: 200px 0px 20px 0px;

    padding: 0px 15px;

    box-sizing: border-box;

    color: #666666;

    font-size: 15px;

    }

    点击下方按钮立即跳转小程序

    点击立即跳转小程序

    $(function () {

    wx.config({

    debug: false,

    appId: ' echo $appid ?>', // 必填,公众号的唯一标识

    timestamp: ' echo $timestamp ?>', // 必填,生成签名的时间戳

    nonceStr: ' echo $nonceStr ?>', // 必填,生成签名的随机串

    signature: ' echo $signature ?>',// 必填,签名

    jsApiList: ["chooseImage"],//必须要不调用小程序标签渲染不出来

    openTagList: ['wx-open-launch-weapp']//必须必须要不调用小程序标签渲染不出来

    });

    wx.ready(function () {

    console.log("ready");

    });

    wx.error(function (res) {

    console.log("res", res);

    });

    var btn = document.getElementById('launch-btn');

    btn.addEventListener('launch', function (e) {

    console.log('success');

    });

    btn.addEventListener('error', function (e) {

    console.log('fail', e.detail);

    });

    });

    微信内H5 跳转小程序方法详解(laravel/php) - Laravel学习网

    原文出处: https://phpartisan.cn/news/158.html

    问题交流群 :168117787

    展开全文
  • 一、必备条件:在微信内打开H5页面、其他浏览器可查看 静态网站 H5小程序;已认证的服务号,注意服务号必须是已认证的,我因为这问题调试几个小时[无语]服务号绑定“JS接口安全域名”下的网页可使用此标签跳转...

    一、必备条件:

    在微信内打开H5页面、其他浏览器可查看 静态网站 H5 跳小程序;

    已认证的服务号,注意服务号必须是已认证的,我因为这问题调试几个小时[无语]

    服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序;

    已认证的非个人主体的小程序云开发也可以查看 静态网站 H5 跳小程序;

    二、绑定安全域名

    登录微信公众平台,进入公众号设置 -> 功能设置里设置js接口安全域名。

    25d001b1c526af9bf4fd0b1df5c2b591.png

    三、IP白名单设置

    登录微信公众平台,进入开发 -> 基本配置,在IP白名单内填写你服务器的IP。

    四、PHP后端代码

    其实使用Laravel/Guzzle使用只需10几行代码就能搞定,但是为了方便大家查看所以使用PHP。

    public function wechatApp()

    {

    // 微信 JS 接口签名校验工具: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

    $appid = 'AppID'; //填入服务号AppID

    $secret = 'AppSecret'; //填入服务号AppSecret

    // 获取access_token,注意使用过程中获取到access_token后保存起来,access_token有效期为2小时;多次调研access_token会报错

    $token_res = curlRequests("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}");

    $access_token = $token_res['access_token'];

    // 获取ticket

    $ticket_res = curlRequests("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi");

    $ticket = $ticket_res['ticket'];

    // 时间戳

    $timestamp = time();

    // nonceStr为16位随机数即可

    $nonceStr = createNonceStr();

    // URL为调用JSSDK的页面地址,后面有参数也需要放进去

    $url = "https://host.com/test?id=1"; // 调用JSSDK的页面地址

    // sha1加密

    $str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";

    $sha_str = sha1($str);

    return ["appid"=>$appid,"timestamp"=>$timestamp,"nonceStr"=>$nonceStr,"signature"=>$signature]

    }

    function createNonceStr($length = 16)

    {

    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

    $str = "";

    for ($i = 0; $i < $length; $i++) {

    $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);

    }

    return $str;

    }

    function curlRequests($url, $data = null)

    {

    // curl 初始化

    $curl = curl_init();

    // curl 设置

    curl_setopt($curl, CURLOPT_URL, $url);

    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);

    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

    // 判断 $data get or post

    if (!empty($data)) {

    curl_setopt($curl, CURLOPT_POST, 1);

    curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

    }

    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

    // 执行

    $res = curl_exec($curl);

    curl_close($curl);

    return json_decode($res, true);

    }

    五、H5前端代码

    wx-open-launch-weapp内的username和path改为您的小程序原始号和path即可。

    微信浏览器跳转小程序

    .notice-msg{

    width: 100%;

    float: left;

    line-height: 30px;

    text-align: center;

    margin: 200px 0px 20px 0px;

    padding: 0px 15px;

    box-sizing: border-box;

    color: #666666;

    font-size: 15px;

    }

    点击下方按钮立即跳转小程序

    点击立即跳转小程序

    $(function () {

    wx.config({

    debug: false,

    appId: ' echo $appid ?>', // 必填,公众号的唯一标识

    timestamp: ' echo $timestamp ?>', // 必填,生成签名的时间戳

    nonceStr: ' echo $nonceStr ?>', // 必填,生成签名的随机串

    signature: ' echo $signature ?>',// 必填,签名

    jsApiList: ["chooseImage"],//必须要不调用小程序标签渲染不出来

    openTagList: ['wx-open-launch-weapp']//必须必须要不调用小程序标签渲染不出来

    });

    wx.ready(function () {

    console.log("ready");

    });

    wx.error(function (res) {

    console.log("res", res);

    });

    var btn = document.getElementById('launch-btn');

    btn.addEventListener('launch', function (e) {

    console.log('success');

    });

    btn.addEventListener('error', function (e) {

    console.log('fail', e.detail);

    });

    });

    微信内H5 跳转小程序方法详解(laravel/php) - Laravel学习网

    原文出处: https://phpartisan.cn/news/158.html

    问题交流群 :168117787

    展开全文
  • <template> <view> <view class="txt_ys">...<...wx-open-launch-weapp id="launch-btn" :username="username" :path="path" @launch="handleLaunchFn" @error="handleErrorFn" style=...
    <template>
    	<view>
    		<view class="txt_ys">注册成功!</view>
    		<view class="tz_but">
    			<wx-open-launch-weapp id="launch-btn" :username="username" :path="path" @launch="handleLaunchFn"
    				@error="handleErrorFn" style="display: block;">
    				<script type="text/wxtag-template">
    					<style>
    			.ant-btn {
    				margin: auto;
    				width: 80%;
    				height: 40px;
    				background: #fff;
    				border-radius: 20px;
    				margin-top: 50px;
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				color: #008CFF;
    			                        }
    			                     
    			</style>
    		 
    			<p class="ant-btn">跳转小程序</p>
    			
    		</script>
    			</wx-open-launch-weapp>
    		</view>
    		<image src="../../static/par_ti.png"></image>
    
    	</view>
    </template>
    
    <script>
    	let jweixin = require("jweixin-module")
    	export default {
    		data() {
    			return {
    				username: null,
    				path: 'pages/index/index.html'
    			}
    		},
    		onLoad() {
    			console.log(location.href)
    			uni.request({
    				url: '??????',
    				method: "POST",
    				header: {
    					'content-type': 'application/x-www-form-urlencoded',
    
    				},
    				data: {
    					url: location.href
    				},
    				success: (res) => {
    
    
    					let config = JSON.parse(res.data.result.data)
    					console.log(config)
    
    					jweixin.config({
    						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
    						appId: config.appId, // 必填,公众号的唯一标识,填自己的!  
    						timestamp: config.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据  
    						nonceStr: config.nonceStr, // 必填,生成签名的随机串  
    						signature: config.signature, // 必填,签名  
    						jsApiList: config.jsApiList,
    						openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填  
    					});
    					// this.path = config.url
    					this.username = res.data.result.gzh_id
    
    					jweixin.ready(() => {
    						console.log(5555);
    						this.$nextTick(() => {
    							let btn = document.getElementById('launch-btn');
    							btn.addEventListener('launch', e => {
    								console.log('success', 666);
    								this.path = ""
    							});
    							btn.addEventListener('error', e => {
    								alert('小程序打开失败');
    								console.log('fail', e.detail);
    							});
    						});
    					});
    
    					jweixin.error(res => {
    						// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
    						console.log(res);
    					});
    				}
    			});
    		},
    		methods: {
    			handleLaunchFn(e) {
    				console.log(e)
    			},
    			handleErrorFn(e) {
    				console.log('fail', e.detail);
    			},
    		}
    	}
    </script>
    
    <style scoped>
    	image {
    		width: 100%;
    
    		opacity: 0.5;
    		margin-top: 100rpx;
    	}
    
    	.txt_ys {
    		padding-top: 20rpx;
    		font-size: 40rpx;
    		text-align: center;
    		color: #1d1d1d;
    	}
    
    	.txt_ys text {
    
    		color: #008BFF;
    	}
    
    	.tz_but {
    		width: 100%;
    		height: 50px;
    
    	}
    </style>
    

    展开全文
  • 微信终于支持 H5 跳转小程序&App

    千次阅读 2020-07-15 22:10:23
    小程序灰度测试分享朋友圈刷屏后,滴滴滴,这... 新增开放标签 定义: 微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信...
  • 要实现从微信公众号H5页面点击按钮跳转小程序 查找微信官方文档找到了方法,使用了页面微信js,对js做相应的配置之后,在页面引入跳转标签就可以进行跳转 ...代码引用前言: 首先跳转要使用jssdk ...
  • 微信支持H5跳转App、跳转小程序

    千次阅读 2020-07-15 08:20:00
    小程序灰度测试分享朋友圈刷屏后,滴滴滴,这...闲着也闲着,顺藤摸瓜点了进去,好家伙,产品小姐姐写这个文案还是太含蓄了,我猜有可能是老干妈还没吃够根据刀哥多年写代码要看文档的经验来看,...
  • index.html页面引入微信 jssdk文件 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 版本要1.6.0,否则不生效 .vue 页面 <template> <div> <wx-open-launch...
  • 主要介绍了微信小程序H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信公众号H5页面跳转小程序

    千次阅读 2021-01-27 10:42:48
    <script src="../js/jquery-1.8.2.min.js"></script> <script src='http://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script> <body>...微信签名 wx.config({ ...
  • 微信内H5打开小程序

    2021-03-31 14:59:17
    前置条件:已认证的服务号,订阅号...], openTagList: ["wx-open-launch-weapp"] // 跳转小程序 开放标签 }) }) vue前端开放标签的写法 username: 小程序的原始ID path: 跳转小程序页面的路径 注意按钮样式的写法
  • 前言:网上搜这个问题 很多答案都是wx.navigateToMiniProgram(Object object) 我只想说 我搜的是h5跳转小程序 这帮人给的答案都是小程序跳小程序 我服了 正式开始: 1....
  • 鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去? 所以鄙人记录下这篇文章,以便帮助到一些人。 废话不多说,上才艺! <html> <head> <meta charset...
  • 微信浏览器里面h5跳转小程序注意事项,以vue框架为例一、获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({debug: false,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: ...
  • Vue-微信公众号H5跳转小程序史上最全最详细教程(前端) 一、项目需求介绍 中国农业银行云客服公众号-客服大厅,用Vue做的H5页面,有一个需要从H5跳转到小程序的需求,项目完成后,特做此记录,其中遇到很多坑,所以...
  • 微信H5网页跳转小程序

    千次阅读 2020-12-02 11:19:50
    鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去? 所以鄙人记录下这篇文章,以便帮助到一些人。官方文档 废话不多说,上才艺! <html> <head> <...
  • 前言:我使用vue编写的h5公众号,实现点击小... 跳转小程序主要的标签是 wx-open-launch-weapp 第一步在vue项目下public文件夹下的index.html页面,引入微信配置文件,我直接在body标签引入 <body> <strong>
  • 微信公众号H5网页跳转小程序方法

    千次阅读 2020-11-06 14:19:26
    要在微信公众号H5网页跳转小程序,需要使用微信JS-SDK,引入JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js ,在服务端验签获取配置信息,获取成功以后,引入开放标签openTagList: [‘wx-open-launch-...
  • 主要介绍了微信小程序跳转到其他网页(外部链接)的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 包括微信环境下H5与小程序环境不同环境下的支付,以及小程序嵌入H5的支付方式,并且简要的说明了一下从H5跳转小程序的方式,以及小程序嵌入H5的方式
  • 微信公众号h5页面跳转小程序 文章目录微信公众号h5页面跳转小程序前言一、注意二、使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置 前言 问:h5 页面可以跳转至微信小程序吗? 答:可以 官方解答...
  • 最近公司需要开发一个微信H5页面,页面中需要跳转小程序和app。整个过程可谓是举步维艰【捂脸.jpg】。 首先,想要跳转app和小程序,都需要使用微信的开放性标签 要想让这个开放性标签实现需求,主要分为三大块:标签...
  • launch-weapp,wx-open-launch-app wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app 我们主要介绍的是wx-open-launch-weapp H5跳转小程序 分享   开发过程可能出现的情况: 微信版本...
  • H5跳转微信小程序

    千次阅读 热门讨论 2020-12-04 17:46:56
    真机调试(域名必须是服务号的JS接口配置安全域名,不能是本地127.0.1) 注意:wx.config需要设置H5跳转小程序的配置 openTagList: [ ‘wx-open-launch-weapp’ ] <!DOCTYPE ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,512
精华内容 2,604
关键字:

微信内h5跳转小程序