小程序与 app、h5 交互的多种方式及实现细则

2024-07-21
来源:网络整理

(注:本文中的小程序默认指微信小程序)

1.用app或者小程序打开h51.实现

关于h5中如何判断平台环境请参考另一篇文章:传送门

代码示例(小程序):

<web-view src="{{url}}" bindmessage="getMessage" >web-view>

2.用app打开小程序 1.微信开放平台SDK实现

具体细节可以参考官方文档:

3.从小程序打开APP 1.APP打开小程序后跳转回

详情可参考官方文档:传送门

代码示例:

<button open-type="launchApp" app-parameter="myParameters" binderror="onLaunchAppError" >打开APPbutton>

四、微信h5中打开小程序 1、微信open标签实现

详情可参考官方文档:传送门

代码示例:

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc" > <template> <style>.btn { padding: 12px }style> <button class="btn">打开小程序button> template> wx-open-launch-weapp>

2. 小程序代码实现

详情可参考官方文档:传送门

5.正常环境下打开小程序h5

这里的正常环境指的是普通浏览器或者微信以外的其他应用中的环境。

小程序的短信唤醒和普通的h5唤醒本质上是一样的。

1. 小程序URL实现

URL是页面跳转协议,通过定义自己的协议,可以方便的跳转到APP内各个页面。

这也是小程序在去年官方推出的方法,简单易用,值得推荐。

详情可参考官方文档:传送门

2.云开发静态托管h5实现

详情可参考官方文档:传送门

3. 小程序代码实现

详情可参考官方文档:传送门

6.从微信H5打开APP

在微信环境下,通过URL等方式打开应用的功能默认是被屏蔽的,除非你是白名单应用,比如腾讯的知乎等,否则普通应用就只能另寻出路了。

1.微信open tag实现

详情可参考官方文档:传送门

代码示例:

<wx-open-launch-app id="launch-btn" appid="your-appid" extinfo="your-extinfo" > <template> <style>.btn { padding: 12px }style> <button class="btn">打开Appbutton> template> wx-open-launch-app>

2.App 微下载的实现

App 微下载链接页面会自动判断运行平台,如果是安卓则跳转至该应用的App 详情页,如果是iOS则跳转至该应用的苹果App 详情页,如果该应用已经安装则会弹窗提示打开。

具体细节可以参考官方文档:

代码示例:

<a href="https://a.app.qq.com/o/simple.jsp?pkgname=com.test.testapp" >打开Appa>

3.右上角提示用浏览器打开

判断微信环境的代码示例:

const ua = window.navigator.userAgent.toLowerCase() const isWechat = (() => { return /MicroMessenger/i.test(ua) })()

7. 在正常环境下打开应用h5

这里的正常环境指的是普通浏览器或者微信以外的其他应用中的环境。

1. URL 实现

URL是页面跳转协议,通过定义自己的协议,可以方便的跳转到APP内各个页面。

代码示例:

<a href="pinduoduo://com.xunmeng.pinduoduo/" >打开Appa>

2. 实施

它是iOS9.0引入的新技术,如果App支持通用链接,那么你就可以通过链接打开App(如果手机上已经安装该App)或者跳转到链接(如果手机上没有安装该App)。

代码示例:

<a href="https://help.wechat.com/app/" >打开Appa>

参考链接:

分享