草庐IT

H5页面跳转微信小程序

会飞的胖海 2023-09-30 原文

微信浏览器中实现跳转

使用微信官方接口 wx-open-launch-weapp（该方法只开放给已认证的服务号或者小程序云开发的静态网站托管绑定的域名下的网页）

案例代码

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  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>
  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>

相关文档

目录 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

外部浏览器中实现跳转，需要使用URL Scheme的方式来实现（URL Scheme的有效期只有30天）

        前端在获取到URL Scheme后通过以下代码就可以实现跳转
        文档点击这里 URL Scheme文档

location.href = 'weixin://dl/business/?t= *TICKET*'

  • 注意: 获取URL Scheme的方式有两种

URL Scheme获取帮助文档

方式一：小程序管理后台工具生成

一、生成步骤

1、 地址

微信公众平台

2、 扫码登录

3、 登陆后进入首页

「工具」（在右上角）–「生成 URL Scheme」

4、 进入生成 URL Scheme

5、 生成 URL Scheme

（1） 参数说明

属性值说明
有效期到期失效（可以自己选择失效时间）、永久有效生成的 scheme 码类型
小程序页面路径示例：pages/index/index通过 scheme 码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带 query。path 为空时会跳转小程序主页。
启动query参数示例：channel=test&ad=1001通过 scheme 码进入小程序时的 query，最大1024个字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~

（2） 示例

1） 生成

2） 生成结果

二、参考文档

获取 URL Scheme

方式二：服务器端（接口）方式

一、 说明

获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，目前仅针对国内非个人主体的小程序开放，详见获取 URL scheme。

调用方式：

二、 HTTPS 调用

1、接口地址

地址请求方式
https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKENPOST

2、请求参数及说明

（1） 请求参数

属性类型默认值必填说明
access_tokenstring是接口调用凭证
jump_wxaObject否跳转到的目标小程序信息。
is_expirebooleanfalse否生成的 scheme 码类型，到期失效：true，永久有效：false。
expire_timenumber否到期失效的 scheme 码的失效时间，为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。生成到期失效的scheme时必填。

（2） jump_wxa 的结构

属性类型默认值必填说明
pathstring是通过 scheme 码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带 query。path 为空时会跳转小程序主页。
querystring是通过 scheme 码进入小程序时的 query，最大1024个字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~

3、返回值

（1） 返回值说明

属性类型说明
errcodenumber错误码
errmsgstring错误信息
openlinkstring生成的小程序 scheme 码

（2） errcode合法值说明

值说明
40002暂无生成权限
40013生成权限被封禁
85079小程序未发布
40165参数path填写错误
40212参数query填写错误
85401参数expire_time填写错误，时间间隔大于1分钟且小于1年
44990生成Scheme频率过快（超过100次/秒）
85400长期有效Scheme达到生成上限10万
45009单天生成Scheme数量超过上限50万

4、示例：

（1）请求        

{

    "jump_wxa":

        {

            "path": "/pages/publishHomework/publishHomework",

            "query": ""

        },

    "is_expire":true,

    "expire_time":1606737600
}

（2）返回

{

    "errcode": 0,

    "errmsg": "ok",

    "openlink": Scheme,

}

三、 云调用

1、接口方法

方法说明
openapi.urlscheme.generate

需在 config.json 中配置 urlscheme.generate API 的权限，详情请参考官方文档

2、请求参数

（1）请求参数

属性类型默认值必填说明
jumpWxaObject否跳转到的目标小程序信息。
isExpirebooleanfalse否生成的 scheme 码类型，到期失效：true，永久有效：false。
expireTimenumber否到期失效的 scheme 码的失效时间，为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。生成到期失效的scheme时必填。

（2）jumpWxa 的结构

属性类型默认值必填说明
pathstring是通过 scheme 码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带 query。path 为空时会跳转小程序主页。
querystring是通过 scheme 码进入小程序时的 query，最大1024个字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~

值说明
40002暂无生成权限
40013生成权限被封禁
85079小程序未发布
40165参数path填写错误
40212参数query填写错误
85401参数expire_time填写错误，时间间隔大于1分钟且小于1年
44990生成Scheme频率过快（超过100次/秒）
85400长期有效Scheme达到生成上限10万
45009单天生成Scheme数量超过上限50万

3、返回值

（1）返回值说明

属性类型说明
errcodenumber错误码
errmsgstring错误信息
openlinkstring生成的小程序 scheme 码

（2）errcode合法值说明

值说明
40002暂无生成权限
40013生成权限被封禁
85079小程序未发布
40165参数path填写错误
40212参数query填写错误
85401参数expire_time填写错误，时间间隔大于1分钟且小于1年
44990生成Scheme频率过快（超过100次/秒）
85400长期有效Scheme达到生成上限10万
45009单天生成Scheme数量超过上限50万

4、示例

（1）请求

const cloud = require('wx-server-sdk')

cloud.init({

    env: cloud.DYNAMIC_CURRENT_ENV,})

exports.main = async (event, context) => {

    try {

        const result = await cloud.openapi.urlscheme.generate({

            "jumpWxa": {

                "path": '/pages/publishHomework/publishHomework',

                "query": ''

            },

            "isExpire": true,

            "expireTime": 1606737600

        })

        return result

} catch (err) {

    return err

}}

（2）返回

{

    "errcode": 0,

    "errmsg": "ok",

    "openlink": Scheme,

}

四、 其他说明

如有其他问题请参考官方文档：

urlscheme.generate | 微信开放文档

页面跳转strongtdxff微信小程序javascript小程序

有关H5页面跳转微信小程序的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  4. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  5. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  6. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  7. ruby-on-rails - RoR && "coming soon"页面 - 2

    我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem？或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面，我们在StackOverflow上找到一个类似的问题： https:/

  8. ruby - 如何让 GitHub 页面使用 master 分支？ - 2

    我有一个使用Jekyll托管在GitHub上的静态网站。问题是，我真的不需要master分支，因为存储库唯一包含的是网站。这样我就必须gitcheckoutgh-pages，然后gitmergemaster，然后gitpushorigingh-pages。有什么简单的方法可以摆脱gh-pages分支并直接从master推送？ 最佳答案 Theproblemis,Idon'treallyneedthemasterbranch,astheonlythingtherepositorycontainsisthewebsite.Isthere

  9. ruby - 如何设置 Mechanize 页面编码？ - 2

    我试图通过点击一个链接获得一个带有ISO-8859-1编码的页面，所以代码类似于这样:page_result=page.link_with(:text=>'link_text').click到目前为止，我得到的结果编码错误，所以我看到的字符如下:'T�tulo:'insteadof'Título:'我尝试了几种方法，包括:使用代理在第一个请求中声明编码:@page_search=@agent.get(:url=>'http://www.server.com',:headers=>{'Accept-Charset'=>'ISO-8859-1'})说明页面本身的编码page_result.

  10. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信

随机推荐