h5打开小程序的方法总结.pdfVIP

h5打开⼩程序的⽅法总结 两种⽅法，⼀种是通过 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接⼝安全域名】- 输⼊要配置的域名 - 将⽂件给后端放到服务器上 2. 接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 ，需要在项⽬中⾃⼰加上） 3. 写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 中的节