- 如何查看并复制小程序的页面路径?
1.需求: 在发布微信公众号文章时,我们可以添加微信小程序的入口,默认是跳转到小程序的首页,但是首页远远不是我们想要的,我们想要复制任何一个页面的页面路径,让读者可以跳转任意页面,所以我们就需要复制小程序的页面路径,微信官方也提供了复制页面路径的方法,接下来请按照以下步骤操作,即可完成。 2.步骤: 公众号添加微信小程序 登陆微信公众号平台,打开编写图文消息的页面,点击小程序,弹出选择小程序弹窗,这里需要我们根据小程序名称/AppID/帐号原始ID去搜索。 [图片] 如何获取小程序AppId 找到你想要跳转的小程序,点击右上角三个点,然后弹出小程序信息的弹窗,进入小程序的页面,点击更多资料,即可以看到小程序的AppID和原始ID。然后复制AppID或原始ID到步骤一去搜索。下面我用微信开放社区小程序举个例子,告诉大家如何找到微信小程序的AppID。 [图片] 打开小程序的复制路径的权限,在第一步中我们输入小程序AppID,搜索出微信开放社区小程序,然后点击下一步,进入填写详细信息弹窗中,默认小程序路径为小程序首页路径,这里我们选择【获取更多页面路径】,然后右侧弹出窗口,将你的微信号输入进去即可开启复制页面路径的入口。[图片] 去小程序中获取制定页面路径:打开微信开放社区小程序,进入到你想要复制页面路径的页面,点击右上角三个点,弹出弹窗,在第二排又一个按钮【复制页面路径】,点击即可复制。[图片] 以此类推,我们可以复制任何其他小程序的链接,但是如果复制出的链接中包含一些参数,导致跳转出了问题,这就要弄清楚参数的含义了。注意⚠️:复制出来的页面路径在小程序里使用的时候记得删除 .html 才能正常访问
2021-02-27 - 微信小程序新能力:URL Scheme,可从短信跳转小程序
最近小程序上线了一个超级流量的新入口:URL Scheme。通过小程序页面的URL Scheme,可以在短信、邮件或微信外部的网页中打开小程序。 那么如何实现呢?官方文档已经写的很清楚啦,这里简单介绍一下。 首先,获取URL Scheme,通过服务端接口可以获取打开小程序任意页面的URL Scheme,支持生成到期失效和永久有效的URL Scheme。 [图片] 然后,通过短信群发平台将获取的URL Scheme + 营销文案发送到用户的手机上。 最后,用户收到短信后,直接点击URL Scheme唤起微信,跳转到对应小程序页面,就是这么简单。 除此之外,还可以通过邮件或外部浏览器打开跳转小程序。 由于部分操作系统仍不支持直接识别URL Scheme,因此直接将Scheme发送给用户可能存在无法打开小程序的情况。 为此,我们可以先准备一个H5页面,再从H5页面跳转到URL Scheme实现打开小程序。 [代码]location.href = 'weixin://dl/business/?ticket= *TICKET*' [代码] H5的示例代码我已经更新到Github,可以复用起来,基于官方的案例做了些改动,增加PC端打开时生成二维码方便手机扫码使用。 这次新能力的更新将使微信小程序不再局限于微信内部的流量,天花板被掀开啦。 而且短信和邮件营销的触达成本非常低,营销成本的压低也会催生出很多新的流量玩法,我们敬请期待吧。
2021-01-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('xxx', postData).then((res) => { if (res.success) { const url = res.data.openlink // 将scheme转为我们平台的短链接,否则在安卓手机上无法打开微信小程序,会默认打开浏览器搜索。 this.$axios.get(`xxx`, {url}).then((res) => { if (res.success) { this.shortLink = res.data // 将weixin://xxxx 转换为 https://b.qtshe.com/xxx } }) } else { this.$Message.error('获取失败,请稍后重试') } }).catch((err) => { console.log(err) this.$Message.error('获取失败,请稍后重试') }) 微信内部浏览器唤起小程序官方文档地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html步骤一首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,未配置会导致wx.config签名失败,导致无法使用开放标签。步骤二在需要调用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唤起小程序,操作如下:wx.config({ debug: false, appId: window.g_info.wx_appid, // 全局变量appId timestamp: data.data.timestamp, // 调用微信接口返回的 nonceStr: data.data.nonceStr, // 调用微信接口返回的 signature: data.data.signature, // 调用微信接口返回的 jsApiList: ['openLocation', 'getLocation'], // 这里需要任意填写api,不能为空 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%即可,调试样式可使用微信开发者工具的网页模式: .quick-btn { // 这里写样式 width: 3.43rem; height: 0.96rem; display: flex; img { width: 100%; display: block; } } <div class="quick-btn"> <img src="https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" /> </div> 示例效果[图片] 为了方便运营同学,做了个工具给他们使用。 [图片] 2023年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年12月18日后方案: 官方公告如下: https://developers.weixin.qq.com/community/develop/doc/00024e32cbc36055c0c0a34b066401 ,没有外部浏览器、微信环境的限制,可以被多人打开。 使用方式通过明文拼接: weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION* 示例: // query需要encode编码,ENV_VERSION为控制打开开发版、体验版、线上版本 weixin://dl/business/?appid=wxa7b0b022472e55e6&path=pages/partdetails/partdetails&query=partJobId%3D123456 通过明文 URL Scheme 拉起的小程序(页面)必须要提前在「小程序管理后台 -> 设置 -> 隐私与安全 -> 明文 scheme 拉起此小程序」中进行声明; 小程序:配置能够通过明文 scheme 进入的小程序页面[图片] 这一点很烦很烦,希望能支持下 默认可打开所有的,不然每次都得去配置。
08-07 - 微信 schema 跳转之非官方文档
微信“应该”是最近开放了 schema 跳转小程序 的能力,大大方便了短信、邮件、外部网页等唤起微信小程序。 schema 链接格式大体是这样:[代码]weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e[代码],但是这段文本在安卓端无法识别。小规模测试结果如下: [图片] 后来想到用一个正常能够识别的网页地址,内容是重定向到指定的 schema 链接。这就是擅长的领域了,query 参数上带上 schema 链接,location.href 一下不就行了。这里就不 show 代码了,能看到文章的你一定行。 但是,发现在部分安卓手机下(如小米)还是没反应,原来简单的 schema 跳转水这么深的,于是百度谷歌了一下,找到了下面两份关键材料: H5唤起APP进行分享的尝试 AlanZhang001/H5CallUpNative: H5端唤醒移动客户端程序 看源码也不多,总结下来,因不同系统和浏览器对 schema 规范的理解不同,还有一些商业因素,不同环境下面需要用不同的方式进行跳转,甚至有的环境你根本就跳不了。 时间紧,任务重。简单处理吧,不同方式都来一遍,谁好使就用谁。所以简单总结了下,能用的几种方式: location 跳转 a 链接跳转 iframe 跳转 以上三种方式,逐一试用,最后实在不行就不行吧,简单处理,看有没有大神补充的。 相关代码如下: location [代码]location.href = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e"; [代码] a 链接跳转 [代码]var aLink = document.createElement("a"); aLink.className = 'call_up_a_link'; aLink.href = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e"; aLink.style.cssText = "display:none;width:0px;height:0px;"; document.body.appendChild(aLink); aLink.click(); [代码] iframe [代码]var iframe = document.createElement('iframe'); iframe.className = 'call_up_iframe'; iframe.src = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e"; iframe.style.cssText = "display:none;width:0px;height:0px;"; document.body.appendChild(iframe); [代码] 以上代码均可从参考资料中找到出处,感谢 是直接一进来就执行,还是事件触发,都可以。或者是一开始进来就执行,失败了显示几个可选跳转按钮让用户手动触发跳转。 但是关键问题还有一个,如何判断是可以成功唤起了呢?上述 github 代码里提到了一个根据页面 hidden 状态,但不够精准,如果用户没有选择跳转到微信呢?这是另一个需要深究的问题。 出于时间考虑,先以业务交付优先,如果有朋友知道的也可以一起讨论下。 另行文时间短,以技术交流为主,若有瑕疵,欢迎指出。 附上 vue 版本源码:微信 schema 跳转 参考链接: 微信官方文档:urlscheme.generate H5唤起APP进行分享的尝试 AlanZhang001/H5CallUpNative: H5端唤醒移动客户端程序 安卓端,微信schema无法跳转微信小程序?
2021-01-04 - 如何在微信开放社区正确提问?
引言一个看起来超级简单的问题,但是很多提问者提出的问题往往能瞬间劝退一众社区热心用户和官方客服,这一点相信很多人都会深有体会。如果大家都能够正确提问,不仅能够极大的节省解决问答双方(提问者和答题者)的时间,而且能够让双方都能够保持一个愉悦的心情(千万不要陷入到"鸡同鸭讲"的方式中,如果那样估计没有人会心情开心,甚至到最后都不想回复对方了)。善用搜索,学会提问能更快的解决你遇到的问题。提问时请严格遵守微信开放社区运营规范,不要发灌水帖、刷屏等,否则会遭到投诉举报被官方童鞋删帖,甚至关小黑屋。 提问前请先明确如下几点:1.请先在首页搜索你遇到的相关问题,看能不能够搜索到和你那个类似或相近的问题。如果有,先点进问题里面去查看下,一般来说,很多类似的问题都会相应的解答方案,可能那些解答方案也能够解决你现在遇到的这个问题。 [图片] 当你确定第一种方案不能够解决你现在遇到的问题时,请在提问前想清楚提问的方式和自己想要得到怎样的答复,然后在对应的问题模块进行提问。 [图片] [图片] 如果不是小程序的问题,就在对应的专区选择相应的模块进行提问。 2.你遇到的是一个什么问题,必须要明确问题所属的类别,让大家一看就能够知道你的问题所在。社区的问题范围很广,但你直接问问题,会导致很多人不知道你遇到的是公众号问题、小程序问题、小商店问题还是微信支付等其他方面的问题,所以切忌一上来就发问。 例如:为什么我的号登陆不了了,昨天还是好好的怎么今天就登陆出问题呢?客服来帮我看下,急急急 [图片] 这种提问方式只会耽误问答双方的时间,没人知道你到底想问的是什么,甚至到最后都无法解决问题。现在恐怕很多答题者遇到类似的问题都会直接忽略了吧。 3.礼貌提问,态度很重要,这一点足以决定是否有用户或客服会回复你提出的问题。 例如:审核人员睡醒了吗?起来干活了。你们凭什么把我的小程序封了,我小程序申述都三天了,咋一点消息都没有,怎么审核人员这么墨迹这么懒,还不通过啊? [图片] 礼貌提问是前提,不会礼貌提问的话,是没有人会回复你的,而且有些人发文就怼,不分青红皂白的谩骂,那种帖子客服看到了会及时清理掉,因为这种人根本不是来解决问题的,就是来挑事的,没人会理你。 4.在确定问题所属的类别之后,尽量用简洁明了且通俗易懂的语言说明自己遇到的问题,最好能够附上出现问题的截图或者代码等。 例如:你遇到的是 小程序审核相关的问题。请提供小程序appid、原始id、登录邮箱、提审时间、驳回信息、站内信等信息 小程序代码相关的问题。请提供小程序appid、原始id、基础库版本、工具版本、手机版本、代码片段等信息 公众号违规相关的问题。请提供公众号原始id、登录邮箱、公众号名称、站内信等信息 公众号审核相关的问题。请提供公众号原始id、登录邮箱、提审时间、驳回信息等信息 公众号或者小程序认证相关问题。请提供营业执照截图、公众号或小程序认证失败的截图等信息 正确的提问示例:[图片] 示例图一 [图片] 示例图二 [图片] 示例图三 总结:明确提问的方向且详细描述遇到问题,对于及时解决问题具有非常大的帮助。轻松愉悦的提问,类似于我们的日常闲聊,这种问题让对方一般会很容易回答,若你的问题及时且准确的得到了解决,请你务必多花一秒钟的时间,给那个愿意花费时间认真且耐心帮你解答问题的人点一个“有用”。这会让他回答的问题更有意义,让更多的人看到这个问题解决的方式,同时也能够激发答题者的积极性,使答题者能够更愉悦的投身到其他的战场
2020-11-27 - 微信开放社区正确的提问方式
调侃 某萌新:为什么我在社区提问的问题都没人回答啊 某大佬:社区的问题质量是越来越低了,真不想看社区的问题了 如何提问 今天,在下就来告诉大家如何优雅的提问: 在提问之前,先想好自己遇到的问题是什么,让想要帮助你的人,知道你的问题所在 提问语言简洁明了,详细说明重现步骤及可能存在的问题 附上问题截图,比如调试工具报错信息、提审被驳回信息 写明代码环境,如工具版本、手机版本、基础库版本等 如果调用接口报错,请直接把接口的官方文档地址贴出来,标明调用接口地址,附上请求的参数以及返回的数据 必要时请提供代码截图或代码片段 点击查看如何创建代码片段 最重要的一点:提问时请务必注意礼貌。这一点特别重要,因为这关乎到回答者决定要不要回答以及以怎么样的态度来回答 依然是重要的一点:请务必给认真回答协助解决问题的回答者一个“赞”,这会更加激起他们回答的积极性 千万不要投机,把问题提到“文章”版块,这样会被直接隐藏。不仅不会加快被解答的速度,还会耽误解答机会 示例 (仅为示例,不代表该问题实际存在) 标题:picker组件多级联动会出现选项为 null 的情况? 内容: 使用picker组件,设定为多级联动,仅滚动一级栏后确定,后面的栏目获取到的值为 null,能麻烦帮忙看下吗?最新版开发者工具,基础库版本 2.9.2 代码片段:xxxxxxxxxxxxxxxx 继续调侃 某萌新:诶?真的诶,这样提问,好多问题都被解决了 某大佬:这问题问得是真的好,多来点这样的问题,回答也舒坦
2020-01-03 - extend-sdk文档
简介 小程序扩展SDK是使用装饰器模式扩展生命周期,接入后,自动扩展小程序[代码]App[代码]、[代码]Page[代码]、[代码]Component[代码]的生命周期,提供更加丰富的生命周期扩展的工具。 功能介绍 新增已登录的页面生命周期 新增分享完成的回调 新增组件已登录生命周期 新增App生命周期,监听来自页面的onLoad,onShow,onHide,onUnload等 页面自动加上分享(含朋友圈)、并支持分享的兜底配置 获取当前页面显示/隐藏状态 获取页面展示次数(onShow调用次数) 小程序定时器管理 节流抖动观察者模式 快速接入SDK 下载extend-sdk-config.js、extend-sdk.js,并放在utils目录下 在[代码]app.js[代码]里引用sdk [代码]import { es_event } from './utils/extend-sdk.js'; [代码] 登陆完成后触发[代码]es_event.emit('es_login');[代码] [代码]// 例如 App({ onLaunch(){ this.login(); }, login(){ wx.login({ success: (res) => { wx.request({ url:"你的登陆URL", methon:"POST", data:{code:res.code}, success(res){ // 登陆成功 es_event.emit('es_login') } }) }); } }) [代码] 若不需要接入登陆事件,可在onLaunch直接触发事件 [代码]import { es_event } from './utils/extend-sdk.js'; App({ onLaunch(){ es_event.emit('es_login'); } }) [代码] 验证是否接入成功 在页面[代码]onShow[代码]打印[代码]es_pageShowCount[代码] [代码]Page({ onShow(){ console.log("=== es_pageShowCount ===",this.es_pageShowCount) } }) [代码] 若[代码]es_pageShowCount[代码]打印结果是1,则说明[代码]extend-sdk.js[代码]引入成功 在页面监听[代码]es_onShow[代码] [代码]Page({ es_onShow(){ console.log("=== 当前已登陆,并且页面显示 ===") } }) [代码] 若打印出[代码]=== 当前已登陆,并且页面显示 ===[代码],则代表sdk成功接收到登陆事件,恭喜你,已全部接入完成 若没有打印出预期,请重新检查接入步骤 功能介绍 新增页面生命周期(Page) es_onLoad(Object query) 页面加载且已登录时触发; 一个页面只会调用一次; query:打开当前页面路径中的参数 [代码]// 应用场景:不用手动判断用户是否已登录 Page({ es_onLoad(){ // 获取我的优惠券 this.getCoupon(); }, getCoupon(){ // 用户已登陆,直接请求服务端获取优惠券列表 } }) [代码] es_onShow() 页面显示/切入前台且已登录时触发 [代码]Page({ es_onShow(){ // 刷新最新邀请进度 this.getInviteInfo(); }, getInviteInfo(){ // 用户已登录,直接请求获取邀请进度数据 } }) [代码] es_onHide() 页面隐藏/切入后台且已登录时触发 es_onUnload 页面卸载且已登录时触发 es_onShareAppMessage 页面完成分享,回到页面时触发 [代码]// 应用场景 Page({ es_onShareAppMessage(){ // 完成分享后奖励逻辑、比如赠送积分 } }) [代码] es_onShareTimeline 页面完成分享到朋友圈,回到页面时触发 [代码]// 应用场景 Page({ es_onShareAppMessage(){ // 完成分享到朋友圈后奖励逻辑、比如赠送积分 } }) [代码] 新增组件生命周期(Component) es_onLoad 当页面加载,并且已登陆时触发 [代码]// 应用场景:保证用户已登录再发起 Component({ methods(){ es_onLoad(){ this.getCollectProduct(); }, getCollectProduct(){ // 发起请求,获取用户收藏的商品列表 } } }) [代码] es_onShow 当页面加载,并且已登陆时触发 [代码]// 应用场景:保证用户已登录再发起 Component({ methods(){ es_onShow(){ this.getCollectProduct(); }, getCollectProduct(){ // 发起请求,获取用户收藏的商品列表 } } }) [代码] es_onReachBottom 当页面触底时,触发组件里的es_onReachBottom方法 [代码]// 应用场景:在自定义组件,实现列表分页功能 Component({ pageIndex:1, // 当前分页页码 pageSize:10, // 每次分页数量 methods(){ es_onReachBottom(){ this.getList(); }, getList(){ wx.request({ url:"获取列表URL", data:{ pageIndex, pageSize }, success:(res)=>{ // 请求结果 } }) } }, }) [代码] 新增应用生命周期(App) es_pageOnLoad(that) 每次页面进行onLoad且已登录时,都会调用全局es_pageOnLoad query:打开当前页面路径中的参数 [代码]// 应用场景:自定义统计上报 App({ es_pageOnLoad(that){ console.log("页面加载"); console.log("获取页面打开参数:",that.options) // 上报页面加载事件 } }) [代码] es_pageOnShow(that) 每次页面进行onShow且已登录时,都会调用全局es_pageOnShow [代码]// 应用场景:自定义统计上报 App({ es_pageOnLoad(){ console.log("页面显示"); // 上报页面显示事件 } }) [代码] es_pageOnHide(that) 每次页面进行onHide且已登录时,都会调用全局es_pageOnHide [代码]// 应用场景:自定义统计上报 App({ es_pageOnLoad(){ console.log("页面隐藏"); // 上报页面隐藏事件 } }) [代码] es_pageOnUnload(that) 每次页面进行onUnload且已登录时,都会调用全局es_pageOnUnload [代码]// 应用场景:自定义统计上报 App({ es_pageOnLoad(){ console.log("页面销毁"); // 上报页面销毁事件 } }) [代码] es_pageOnPageScroll(that) 监听页面滚动事件 可在配置文件关闭 [代码]// 应用场景: 处理收集曝光,比如上报商品曝光 App({ es_pageOnPageScroll(){ console.log("页面滚动"); // 上报商品曝光 } }) [代码] 页面新增对象 es_pageShowCount 每次页面显示,都会自增 [代码]// 应用场景:刷新用户邀请进度 Page({ es_onLoad(){ wx.showLoading({ title:"加载数据中..." }) this.getInviteData(); }, es_onShow(){ if(this.es_pageShowCount>1){ this.getInviteData(); } }, getInviteData(){ // 获取邀请数据的逻辑 wx.request({ url:"邀请数据URL", success:(res)=>{ if(this.es_pageShowCount === 1){ wx.hideLoading(); } } }) } }) [代码] options 获取页面参数 [代码]Page({ onShow(){ console.log("页面参数 =",this.options) } }) [代码] es_pageShow 当前页面是显示,还是隐藏 [代码]Page({ onLoad(){ setInterval(()=>{ console.log(this.es_pageShow) },1000) } }) // 当页面在显示时,this.es_pageShow 为 true; // 当页面在后台时,this.es_pageShow 为 false; [代码] es_allComponent 自动挂载页面使用到的组件对象,以ID选择器作为key [代码] // 在index.wxml 引入自定义组件 Page({ onLoad(){ console.log(this.es_allComponent) } }) [代码] 组件新增对象 es_page 当前页面对象 [代码]Component({ ready() { console.log("当前组件挂载的页面对象:", this.es_page); }, }); [代码] 管理定时器 功能 解决:由于定时器是全局的,并不是跟页面绑定的,需要手动回收 自动回收定时器 实现定时器暂停和恢复 页面上使用 es_setInterval(fn,time) fn:代表定时器回调 time:执行的频率(毫秒) 返回定时器ID [代码]// 示例: Page({ onLoad(){ this.es_setInterval(()=>{ console.log("我是定时器") },1000) } }) // 执行后,点击模拟器Home,定时器会自动回收; // 显示页面时,定时器会重新启动 [代码] es_setTimeout(fn,time) fn:回调函数 time:延时器时间(毫秒) 返回延时器ID [代码]// 示例: Page({ onLoad(){ this.es_setTimeout(()=>{ console.log("我是延时器,5s后触发") },5000) } }) // 执行后,点击模拟器Home,延时器会自动暂停; // 显示页面时,延时器会自动重启 [代码] es_clearInterval(定时器ID) 主动清除定时器 备注:可不使用,页面隐藏、销毁sdk会自动回收 es_clearTimeout(延时器ID) 主动清除延时器 备注:可不使用,页面隐藏、销毁sdk会自动回收 组件里使用 [代码]Component({ ready(){ // 使用定时器 let intervalID = this.es_page.es_setInterval(()=>{ consol.log("定时器") },1000); // 使用延时器 let timeoutID = this.es_page.es_setTimeout(()=>{ consol.log("延时器") },1000); // 清除定时器 this.es_page.es_setInterval(intervalID); // 清除延时器 this.es_page.es_setTimeout(timeoutID); } }) [代码] 配置分享兜底数据 分享给好友 [代码]onShareAppMessage() { return { title: "", // 分享标题 imageUrl: "", // 分享图片 path: "", // 分享路径 params: { key:"", // 自动添加到path的key、value }, }; }, // 例如分销功能,用户小程序分享时,别人从打开,成为分享者下级 // parmas: 所有页面分享时,都携带分享着openid onShareAppMessage() { return { title: "", // 分享标题 imageUrl: "", // 分享图片 path: "", // 分享路径 params: { openid:getApp().userInfo.openid, }, }; }, [代码] 分享到朋友圈 [代码]onShareTimeline() { return { imageUrl: "", title: "分享到朋友圈", query: "", params: { from: "来自朋友圈分享", }, }; }, // 当在页面里onShareTimeline不设置query时,query会自动获取页面onLoad的参数 [代码] 额外功能 节流 介绍 规定在n秒内,只能触发一次函数。 应用场景 高频点击提交,表单重复提交 示例 [代码]import {es_throttle} from "../../utils/extend-sdk.js"; Page({ submitEvent(){ // 在3秒内,多次点击只发起一次请求 es_throttle(()=>{ this.submitData(); },3000) }, submitData(){ // 提交数据到服务端请求的逻辑实现 } }) [代码] 抖动 介绍 高频触发时,n秒内只会执行一次,如果n秒内高频事件再次被触发,那么就会重新计算时间 应用场景 一般的输入框绑定输入事件,每次输入触发就要请求接口的话,会给服务器带来巨大的压力,可用防抖,当用户输入停下来时再发起请求。 示例 [代码]import {es_debounce} from "../../utils/extend-sdk.js"; Page({ inputEvent(){ // 当用户停止输入1秒后,再发起请求 es_debounce(()=>{ this.getData(); },1000) }, getData(){ // 从服务端获取数据的逻辑实现 } }) [代码] 自定义事件 介绍 使用发布订阅模式,实现自定义事件功能 应用场景 不同组件间相互通信 示例 [代码]// 组件A import {es_event} from "../../utils/extend-sdk.js"; Component({ methods(){ sendData(){ // 点击组件A事件,触发发起sendData es_event.emit("sendData",{ from:"componentA" }) }, } }) // 组件B import {es_event} from "../../utils/extend-sdk.js"; Component({ ready(){ es_event.on("sendData",(data)=>{ console.log("data =",data) }); } }) [代码]
2020-09-14 - 小程序页面(Page)扩展,为所有页面添加公共的生命周期、事件处理等函数
背景 在小程序的原生开发中,页面中经常会用到一些公共方法,例如在页面onLoad中验证权限、所有页面都需要onShareAppMessage设置分享等 假设我们在编码时每个页面都写一遍,显然不是一个高级程序员会干的事情,太Low了。如果我们定义一个公共文件,导出这些公共方法,每个页面都引入,然后再生命周期或者事件处理函数中调用,虽然看起来很方便,但不够优雅,达不到我们最终的目的(偷懒)。 下面给大家介绍一种相对比较优雅的实现方式,扩展Page来实现以上的操作。 Page(页面) 需要传入的是一个 [代码]object[代码] 类型的参数,那么我们重载一个 [代码]Page[代码] 函数,将这个 [代码]object[代码] 参数拦截改掉就可以了,下面直接上代码。 实现 1、在根目录新建一个 [代码]page-extend.js[代码] 文件,公共的逻辑都写在这里面 [代码]/** * * Page扩展函数 * * @param {*} Page 原生Page */ const pageExtend = Page => { return object => { // 导出原生Page传入的object参数中的生命周期函数 // 由于命名冲突,所以将onLoad生命周期函数命名成了onLoaded const { onLoaded } = object // 公共的onLoad生命周期函数 object.onLoad = function (options) { // 在onLoad中执行的代码 ... // 执行onLoaded生命周期函数 if (typeof onLoaded === 'function') { onLoaded.call(this, options) } } // 公共的onShareAppMessage事件处理函数 object.onShareAppMessage = () => { return { title: '分享标题', imageUrl: '分享封面' } } return Page(object) } } // 获取原生Page const originalPage = Page // 定义一个新的Page,将原生Page传入Page扩展函数 Page = pageExtend(originalPage) [代码] 2、在 [代码]app.js[代码] 中引入 [代码]page-extend.js[代码] 文件 [代码]require('./page-extend') App({ // 其他代码 ... }) [代码] 代码片段 https://developers.weixin.qq.com/s/Cyx8iGmV7Ldp 本文内容及评论未经允许,禁止任何形式的转载与复制(代码可在程序中使用)
2019-12-24 - 升级开发者工具到最新,种种原因需要恢复旧版,旧版安装包找不到应急处理方法
刚需 新的开发者工具出来发现跟现有项目有兼容性问题。 而项目一天不能停,要急着修改上架,所以要恢复最新的开发者工具到旧版本 旧版本安装包没备份找不到了怎么办,2个方案: 解决方案 1、使用自带的回退功能 开发者工具菜单,回退功能,如果这里回退的版本不行或者不能正常回退,那么使用方案2 2、稳定版更新日志页面选择回退 如果是稳定版,可以在稳定版的更新日志页面找到对应旧版本的历史下载链接: 稳定版 Stable Build 更新日志 | 微信开放文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 3、根据规律找出历史版本下载链接 分析规律 找出指定旧版本的下载链接,直接打开链接下载旧版本。 应急处理的下载链接格式: [代码]https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki&download_version=1021910120&version_type=1 [代码] 这个链接:后面版本号(1910120)改成你想要的版本就为所欲为的下载旧版本了。 版本号1910120的分拆:前6位代表发布的年月日(YYMMDD)格式后面的一位代表当天的第几个版本,从0开始 另外说说url里面的type是代表平台(x64/ia32/darwin) version_type代表版本类型:正式版/预览版/开发版(推测) 下载链接demo 经过上面分析后,可以得出1910120的X64版本下载链接为: https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki&download_version=1021910120&version_type=1 MacOs版本下载链接为: https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki&download_version=1021910120&version_type=1
2020-09-24