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

    千次阅读 2020-09-04 11:17:08
    首先非常开心,微信终于支持H5 HTML页面可以跳转小程序。又多个一个扩展功能。 开始你的表演 官方API地址 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 一、配置“JS...

    简要

        首先非常开心,微信终于支持H5 HTML页面可以跳转到小程序。又多个一个扩展功能。
    

    开始你的表演

    官方API地址

    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

    一、配置“JS接口域名”公众号开发肯定需要配置安全域名的,必须

    二、直接上html代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
        <title>小程序跳转测试</title>
    </head>
    <body style="text-aligin:center;">
    <wx-open-launch-weapp
            id="launch-btn"
            username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
            path="/pages/index/index.html"> <!-- 这里填写跳转对于小程序的页面 注意这里的 .html -->
        <template>
            <style>.btn { padding: 12px width:200px;height:50px;}</style>
            <button class="btn">打开小程序</button>
        </template>
    </wx-open-launch-weapp>
    
    <script src="/js/jquery-1.12.4.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必须是1.6版本 -->
    
    <script>
        
        $(function () {
        
            // config 的参数以及签名=
            var url = location.href;
            $.get("url", function(response){
                if(response.status == 0) {
                    var info = response.data;
                    wx.config({
                        debug: false,
                        appId: info.appId,
                        timestamp: info.timestamp,
                        nonceStr: info.nonceStr,
                        signature: info.signature,
                        jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "uploadVoice", "downloadVoice", "chooseImage", "previewImage", "uploadImage", "downloadImage", "translateVoice", "getNetworkType", "openLocation", "getLocation"],//必须要不调用小程序标签渲染不出来
                        openTagList: ['wx-open-launch-weapp']//必须必须要不调用小程序标签渲染不出来
                    });
                }
            });
            //=== 获取 config 的参数以及签名=== end
            
            var btn = document.getElementById('launch-btn');
            btn.addEventListener('launch', function (e) {
                console.log('success');
            });
            btn.addEventListener('error', function (e) {
                console.log('fail', e.detail);
            });
        });
    
    
    </script>
    </body>
    </html>
    
    
    

    完活!

    总结
    1、H5调用小程序开放标签<wx-open-launch-weapp>,weapp代表是H5调用标签,wx-open-launch-app是带有APP的
    2、HTML中使用对应<wx-open-launch-weapp>

    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index.html?user=123&action=abc"
    >
      <template>
      //在这里单独添加设计样式
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </template>
    </wx-open-launch-weapp>
    

    3、path:页面路径一定要加后缀.html,username:是小程序原始ID
    4、config配置中一定要加入openTagList: [’wx-open-launch-weapp’]
    5、微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

    展开全文
  • 这篇文章主要介绍了微信小程序H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram ...
  • h5页面跳转微信小程序页面

    万次阅读 2019-05-15 17:33:37
    // 判断环境是否在微信小程序里 function isMiniProgram(){ var ua = navigator.userAgent.toLowerCase(); var envType='#'; if(ua.match(/MicroMessenger/i) == 'micromessenger...
    // 判断环境是否在微信小程序里
    function isMiniProgram(){
        var ua = navigator.userAgent.toLowerCase();
        var envType='#';
    
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){ //微信环境
            wx.miniProgram.getEnv(function(res) {
                if (res.miniprogram) { // 小程序环境下逻辑
                    envType = true
                }else { //非小程序环境下逻辑
                    envType =  false
                }
            })
        }else{ //非微信环境逻辑
            envType = false
        }
        return envType
    }
    
    
    // 动态加载js脚本文件 h5跳转小程序 还需要加载一个微信的jssdk
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js';
    document.body.appendChild(script);
    
    // 点击跳转小程序页面
    wx.miniProgram.navigateTo({
        url: '/pages/scenic/scenic_detail/kjcg?id='+id+'&title='+title
    })
    

    web-view

    微信JS-SDK说明文档

    展开全文
  • <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src=...
    <meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<script src="https://data.zdeer.com/uploads/file/js/jQuery.js" type="text/javascript" charset="utf-8"></script>
    		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    		<!-- <script src="js/h5.js" type="text/javascript" charset="utf-8"></script> -->
    		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
    
    //以上是我引入的js
    
    
    //干活的在下面
    				<wx-open-launch-weapp id="launch-btn" username="这地方是自己项目的原始id" path="小程序跳转的路径">
    					<script type="text/wxtag-template">
    						<style> 
    						.btn-box{ 
    							width: 100%;
    							padding: 0 20px;
    							box-sizing: border-box;
    						} 
    						.btn-desc{ 
    							width: 100%; 
    							font-size: 14px; 
    							text-align: center; 
    							color: #ffffff;
    						} 
    						.btn { 
    							width: 100%; 
    							height: 60px;
    							line-height: 60px;
    							text-align: center; 
    							font-size: 18px; 
    							background-color: #ffffff; 
    							color: #FF4B1A;
    							border-radius: 10px;
    							border: 1px solid #ffffff;
    							margin-top: 20px;
    						}
    					</style>
    				    <div class="btn-box">
    						<div class="btn-desc">请点击下方按钮跳转到左点微信小程序</div>
    						<button class="btn">点击前往左点微信小程序</button>
    					</div>
    				  </script>
    				</wx-open-launch-weapp>
    <script type="text/javascript">
    		 var btn = document.getElementById('launch-btn');
    		 btn.addEventListener('launch', function(e) {
    		 	console.log('success');
    		 	alert('跳转成功')
    		 });
    		btn.addEventListener('error', function(e) {
    		 	console.log('fail', e.detail);
    			alert('跳转失败')
    		 });
    //以上为原始版本
            //加强版如下
    	    // 可以写一些前置条件,比如复制一段文字直接可以实现微信网页和浏览器网页点击跳转而且是点击链接直接跳转
    
    		let a = document.querySelector('a')
    		a.href = '微信公众号生成的跳转链接'weixin:
    		
    		$(function(){ 
    			$("#sp").trigger("click");
    		}); 
    
    //下面为公用
    		const vm = new Vue({
    			el: "#vm",
    			data: {
    
    			},
    			created() {
    				let url = window.location.href.split("?")[0];
    				url = encodeURIComponent(url)
    				this.getBanner(url)
    			},
    			methods: {
    				// 请求函数
    				getBanner(url) {
    					let that = this
    					$.get("请求接口", {
    							request_url: url
    						},
    						function(data) {
    							console.log(data)
    							let datas = data.data
    							wx.config({
    								debug: false, // 调试时可开启
    								appId: datas.appId, // <!-- replace -->
    								timestamp: datas.timestamp, // 必填,填任意数字即可
    								nonceStr: datas.nonceStr, // 必填,填任意非空字符串即可
    								signature: datas.signature, // 必填,填任意非空字符串即可
    								jsApiList: ["chooseImage", "updateAppMessageShareData",
    									"updateTimelineShareData", "wx-open-launch-weapp"
    								], // 必填,随意一个接口即可 
    								openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
    							})
    
    							wx.ready(function() {
    								wx.updateAppMessageShareData({
    									title: '', // 分享标题 
    									desc: '', // 分享描述 
    									link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 
    									imgUrl: '', // 分享图标
    									success: function(res) {
    										// 设置成功
    										console.log('成功', res)
    									}
    								});
    								wx.updateTimelineShareData({
    									title: '', // 分享标题
    									desc: '', // 分享描述 
    									link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 
    									imgUrl: '', // 分享图标
    									success: function(res) {
    										// 设置成功
    										console.log('成功', res)
    									}
    								})
    							})
    						}, 'json');
    				}
    			},
    		})
    	</script>

    展开全文
  • config放在唤起小程序按钮页面,url也是用的location.href.split('#')[0],但是一直报错,invalid url domain问题,官方文档给出的说页面域名没有和appid绑定,事实也绑定了&...
  • 微信官方的接口文档: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html 一、获取 token GET ...

    微信官方的接口文档:

    urlscheme.generate | 微信开放文档

    一、获取 token

    GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=appSecret
    

    二、获取openlink

    POST https://api.weixin.qq.com/wxa/generatescheme?access_token=access_token

    获取到的地址,自己随便创建一个html页面,内容如下, 地址替换一下:

    <script>
    location.href = 'weixin://dl/business/?t=xxxxx'
    </script>

    注:

    1. 这个页面,只能用手机浏览器打开有效,其它地方不行,但微信中似乎可以;

    2. 获取 openlink 的地址这一步,参数只能放在 query 中,不可以放在 url 中。

    3. 这个html页面,必须放在服务器上,是 https 

    参考页面:

    短信链接跳转微信小程序(URLSchema等)_huhui806的博客-CSDN博客_短信跳转微信小程序

    展开全文
  • 研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序 为了开发方便,以上两种均借助了微信小程序云函数来...
  • 需求:从外部浏览器,点击H5链接跳转打开微信小程序;以及在微信内直接点击H5链接打开微信小程序; 步骤1:小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹; 步骤2:项目开启云开发 ...
  • H5网页跳转微信小程序 通过使用微信开放标签,可便捷的跳转到微信小程序。 文章目录H5网页跳转微信小程序效果图一、小程序跳转按钮二、开放标签使用步骤1. 绑定域名2. 引入js文件3. config权限配置及ready处理4. ...
  • vue项目H5 跳转微信小程序

    千次阅读 2021-03-12 16:19:06
    登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2. 引入JS文件 在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https) 如需进一步...
  • H5网页跳转微信小程序

    万次阅读 多人点赞 2020-07-08 16:15:53
    好消息,H5网页接入公众号的JSSDK以后可以跳转小程序了。 开放标签使用步骤 微信开放标签使用步骤与微信JS-SDK类似,也需要绑定安全域名、引入JS文件等步骤。 步骤一:绑定域名 登录微信公众平台进入“公众号...
  • 根据微信开发文档的微信网页开发,下面的开放标签说明文档。引入js文件。<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>然后在 wx.config里面根据...
  • 转载自知乎:https://zhuanlan.zhihu.com/p/148693989
  • 为了这个问题,于是我就去看了下微信的文档,发现微信有这个接口的,可以让微信浏览器下的H5跳转小程序内。微信相关文档在这边:在h5界面中的配置wx.config({debug: true, // 开启调试模式,调用的所有api的返回值...
  • H5页面跳转微信小程序(含完整代码)

    千次阅读 热门讨论 2020-09-25 18:47:46
    还能携带参数,在微信小程序中通过 onLoad的 options接收。(代码如下) 中必须用 标签包裹。 config配置中一定要加入openTagList: ['wx-open-launch-weapp']。 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS ...
  • 1.在项目中安装微信sdk npm install weixin-js-sdk
  • 1、H5跳转小程序。function myfun(){var openid = "=$_SESSION['openid']?>";wx.miniProgram.navigateTo({url:"/pages/identity/identity?openid="+openid});}window.onload = myfun;2、小程序跳转H5。PHP微信...
  • H5跳转微信小程序

    2021-06-12 05:35:44
    如题,最近有项目需要H5跳转微信小程序,之前的认知中,跳转到微信小程序只有通过公众号、小程序、扫码这几种方式。终于H5支持跳转小程序了,废话不多说直接贴代码1、需要微信公众号,并且是已经认证过的服务号。...
  • 系统版本要求为:iOS 10.3及以上、Android 5.0及以上 使用wx-open-launch-weapp h5跳转微信小程序,ios按钮显示,安卓按钮不显示bug,解决办法如下: jsApiList: ['chooseImage', 'previewImage'], // 必填,需要...
  • uni-app h5跳转微信小程序

    千次阅读 2021-01-26 14:04:24
    uni-app h5跳转微信小程序 首先npm下载jweixin-module npm install jweixin-module --save 在即将使用此功能的页面引入 var jweixin = require('jweixin-module') 根据微信的开发文档写入以下代码 微信官方...
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 这里写自定义目录标题准备工作根据官方提供的资料需准备以下几点:新的改变功能快捷键合理的创建标题,有助于目录...微信官方文档:H5跳转小程序. 根据官方提供的资料需准备以下几点: 已认证的服务号 新的改变 我们

空空如也

空空如也

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

h5页面跳转微信小程序

微信小程序 订阅