返回顶部
首页 > 资讯 > 移动开发 >H5唤起小程序
  • 713
分享到

H5唤起小程序

小程序前端微信小程序 2023-09-01 13:09:51 713人浏览 八月长安
摘要

H5唤起小程序 在项目开发过程中,也许会用到再H5页面增加一个按钮,点击可以跳转到微信小程序。这个h5页面可以在任何移动端使用该功能。 第一种方法 1、使用微信开放标签,也就是微信内部唤起小程序。需要

H5唤起小程序
项目开发过程中,也许会用到再H5页面增加一个按钮,点击可以跳转到微信小程序。这个h5页面可以在任何移动端使用该功能。

第一种方法
1、使用微信开放标签,也就是微信内部唤起小程序。需要微信的js-SDK。

 username = '' // 所需跳转的小程序原始id,即小程序对应的以gh_开头的id 必填  path = '' // 所需跳转的小程序内页面路径及参数 需要在路径后面添加.html

H5: 已认证的服务号 服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
小程序: 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任 意合法合规的小程序
jssdk: https://developers.weixin.qq.com/doc/offiaccount/OA_WEB_Apps/JS-SDK.html#0
开放标签:Https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

第二种方法
推荐使用该方法
2、微信外部H5唤起小程序,小程序必须是已发布并且不是个人。
将路径path及需要的参数打包发送给服务端,服务端返回URLScheme链接。

前端拿到URLScheme连接之后就可以进行跳转了。

前端代码

<template>  <view><view @click="showminclick()">打开微信小程序view>  view>template><script>export default {data(){},methods: {// 唤起小程序showminclick(){// 入参 let param = {path: '/pages/index/activityDeatils', // 需要携带的参数query: `id=${item.id}&token=${this.apiToken}`,env_version:'trial' // 体验版,除正式版外均需要在微信外浏览器打开才生效}//请求接口URL API.getWxMinUrl(param).then(res => {console.log("res",res);// 测试打开小程序// window.open("weixin://dl/business/?t=SagndxolUds’"); // 直接打开接口返回的链接window.open(res.data)})},}}script>

使用window.open(“url连接”);或者location.href(“URL连接”);这两种方式都可以进行跳转。
每日生成上限50万,需要服务端接口。

服务端工作
需要先获取access_token,然后使用access_token获取URL Scheme连接
获取URL Scheme

来源地址:https://blog.csdn.net/c1o2c3o4/article/details/128835196

--结束END--

本文标题: H5唤起小程序

本文链接: https://lsjlt.com/news/388515.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • H5唤起小程序
    H5唤起小程序 在项目开发过程中,也许会用到再H5页面增加一个按钮,点击可以跳转到微信小程序。这个h5页面可以在任何移动端使用该功能。 第一种方法 1、使用微信开放标签,也就是微信内部唤起小程序。需要...
    99+
    2023-09-01
    小程序 前端 微信小程序
  • uniapp web-view 小程序内嵌H5 打开地图 唤起APP
    前言   uniapp开发小程序内嵌H5的场景中,有需求如下:   在已知某个地点经纬度的情况下,可以在H5打开地图查看该地点的位置,以及能够唤起手机上的地图APP进行导航等操作。   此时uni.o...
    99+
    2023-09-02
    webview 前端 微信小程序
  • iOS- APP唤起微信小程序
    最近做了一个新功能。App里面点击按钮,唤起微信小程序。 iOS-APP唤起微信小程序 App配置微信开发者平台配置服务端配置APP调用方案1 sharesdk:方案2:WechatOpenS...
    99+
    2023-09-16
    微信小程序 ios
  • 【微信小程序】wx.requestSubscribeMessage无法唤起小程序订阅弹窗
    报错信息:requestSubscribeMessage:fail can only be invoked by user TAP gesture. 报错原因:在某个场景的方法里面调用而不是直接通过用户点击 解决方法:一般可做成显示一个弹框...
    99+
    2023-08-17
    微信小程序
  • 小程序内嵌H5,调起微信分享
    该功能时作为H5调起小程序的微信分享 1:小程序方 在webview页面,打开分享的权限 wx.showShareMenu({ withShareTicket:true, menu:['shar...
    99+
    2023-09-25
    微信 小程序 微信小程序 Powered by 金山文档
  • 如何在微信内外部浏览器唤起小程序
    目的:通过发送短信召回流失用户。 官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-sc...
    99+
    2023-09-10
    小程序
  • 微信小程序跳转H5、小程序、App
    日常开发业务中会遇到微信小程序与H5、其他小程序、App之间的相互跳转,客户对引流用户非常在意。此处粗浅的介绍了微信小程序跳转H5、小程序、App的实现思路。 1、跳转H5 使用微信开放组件 web-...
    99+
    2023-09-24
    小程序 微信小程序 微信
  • 移动端H5唤起APP的写法实例(IOS、android)
    IOS 1.url scheme 这个方案基本上就是针对微信、qq内置浏览器,qq浏览器等之外的其余浏览器,从native那边要一个scheme ,然后放在a标签里或者locati...
    99+
    2024-04-02
  • H5如何实现唤起APP及调试bug解决
    目录前言:唤端url schema打开方式:适用性:前言: 为什么我对这个突然感兴趣呢,是因为最近在做需求的时候存在H5收银台唤起vx/jfb app的场景,但在调试时总会有bug(...
    99+
    2023-05-19
    H5唤起APP调试bug H5 APP
  • H5分享h5页面、小程序到微信
    1、H5分享h5页面(卡片链接形式)到微信 先去微信公众平台填写js接口安全域名 本来想用微信开发js-sdk的,但是做了半天好像没啥效果 概述 | 微信开放文档 (qq.com) 引入js文件:http://res.wx.qq.com/o...
    99+
    2023-09-06
    微信 uni-app html5
  • Vue中H5页面如何唤起支付宝支付功能
    这篇文章给大家分享的是有关Vue中H5页面如何唤起支付宝支付功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍...
    99+
    2024-04-02
  • h5页面如何连接小程序
    在h5页面中连接小程序的方法首先,在小程序页面内嵌h5网页;<view class="page-body"><web-view src="https://xxx.com/test.html&q...
    99+
    2024-04-02
  • 小程序内嵌H5那些事儿
    什么是小程序内嵌H5 小程序内嵌H5是指将一个H5页面嵌入到小程序中的一种方式 小程序内嵌H5可以让用户在小程序中直接浏览和使用H5网页 同时也可以让开发者在小程序中使用H5网页的某些功能。 当原有的H5转相似业务逻辑的小程序时 除了内嵌H...
    99+
    2023-08-31
    小程序 前端 微信小程序
  • 小程序和H5有什么区别
    这篇文章给大家分享的是有关小程序和H5有什么区别的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序相信大家都已经不陌生了,它具备占用内存比较小,各个方面的功能比较齐全,开发的费用比较便宜等优势,说到这些人们...
    99+
    2023-06-27
  • H5跳小程序的三种方法
    1、H5页面嵌入到小程序中,H5跳本小程序其他页面 wx.miniProgram.navigateTo({ url: '/pages/product/detailsfrom=智能客服微信小程序...
    99+
    2023-09-05
    小程序 微信小程序
  • uniapp小程序使用web-view承载的html页面是uniapp H5时,H5与小程序通讯
    最近在小程序项目用到web-view,需要web-view承载的H5和小程序通讯,碰到个大坑,所以写一下实现过程及怎么避坑。 一、小程序向web-view承载的H5传递参数,直接在url后接参数即可(xxxxx.com) 二、H5向...
    99+
    2023-08-31
    uni-app 微信小程序 vue 前端 javascript
  • 微信小程序 h5页面跳转小程序(超详细讲解)
    h5跳转小程序 实战项目从无到完整的h5跳转小程序经验,跳转方式分为云函数跳转和开放性标签跳转。 开放性标签是针对微信里面浏览器使用的,而云函数跳转在外部以及微信里面都可以使用。 建议需要的同学先全部...
    99+
    2023-09-11
    微信小程序 小程序 微信 前端
  • 小程序内嵌H5页面监听小程序的返回事件
    因为业务上有需求,在开发小程序的时候有些页面要使用web-view组件嵌套H5页面 有个页面内有个表单,在表单内容还为填写完成的时候,监听用户点击左上角返回事件,弹出一个提示框,因为H5页面在小程序中的层级很高,所以弹出提示框只能在H5页面...
    99+
    2023-09-13
    小程序 前端 javascript
  • 小程序中如何嵌套H5页面
    小程序使用webview组件嵌套h5页面首先,在小程序wxml文件中直接用webview组件,用src属性绑定h5页面的网址;<web-view src="h5页面的网站"></web-vie...
    99+
    2024-04-02
  • 小程序如何外链到H5页面
    在小程序使用web-view组件外链到h5页面新建一个web-view标签,并指向h5页面的链接;<web-view src="h5页面链接"> </web-view>通过 w...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作