IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> h5-浏览器点击跳转微信小程序或微信内部广告页(微信浏览器)跳转小程序的实现方法。 -> 正文阅读

[移动开发]h5-浏览器点击跳转微信小程序或微信内部广告页(微信浏览器)跳转小程序的实现方法。

一.微信内部浏览器使用<微信开放标签>唤起微信小程序

官方开发文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html](%5Bhttps://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html%5D%28https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html%29)
之前我也跟着开发文档走,发现遇到很多坑。

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
指的是要绑定可访问的安全域名,类似你想在 http://www.baidu.com/demo.html这个页面打开微信小程序,那么你就需要绑定www.baidu.com这个域名

2. 引入JS文件

在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
备注:支持使用 AMD/CMD 标准模块加载方法加载。
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
这一块没什么注意的,引入就完事了。

3. 通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个url仅需调用一次)。开放标签的申请和JS接口的申请相互独立,因此是可以同时申请的。

        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
            appId: '', // 必填,公众号的唯一标识    //后台返还
            timestamp: '', // 必填,生成签名的时间戳    //后台返还
            nonceStr: '', // 必填,生成签名的随机串    //后台返还
            signature: '',// 必填,签名    //后台返还
            jsApiList: [], // 必填,需要使用的JS接口列表 可选'chooseImage'等
            openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']   
        });

签名的相关信息可以通过https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
让后端请求相关接口获取
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
这一块也没什么坑吧,把相关数据放入即可。

4. 通过ready接口处理成功验证

        wx.ready(function () {
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
        });

5. 通过error接口处理失败验证

        wx.error(function (res) {
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
        });

把上述数据配置好即可,就可以实现微信浏览器唤起微信小程序了。当然这里也有官方提供的例子。
大家可以参考进行配置。
https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

二.微信外部浏览器使用URL Scheme唤起微信小程序

官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。

直接使用如下代码就可以在外部浏览器打开微信小程序,当然也可以在点击的时候触发下列的事件。
iOS系统支持识别 URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme,用户无法通过 Scheme 正常打开小程序,开发者需要使用 H5 页面中转,再跳转到 Scheme 实现打开小程序,跳转代码示例如下:

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

服务端获取方法:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

首先请求https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
拿到access_token,再使用access_token请求https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN来拿到对应的URL Scheme,如下图。
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
最后我们可以通过上述的两个接口,拿到我们想要的link,如这样weixin://dl/business/?t= TICKET的形式,直接打开即可。
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
需要注意的是,这个方法只能在微信外部浏览器使用,微信内部浏览器需要使用微信开放标签,另外安卓和ios是有区别得。

展示效果如图所示

请添加图片描述

欢迎大家交流,有问题可以直接评论提出。

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-08-24 15:41:26  更:2021-08-24 15:43:01 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:03:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码