- 怎样使用短链实现带参数唤起公众号?
现在是能够扫描带参数的二维码来识别事件,怎么样做到使用短链携带参数来唤起公众号啊
2021-04-08 - 如何在微信内外部浏览器唤起小程序
微信外部浏览器唤起微信小程序目的:通过发送短信召回流失用户。官方文档地址https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html步骤一该API我们主要用到的配置如下:jump_wxa:跳转到的目标小程序信息。该对象内包含两个字段。path:通过scheme码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带queryquery:通过scheme码进入小程序时的query。步骤二需要注意的是,query必传,然而如果我们需要跳转的页面不需要参数,也需要配置上query,默认我们填写的是from=sms, 用于统计是从浏览器渠道来的。步骤三与后端约定access_token 通过前端传递appKey进行区分,传哪个微信小程序的appKey 就生成对应小程序的access_token。步骤四支持设置scheme的过期时间,默认永久,我们的应用场景很少,暂不详说。步骤五代码里操作如下,由后端聚合参数信息。let postData = { appKey: 'QTSHE_MINI_APP', path: 'pages/partdetails/partdetails', query: 'partJobId=123456' || 'a=1' } this.$axios.post('/qtsWeChat/wechat/qrCode/scheme/info', postData).then((res) => { if (res.success) { const url = res.data.openlink // 将scheme转为我们平台的短链接,否则在安卓手机上无法打开微信小程序,会默认打开浏览器搜索。 this.$axios.get(`/misc/shortLink/conversion`, {url}).then((res) => { if (res.success) { this.shortLink = res.data } }) } else { this.$Message.error('获取失败,请稍后重试') } }).catch((err) => { console.log(err) }) 注意点该链接只支持在外部浏览器打开,微信内部浏览器访问是无法打开的,微信内部浏览器打开需要使用微信的开放标签<wx-open-launch-weapp>,下面详说。微信内部浏览器唤起小程序官方文档地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html步骤一首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,该域名我们配置的是https://m.qtshe.com, 所以导致我们调试的时候需要每次都发布到线上看效果(大坑)。步骤二在需要调用JS接口的页面引入如下JS文件:https://res.wx.qq.com/open/js/jweixin-1.6.0.js,1.6.0版本内才增加了上述标签,低于该版本的都无法显示。步骤三通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签,内置两个开放标签 [代码]wx-open-launch-app[代码] 微信h5唤起本地已经安装的app,以及 [代码]wx-open-launch-weapp[代码] 微信h5唤起小程序,操作如下:window.wx.config({ debug: false, appId: window.g_info.wx_appid, timestamp: data.data.timestamp, nonceStr: data.data.nonceStr, signature: data.data.signature, jsApiList: [], openTagList: [ 'wx-open-launch-app', 'wx-open-launch-weapp' ] }) 注意点对于Vue等视图框架,为了避免template标签冲突的问题,可使用[代码]<script type="text/wxtag-template"></script>[代码]进行代替,来包裹插槽模版和样式。页面中与布局和定位相关的样式,如[代码]position: fixed; top -100;[代码]等,尽量不要写在插槽模版的节点中,请声明在标签或其父节点上;对于有CSP要求的页面,需要添加白名单[代码]frame-src https://*.qq.com webcompt:[代码],才能在页面中正常使用开放标签。Vue里操作代码如下,如果需要写样式,最好是外部包一个div进行样式编写,内部的内容宽高100%即可,调试样式可使用微信开发者工具的网页模式:<style> img { width: 100%; display: block; } </style><img src=" https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" /> 示例效果[图片] 扩展// 各个端口跳转兼职详情页 jumpToPartJobDetail(partJobId) { util.isAliMiniApp().then((res) => { if (res) { // 如果是在支付宝小程序环境则打开小程序详情页 my.navigateTo({ url: `/pages/partdetails/partdetails?partJobId=${partJobId}` }) } else { // 如果是在客户端app环境,则打开原生岗位详情页 if (util.isAndroidApp() || util.isIosApp()) { jsBridge.evokeNormalPartJobDetailPage(partJobId) } else if (util.isMiniApp()) { // 微信小程序里则打开微信小程序岗位详情 wx.miniProgram.navigateTo({ url: `/pages/partdetails/partdetails?partJobId=${partJobId}` }) } else if (util.isMobile()) { // 如果是在手机自带浏览器或者除微信外的app浏览器,统一打开支付宝小程序 let url = `alipays://platformapi/startapp?appId=2018082861168647&page=pages/partdetails/partdetails&query=partJobId%3D${partJobId}` window.location.href = `https://ds.alipay.com/?scheme=${encodeURIComponent(url)}` } else { // pc端打开h5的兼职详情页 window.location.href = `/app/partdetails?partJobId=${partJobId}` } } }) } 具体示例https://m.qtshe.com/test.html为了方便运营同学,做了个工具给他们使用。 [图片] 4.11号新版本后的改版方案: 首先做一个落地页:https://b.qtshe.com/1DF43E 代码如下: import toast from 'toast' export default { created() { this.init() }, methods: { // 获取微信scheme地址,并且主动跳转一次 init() { this.$axios.post(`https://xxx/你们的接口地址/user/device/scheme`, this.$route.query).then(res => { if (res.success) { window.location.href = res.data } else { toast(res.msg) } }).catch(() => { toast('服务器错误,请稍后重试') }) } } } 原理:通过地址栏配置需要跳转的参数,h5页面拿到参数后通过接口转换为weixin://xxxx 开头的scheme协议地址,并且主动location.href一次。这样能保证用户每次打开都是新的scheme地址,针对一天50w数量上限的问题,可尝试同一个用户在固定时间内相同的参数,返回相同的scheme地址。 以上限制只存在于除微信外的外部浏览器,微信容器里没有以上的限制。
2023-04-27 - 关于小程序的基础库
小程序基础库的组成 基础库成分 关于基础库的成分,不得不提到我们之前说过的小程序渲染机制,参考 React 的 Virtual DOM。 [图片] 基础库除了处理 VD 的渲染问题,它还包括内置组件和逻辑层API,总的来说负责处理数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑。 小程序的基础库是 JavaScript 编写的,它可以被注入到渲染层和逻辑层运行。在渲染层可以用各类组件组建界面的元素,在逻辑层可以用各类 API 来处理各种逻辑。 同时,小程序的一些补充能力:自定义组件和插件,也有相应的基础代码,当然也需要添加到基础库里。 所以我们可以看到,小程序的基础库主要包括: 提供 VD 渲染机制相关基础代码。(Exparser 框架) 提供封装后的内置组件。 提供逻辑层的 API。 提供其他补充能力(自定义组件和插件等)的基础代码。 [图片] Exparser 框架 Exparser 是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持。 小程序内的所有组件,包括内置组件和自定义组件,都由 Exparser 组织管理。 Exparser 会维护整个页面的节点树相关信息,包括节点的属性、事件绑定等,相当于一个简化版的 Shadow DOM 实现。Exparser 的主要特点包括以下几点: 基于 Shadow DOM 模型:模型上与 WebComponents 的 ShadowDOM 高度相似,但不依赖浏览器的原生支持,也没有其他依赖库;实现时,还针对性地增加了其他 API 以支持小程序组件编程。 可在纯 JS 环境中运行:这意味着逻辑层也具有一定的组件树组织能力。 高效轻量:性能表现好,在组件实例极多的环境下表现尤其优异,同时代码尺寸也较小。 基于这个框架,内置了一套组件,以涵盖小程序的基础功能,便于开发者快速搭建出任何界面。同时也提供了自定义组件的能力,开发者可以自行扩展更多的组件,以实现代码复用。 内置组件 小程序基于 Exparser 框架,内置了一套组件,提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。 内置组件在小程序框架里的定义是:在小程序架构里无法实现或者实现不好某类功能,使用组件内置到小程序框架里。 常见包括: 开放类组件:如 open-data 组件提供展示群名称、用户信息等微信体系下的隐私信息,有 button 组件里 open-type 属性所提供分享、跳转 App 等敏感操作的能力 视图容器类组件:如 movable-view 这种因双线程模型导致手势识别不好实现的组件(在双线程模型中,触摸事件从渲染层发出,派发到逻辑层,这中间是有一定的延时而导致视图跟随手指运动这类交互变得有些卡顿) API 宿主环境提供了丰富的API,可以很方便调起微信提供的能力。 小程序提供的 API 按照功能主要分为几大类:网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口。 需要注意 API 调用大多都是异步的。 自定义组件 自定义组件是开发者可以自行扩充的组件。开发者可以将常用的节点树结构提取成自定义组件,实现代码复用。 在使用自定义组件的小程序页面中,Exparser 将接管所有的自定义组件注册与实例化。以 Component 为例: 在小程序启动时,构造器会将开发者设置的 properties、data、methods 等定义段,写入 Exparser 的组件注册表中。 这个组件在被其它组件引用时,就可以根据这些注册信息来创建自定义组件的实例。 Page 构造器的大体运行流程与之相仿,只是参数形式不一样。这样每个页面就有一个与之对应的组件,称为“页面根组件”。 在初始化页面时,Exparser 会创建出页面根组件的一个实例,用到的其他组件也会响应创建组件实例(这是一个递归的过程)。 插件 插件是对一组 js 接口、自定义组件或页面的封装,用于嵌入到小程序中使用。 插件不能独立运行,必须嵌入在其他小程序中才能被用户使用;而第三方小程序在使用插件时,也无法看到插件的代码。因此,插件适合用来封装自己的功能或服务,提供给第三方小程序进行展示和使用。 插件开发者可以像开发小程序一样编写一个插件并上传代码,在插件发布之后,其他小程序方可调用。小程序平台会托管插件代码,其他小程序调用时,上传的插件代码会随小程序一起下载运行。 小程序基础库机制 基础库的载入 在开发网页时,经常会引用很多开源的 JS 库,在使用到这些库所提供的 API 前,我们需要先在业务代码前边引入这些库。 同样道理,我们需要在启动 APP 之前载入基础库,接着再载入业务代码。由于小程序的渲染层和逻辑层是两个线程管理,而我们 一般说起基础库,也通常包括 WebView 基础库(渲染层),和 AppService 基础库(逻辑层)。 显然,所有小程序在微信客户端打开的时候,都需要注入相同的基础库。所以,小程序的基础库不会被打包在某个小程序的代码包里边,它会被提前内置在微信客户端。 将基础库内置在微信客户端,有两个好处: 降低业务小程序的代码包大小。 可以单独修复基础库中的Bug,无需修改到业务小程序的代码包。 小程序的启动 在小程序启动前,微信会提前准备好一个页面层级用于展示小程序的首页。 这里就包括了逻辑层和渲染层分别的初始化以及公共库的注入。 [图片] 在小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:下载小程序代码包、加载小程序代码包、初始化小程序首页。 [图片] 基础库的更新 小程序的很多能力需要微信客户端来支撑,例如蓝牙、直播能力、微信运动等,可以说,小程序基础库的迭代离不开微信客户端的发布。 为了避免新版本的基础库给线上小程序带来未知的影响,微信客户端都是携带上一个稳定版的基础库发布的。等到微信客户端正式发布后,小程序会开始灰度推送新版本的基础库到微信客户端里,在这个过程需要仔细监控各类异常现象以及开发者和用户的反馈,一般灰度时长为12小时,灰度结束后,用户设备上就会有新版本的基础库。如果存在重大Bug,那此次推送会被回退。 参考 《小程序开发指南——小程序基础库的更新迭代》 《小程序开发指南——6.2 组件系统》 结束语 本节大致结合了小程序的启动来讲了下小程序的基础库。其实很多都能在小程序开发指南里找到,只是文字非常详(fan)细(duo),看一遍未必能记住,但是第二遍又找不到了。 哈哈哈吐槽下小程序的文档,很详细就是有点容易找不到。
2019-02-27