精华内容
下载资源
问答
  • 2021-03-31 14:59:17

    前置条件:已认证的服务号,订阅号不行

    引入js:   <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">    或者  在vue中安装   weixin-js-sdk

    调用后台接口获取签名等信息

    this.$axios.post("url", params)
        .then(res => {
            wx.config({
              debug: false,
              appId: res.appid,
              signature: res.signature,
              jsapi_ticket: res.jsapi_ticket,
              nonceStr: res.nonceStr,
              timestamp: res.timestamp,
              jsApiList: [
                  'checkJsApi', 
                  'onMenuShareTimeline',//分享到朋友圈的接口
                  'onMenuShareAppMessage'//分享给朋友的接口
              ],
              openTagList: ["wx-open-launch-weapp"]   // 跳转小程序 开放标签
    	})
     })

    vue前端开放标签的写法

    <wx-open-launch-weapp id="launch-btn" username="gh_XXXXXXXXXXXXXX" :path="'pages/work_detail/index.html?id=' + id +'&contributeId=' + contributeId" style="width: 100%">
            <script type="text/wxtag-template">
              <style>.btn { width: 100%; height:40px;background: #d93d25;border-radius: 18px;color: #FFF;font-size: 18px;display: flex;align-items: center;justify-content: center;border: 0;}</style>
              <button class="btn">投票</button>
            </script>
    </wx-open-launch-weapp>

    username:  小程序的原始ID

    path:  跳转小程序页面的路径

    注意按钮样式的写法

    更多相关内容
  • h5打开小程序的方法 总结

    千次阅读 2021-07-12 20:36:31
    t=加scheme码生成一个链接,跳转进入小程序,参数在生成scheme码时就要固定,适合在短信、邮件、微信外网页跳转小程序并传固定参数的情况下使用 wx-open-launch-weapp: 需要对接微信的jssdk,获取wx-open-launch-...

    两种方法,一种是通过Url Scheme进行跳转,另一种是通过wx-open-launch-weapp标签进行跳转

    1. Url Scheme: 需要生成scheme码,weixin://dl/business/?t=加scheme码生成一个链接,跳转进入小程序,参数在生成scheme码时就要固定,适合在短信、邮件、微信外网页跳转小程序并传固定参数的情况下使用

    2. wx-open-launch-weapp: 需要对接微信的jssdk,获取wx-open-launch-weapp标签权限后才可以使用,可以在生成标签前更改参数,适合在项目中跳转小程序使用


    以下是使用方法

    Url Scheme方法

    官方文档

    生成小程序的scheme链接,通过scheme链接跳转小程序

    优点:该方法可以实现短信、邮件、微信外网页跳转小程序(短信打开h5链接,通过h5作为中介,跳转到小程序)

    缺点:
    该方法每一个scheme码只能对应固定的传参
    单个小程序每日生成 Scheme 上限为50万个,有效时间超过31天的 Scheme 或永久有效的 Scheme 为长期有效Scheme,单个小程序总共可生成长期有效 Scheme 上限为10万个,有效时间不超过31天的 Scheme 为短期有效Scheme,单个小程序生成短期有效 Scheme 不设上限

    1. 打开微信公众平台,登录后在右上角找到生成 Url Scheme,输入相应的路径和参数就可以了
      在这里插入图片描述
      在这里插入图片描述

    2. 在h5中跳转weixin://dl/business/?t=你的scheme码就可以了

    因为浏览器支持的原因,部分浏览器不支打开后自动跳转,可以做一个点击跳转的按钮供用户手动跳转

    例:

    <body>
        <div class="box">
            正在跳转...
            <a href="weixin://dl/business/?t=你的scheme码" class="button">点击手动跳转</div>
        </div>
        <script>
            function toWx() {
                location.href = 'weixin://dl/business/?t=你的scheme码'
            }
            window.onload = function () {
                toWx()
            }
        </script>
    </body>
    

    wx-open-launch-weapp方法

    官方文档

    1. 首先需要绑定JS接口安全域名

    【公众号设置】->【功能设置】->【JS接口安全域名】-> 输入要配置的域名 -> 将文件给后端放到服务器上
    在这里插入图片描述
    在这里插入图片描述

    1. 接jssdk,调用wx.config获取权限,注意要写openTagList: ["wx-open-launch-weapp"]来获取标签

    wx.config 例:

    wx.config({
        debug: false,
        appId: xxxxxx,
        timestamp: xxxxxx,
        nonceStr: xxxxxx,
        signature: xxxxxx,
        jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "checkJsApi",
            "scanQRCode",
            "chooseImage",
            "previewImage",
        ],
        openTagList: ["wx-open-launch-weapp"],
    });
    

    详细的wx.config方法可参考之前的博文(之前的博文里没有写获取wx-open-launch-weapp,需要在项目中自己加上)

    1. 写DOM(例子使用的是VUE框架,原生或其他框架大同小异)
    <wx-open-launch-weapp
        id="launch-btn2"
        username="gh_小程序原始id"
        path="pages/index"
    >
        <script type="text/wxtag-template">
            <div style="width: 100%; height: 100%;">打开小程序</div>
        </script>
    </wx-open-launch-weapp>
    

    wx-open-launch-weapp中的节点会在页面加载完成后过一会才会显示,并且script标签生成的节点不会应用页面中css的样式,所以需要在节点中写样式或者写成下边这种方式

    ...
    <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
    </script>
    ...
    

    初次配置容易出现的问题:
    可以为wx-open-launch-weapp标签添加样式形成更好的页面效果
    点击事件是声称在script标签所生成的节点上的,注意不要只修改wx-open-launch-weapp标签的样式导致用户点击不到节点
    只有在微信环境下才会展示改标签所产生的节点
    wx.config不要重复调用导致wx-open-launch-weapp失效(一般不会犯这种错误吧)
    系统错误,错误码:40048 :配好安全域名!!!!!!

    展开全文
  • h5打开小程序,h5跳转到小程序

    千次阅读 2020-12-30 18:12:01
    业务背景:在h5中直接打开小程序(注意不是返回小程序) 业务背景:在h5中直接打开小程序(注意不是返回小程序) 直接上码: 一、config注入: wx.config({ debug: true, appId: '<?php echo $signPackage[...

    业务背景:在h5中直接跳转到小程序(注意不是返回,是直接打开)

    直接上码:
    一、config注入:

    wx.config({
     debug: true,
     appId: '<?php echo $signPackage["appId"];?>',
     timestamp: '<?php echo $signPackage["timestamp"];?>',
     nonceStr: '<?php echo $signPackage["nonceStr"];?>',
     signature: '<?php echo $signPackage["signature"];?>',
     jsApiList: [ 'onMenuShareTimeline','onMenuShareAppMessage'],
     openTagList: ['wx-open-launch-weapp']
    });
    

    二、前端代码:

    <wx-open-launch-weapp
    id="launch-btn"
    username="小程序原始id"
    path="小程序页面地址"
    style="width:100px;height:100px;"
    >
    <template>
    <style>.btn { padding: 12px;width:100px;height:80px;background:skyblue; }</style>
    <button class="btn">打开小程序<button>
    </template>
    </wx-open-launch-weapp>
    <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);
    });
    </script>
    

    觉得不错,赏个关注呗,不胜感激😀

    ※目前仅支持通过微信浏览器访问h5打开小程序

    展开全文
  • 微信内打开H5页面,选择跳转任意微信小程序
  • uniapp h5打开微信小程序

    千次阅读 2022-03-15 14:30:11
    1、当获取不到微信小程序APPID和微信小程序APPSECRET时只能在微信浏览器打开小程序 2、此代码只要是在微信环境打开小程序 3、需要在线上域名调试,本地看不到效果,可将本地host反向代理到线上域名进行调试 4、wx-...

    首先贴代码之前有几个需要注意的点:
    1、当获取不到微信小程序APPSECRET时只能在微信浏览器打开小程序
    2、此代码只能在微信环境打开小程序
    3、需要在线上域名调试,本地看不到效果,可将本地host反向代理到线上域名进行调试
    4、wx-open-launch-weapp标签内样式只支持px,要自适应需再将rpx转px
    5、需要服务端的接口生成签名和公众号的一些数据给前端
    6、前端安装模块 npm install jweixin-module --save
    7、main.js 添加一行代码 Vue.config.ignoredElements.push(‘wx-open-launch-weapp’)
    8、标签(username是以 gh_ 开头的公众号id)

    <wx-open-launch-weapp id="launch-btn"  username="gh_xxxxxxxx">
    	<script type="text/wxtag-template">	
    		<style> 
    			.item-menu-name-normal {
    				font-weight: 400;
    				color: #393E46;
    				text-align: center;
    				overflow: hidden;
    				text-overflow: ellipsis;
    				display: -webkit-box;
    				webkit-line-clamp: 2;
    				webkit-box-orient: vertical;
    			}
    		</style>  
    <image style="display:block;width: {{getRealSize(122)}}px; height:{{getRealSize(122)}}px;" mode="aspectFit" src="https://sysadm.cditv.cn/Uploads/Picture/2022-03-09/622855ef457ad.png"></image>
    <view style="width: {{getRealSize(122)}}px;font-size: {{getRealSize(24)}}px;margin-top: {{getRealSize(8)}}px;" class="item-menu-name-normal">跳转小程序</view>
    	 </script>
    </wx-open-launch-weapp>
    
    

    9、js

    // 引入微信jssdk
    var jweixin = require('jweixin-module')
    onLoad() {
    // 在微信环境才去进行小程序标签配置
    	if (this.$util.isWeixin()){
    		this.getWxGlobal()
    	}
    },
    methods: {
     // 判断是否是微信浏览器
        isWeixin() {
            const ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return true;
            } else {
                return false;
            }
        },
    
    	// 标签内图片和文字大小自适应,rpx转px
    	// 如果375的设计稿,量出100px,即在uniapp中是200rpx,这里num就传200
    	getRealSize(num){
    		return uni.upx2px(num)
    	},
    	getWxGlobal(){
    				const _this  = this;
    					// 此处请求接口获取签名以及基本信息,可省略不看,直接看拿到数据后的操作	
    				_this.$util.getAPIData('https://www.doker.com.cn/api/wechat/getconfig', 'GET', {
    					account: 'gh_d08583fe3034',
    					url: window.location.href
    				}, function(res) {
    					const str = res.data;
    					const appId = str.substring(_this.findStr(str, '"', 2) + 1, _this.findStr(str,
    						'"', 3));
    					const timestamp = str.substring(_this.findStr(str, ':', 1) + 1, _this.findStr(
    						str, ',', 1));
    					let nonceStr = str.substring(_this.findStr(str, '"', 8) + 1, _this.findStr(str,
    						'"', 9))
    					let signature = str.substring(_this.findStr(str, '"', 12) + 1, _this.findStr(
    						str, '"', 13))
    						// 关键代码
    					jweixin.config({
    						debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
    						appId: appId, // 必填,公众号的唯一标识
    						timestamp: timestamp, // 必填,生成签名的时间戳
    						nonceStr: nonceStr, // 必填,生成签名的随机串
    						signature: signature, // 必填,签名
    						jsApiList: ['wx-open-launch-weapp'],
    						openTagList: ['wx-open-launch-weapp']
    					});
    					jweixin.ready((e) => {
    						console.log(e, '成功验证')
    					})
    					jweixin.error((e) => {
    						_this.$util.showToast(e || '验证失败');
    						console.log(e, '失败信息')
    					})
    				}, function() {
    					console.error('接口请求失败');
    				});
    			},
    
    }
    
    

    要在js安全域名上并且在真机上访问才有效果,如果没效果或者是有错误的弹窗出现说明wx.config配置不正确,这种方式只能在微信网页里才能用!!
    是这篇文章给了我帮助,我在他的基础上自已摸索出了结果
    https://ask.dcloud.net.cn/article/39135

    展开全文
  • h5打开微信小程序

    2021-09-14 19:17:40
    ​​​​​​​获取 URL Scheme | 微信开放文档微信开发者平台文档...《URL Scheme打开小程序》 2. 《获取 access_token》 请求地址 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&am
  • 最近要有个项目交付过程中...通过服务端接口可以获取打开小程序任意页面的 URL Link。适用于从短信、邮件、网页、微信内等场景打开小程序。 通过 URL Link 打开小程序的场景值为 1194。 于是,让开发人员,服务端对.
  • H5 移动端 打开微信小程序
  • H5页面打开微信小程序

    千次阅读 2022-04-27 20:56:44
    采用的技术是URL Scheme,是微信小程序后台生成一种地址,适用于从短信、邮件、微信外网页等场景打开小程序任意页面。通过URL Scheme打开小程序的场景值为 1065 整体思路:前端调用后端接口,后端调用微信接口生成...
  • uniapp怎么在H5页面打开小程序

    千次阅读 2020-07-24 19:23:07
    这个两个方法,这里我们用的是从网页打开小程序 第一步,获取SDK配置,在配置里面添加一个 openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app'] 这个字段有两个选择wx-open-launch-...
  • 外部h5打开微信小程序生成小程序URL Scheme一、找到工具栏,生成Scheme二、配置进入的小程序的页面路径和参数三、生成的Scheme大概是这样的四...然后通过点击这个链接就可以直接打开小程序了,是不是很简单。。。 ...
  • H5打开APP或小程序

    2022-05-13 20:12:24
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0" />...H5打开APP或小程序</title> <script src="http://libs.baidu.com/jque.
  • 前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求:微信版本要求为:7.0.12及以上。...
  • H5 跳转微信小程序 微信官方最新文档开发 成功案例
  • h5跳转小程序

    千次阅读 2020-08-17 11:08:11
    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html <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> <script> var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success');...
  • 相关配置 微信js文件版本大于等于1.6.0 ...微信授权配置 window.wx.config({ …otherConfig, openTagList: [‘wx-open-launch-weapp’] }) 调用示例 const style = { position: ‘absolute’, ...function OpenWeapp({
  • 业务场景: 小程序内嵌了H5页面,现在有业务需要跳回到小程序。 1.页面需要登陆、没有登录跳到登录页。(login)。 2. 没有该块业务权限跳转到tabbar主页。(index)。 首先需要在H5页面里引入js <script type=...
  • 小程序跳转:云开发之h5小程序

    千次阅读 2021-11-10 21:48:00
    目录 ...即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。 静态网站网页在微信客户端打开时,wx.config 可以传入小程序 App
  • H5唤起微信小程序

    千次阅读 2021-08-04 21:46:22
    此文章讲述H5唤起微信小程序(可指定页面并携带参数) 一、H5微信外部浏览器唤起小程序(App里面嵌入的H5也可以唤起) 注意:生成URL Scheme的必要前提:小程序不能是个人的,小程序必须已经上线发布了 1、第一种:...
  • H5跳转小程序(1).pdf

    2021-04-30 11:20:51
    H5跳转小程序
  • 2017年1月9日,微信发布小程序,历经3年发展,在今年主题为”未完成 AlwaysBeta“的微信公开课PRO上,微信团队披露,2019年小程序日活跃用户超过3 亿,全年累计成交额达8000亿,同比增长超160%。看到小程序如此惊人...
  • 公众号H5跳转小程序

    2022-04-06 08:47:56
    1、配置微信公众号js安全域名–前端域名 2、配置公众号关联小程序–经测试不关联也可以 3、获取公众号APPID、开发者秘钥—后端接口需要、还需设置服务器Ip白名单 4、根据开发标签使用步骤 ...5、需要注意本地开发...
  • 这接口是我熬夜写出来的,可以用于ECtouch的H5发起小程序调用微信收货地址,如果看不懂的话,可以进微信>>发现>>小程序搜索:“春意谷成人用品商城”进“春意谷成人用品商城”这个小程序可以看我做的接口演示,...
  • 1.小程序分享到朋友圈 //在页面的js里设置下就ok onShareTimeline(){ return { title: "微视宝", imageUrl: '/assets/images/wsbLOGO2.png', query: '/pages/homepage/homepage' } }, 需要注意的是 (现...
  • H5链接打开小程序的下载修改包
  • 支付宝 h5跳转小程序

    2021-10-27 14:10:27
    window.location.href = "alipays://platformapi/startapp?appId=2021002172634084&page=pages/index/index" + encodeURIComponent("?id=@") + "&query=" + encodeURIComponent( ..." +...
  • 目录 问题描述 原因分析 ...官方说明: 网页会判断所在的环境来觉得采用哪种跳转方式,如检测到微信客户端内,则免鉴权使用开放标签跳转,如检测到在外部浏览器或 App,则使用 URL Scheme 跳转小程序
  • 小程序跳转到h5进行文件上传包,用于企业小程序端无法选择文件上传的问题
  • 先在微信小程序后台生成小程序地址: 再在H5页面跳转就行了
  • 外部H5唤起微信小程序

    千次阅读 2021-05-29 17:34:42
    需要在第三方网站直接打开微信小程序: 以下是找到的参考链接,实现过程等后续补 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html ... ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,317
精华内容 9,326
关键字:

h5打开小程序

友情链接: DragonQuest.zip