- 如何在所有场景中调起微信小程序
直戳原文首发地址 , 如果该文章有幸能帮助到您, 还望您能在 原文中点亮收藏。 背景 北京时间2021年05月21日14:52:02,本靓仔正用心的耍着掘金前端板块。此时微信头像闪动,一位仅次于我颜值的未成谋面的网页在群里艾特我: [图片] mp://xxxx, 看上去一个简单的微信协议,点击直接打开小程序。 这是什么时候出现的?还是有点点懵逼。不过还是挺有意思的。 [图片] 瞬间感觉自己脱离队伍, 还是决定研究一下。 小程序链接 如何生成协议 上天再给你打开一扇门的同时,就会为你关闭一扇窗,就像我们搞 前端 的虽然都有帅气的脸庞,但是还是花了几分钟的时间才在百度里面找到了答案。 安卓灰度功能,IOS目前暂未上架 使用安卓手机,右上角胶囊处三个点,点击复制链接功能,即可得到当前小程序的链接。应该也是微信新出的一种营销方式。 [图片] 这好像也没有什么难的啊? 是否能在H5中使用超链接打开? 奇奇怪怪的一个连接,这发出去了谁知道是什么啊,每个小程序长得又差不多? 那我们能不能在微信中使用超链接的形式让他唤起小程序呢?这样的话不就又可以在其他方面去扩宽我们的业务线了吗? <a class="yupao-footer-item" href="mp://Guxz6Z1Jxxxxxxx"> <span>打开小程序</span> </a> 复制代码 你有多大的期望,就会有多少的失望。这多么好的一个功能啊,结果就这样以失败告终了。不行,应该是我写的方式不对。虽然我没过520,但是在521我还是得多解锁几个姿势。 // html <a class="yupao-footer-item" href="javascript:void(0);" onClick="openMiniProgram"> <span>打开小程序</span> </a> // script function openMiniProgram() { window.location.href = "mp://Guxz6Z1Jxxxxxxx" } 复制代码 好吧当我放屁。无效。 微信内唤起小程序 细想,从入行到现在,我们曾被多少产品与测试摧残,这小小的挫折又算的了什么?在回顾一下他给出的链接吧,应该就是别人的先例。 微信开放标签 通过地址进去找到了如下有效信息。18🈲 ,未成年请在父母的陪同下进行观看 很丝滑,因为不想你们嫉妒我的颜值与才华并存我就直接总结。 微信SDK >= 1.6.0 , 微信提供了两个开放标签,分别是打开小程序与APP。 wx-open-launch-weapp (老司机专线1-VIP通道) 使用过程中简单的几步,我直接列出来吧。 升级微信sdk 先将sdk 调整到 1.6.0 , 点击预览sdk文件 配置开放标签 配置wx.config 文件,允许使用微信内置的开放标签 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [], // 必填,需要使用的JS接口列表 openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表 }); 复制代码 服务号必须认证,且添加js安全域名 登录服务号,右上角,点击进去认证 [图片] 添加js安全域名步骤: 左侧菜单 设置 -> 公众号设置 -> 功能设置 -> JS接口安全域名 [图片] 注意事项 微信版本要求为:7.0.12及以上 系统版本要求为:iOS 10.3及以上、Android 5.0及以上 书写代码 // html -> 微信开放标签包裹 username = 小程序原始id <wx-open-launch-weapp username="gh_aaaaaaaaaaa" id="launch-btn"> <!-- 样式文件 --> <style></style> <!-- 内容节点 --> <script type="text/wxtag-template"> <span>打开我高贵的小程序</span> </script> </wx-open-launch-weapp> // javascript var launchbtn = document.getElementById('launch-btn'); // 标签初始化完毕,可以进行点击操作 launchbtn.addEventListener('ready', function (e) { console.log('ready',e) }); // 用户点击跳转按钮并对确认弹窗进行操作后触发 launchbtn.addEventListener('launch', function (e) { console.log('success',e) }); // 用户点击跳转按钮后出现错误 launchbtn.addEventListener('error', function (e) { console.log('error',e) }); 复制代码 效果预览 [图片] 课后作业 wx-open-launch-app 差点已经这样就完了,@郭源潮 在评论中提到,微信外都可以打开小程序了... 不得不承认自己的掉队呀。 不过男人嘛,就应该 迎男而上 。 微信外开小程序 urlscheme 面向于百度开发的精华就在于,拿到问题点后能高效的找到问题结果。 点击收看 urlscheme.generate 官方文档 获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口,可以选择生成到期失效和永久有效的小程序码,目前仅针对国内非个人主体的小程序开放 直接上货。 基本准备 非个人小程序 postman / other request tool 实现方式 先获取当前小程序的 ACCESS_TOKEN 这一步是十分简单的, 直接浏览器访问一下也可以 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 复制代码 拿到 ACCESS_TOKEN 之后, 我们还需要使用post请求另一个接口,来获取小程序 scheme 协议。 POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN 属性 类型 必填 说明 access_token string 是 接口调用凭证 jump_wxa Object 否 跳转到的目标小程序信息。 is_expire boolean 否 生成的 scheme 码类型,到期失效:true,永久有效:false。 expire_time number 否 到期失效的 scheme 码的失效时间,为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。生成到期失效的scheme时必填。 复制代码 没必要在乎这么多,如果你仅仅只是测试,那么久只需要记住一句话。 使用post 请求一下该接口。 [图片] ok, 协议到手,赶快将其加入到我们的代码中进行测试。 <a href="weixin://dl/business/?t=kJxxxxxxxx"> <span>打开我的小程序</span> </a> 复制代码 [图片] 业务突然变得,好安静~! 这样的话,我们基本上在微信内外,APP中都能打开小程序了。足以满足我们绝大部分的营销需求。 结语 礼毕,全体起立。 感谢@郭源潮 提出的 微信外打开小程序观点。 解释一下,我是一个清纯的boy, 有些东西是我朋友告诉我的。 如果你有什么新鲜的玩法,欢迎留言,我们一起研究。 JavaScript水军+v = zzxxzxxx, 备注 掘金 诚聘高级react,有能力+责任感推管理职位哦。 作者:你压到我腿毛了 链接:https://juejin.cn/post/6965051203180822565 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
2021-05-24 - 好的经验要分享:chooseImage转base64
好的经验必须要分享:chooseImage后转base64 现在网上各种帖子的解决方案存在各种各样的问题,不说了,直接贴代码,手机亲测,没有问题 const fileManager = wx.getFileSystemManager(); [图片]
2018-08-31