近期社区中运营公众号的朋友咨询，如何文章内跳转到公众号主页 [图片] 不是历史文章页面 [图片] 这点是可以通过文章内的图片实现的。 接下来教大家如何实现图片跳转公众号主页： 1、首先获取历史文章链接 打开该公众号任意一篇内容，复制链接，在浏览器打开 [图片] 右击鼠标查看源代码  [图片] 快捷键ctrl+F开启全局搜索“ __biz”然后把该公众号卡版ID复制，记得后面两个“==”号必须都复制上。 [图片] 2、这个功能要通过SVG排版来实现。官方编辑器是不支持的，所以在这里我们使用某排版中的SVG编辑器。 [图片] 打开某排版SVG编辑器后，在组件这里搜索公众号或10214 [图片] 找到公众号——图片（免费的） 组件 [图片] 然后添加图片，粘贴公众号卡片ID [图片] 设置好后，先保存，后同步到微信后台 [图片] 这时候就可以去公众号预览了。 当然要注意的是，这种SVG排版同步到公众号后是不能修改的。所以建议在某排版编辑好所有内容之后，再同步到微信公众号后台。 而且这种排版可以跳转任何公众号主页。 还有一点这种跳转没有任何提示，直接跳到公众号主页，大家快去试试吧。 当然，还有朋友不知道如何跳转历史文章，可以参考：公众号运营：公众号菜单如何跳转历史文章？ https://developers.weixin.qq.com/community/develop/article/doc/000e2e5dca09589f9f6fc985456013 我是立十，非官方人员💍公众号💍运营资深忠实粉丝，专注回答社区中关于公众号的问题。

最近公众号更新上线了一个灰度测试的小功能：划线阅读功能。 什么叫划线阅读功能，当你阅读图文内容时，会看到部分句子下面出现一条绿色虚线，点击选中文本之后，会在浮动的菜单中显示一条菜单，分别为复制、搜一搜、转发、收藏和划线，别的都明白什么意思，这个带数字的划线是什么新功能呢。 划线阅读功能是允许用户在阅读内容过程中长按选中文本，并且在浮动菜单中选择"划线"菜单，划线文本使用绿色标签来标示，最后还会显示该文本内容被用户划线的次数。 [图片] 而且分为实线和虚线又有什么区别呢？ 本人首选划线内容为实线，其他用户首选内容为虚线。 [图片] 而且在同一菜单栏里面的转发，点一下会生成一张图片发送给好友，直接点击底部即可查看原文。 [图片] [图片] 最近上线划线功能之后，收集到用户的一些反馈 1、应该不太喜欢这个划线功能，毕竟同样都是用户，为什么要强制看到别的用户标签内容。 2、当然在现在碎片化阅读爆炸时代，划线功能会让很多用户阅读完重点即可，并不需要花费更多时间来阅读全文。 3、应该在划线功能里面加入互动，例如对这段话的理解与讨论，或对这段话的资料延伸等。 4、应该让用户自己选择是否开启划线功能，毕竟有些朋友审美洁癖，不喜欢这种稍微花哨的功能。 其实划线功能并不是第一次出现了。 在2022年年底和今年年初都有过划线功能测试，但是这一次灰度测试，很多人都获得测试资格，看来公众号对划线功能还是比较重视的。期待出现让所有用户满意的一个划线功能。 我是立十，非官方人员💍公众号💍运营资深忠实粉丝，专注回答社区中关于公众号问题。

近期大家没有发现在“发现”页面新增了一个“听一听”入口。意味着公众号新的流量池开启。 [图片] 进入“听一听”页面后，分为两个频道：音乐与音频。 [图片][图片] 为什么我要说是公众号新的流量池开启呢？ 很多运营公众号的朋友说我只发表图文并没有发表音频，和我有什么关系呢？ 确实，像一直运营发表音频的朋友，一般都会收录到该频道中，这是一波很大的流量红利。并且一些图文中插入音频的公众号会也收录到该音频频道中。 但是，在这里我要强调，你如果只运营图文，并没有在文中插入音频素材。只要满足了要求也会出现在这里。 首先你要了解一下条件： 为什么会出现在“听一听”音频频道里，因为图文消息在阅读过程中，有一个功能“听全文”，当你满足“10人听过”会自动推荐到“听一听”音频频道。 从条件来讲，不难，很多运营不错的公众号来讲很容易就可以进入该流量池中。 但是，对于一些新加入公众号的运营朋友来说，别说10个人听过了，五个人听过都很难。 这里，我就教新朋友另一种方法了，就是上面我提到的，图文中插入音频也会进入该流量池中，你只需要把你的内容编辑成音频，在文中插入该音频即可。这样你的图文也会逐渐收录到该流量池中。对于一些刚加入公众号的朋友来讲，这里面的流量也是相当不少的。 [图片] 还有很多运营小伙伴想问，为什么我发了图文消息，却没有“听全文”的功能呢？ 这是因为“听全文”也是有要求的，只有满足300字以上的内容，才可以默认开启“听全文”的功能，当你字数不达标，所以开启不了“听全文”的微信功能。 更多公众号运营内容点击下列标题即可观看： 公众号运营：如何使用电子发票结算流量主收益 公众号运营：划线阅读功能到底是什么功能，具体有什么作用 公众号运营：互选广告授权MCN机构一定要多注意。 公众号运营：公众号菜单如何跳转历史文章？ 公众号运营：如何文章内跳转公众号主页（不是历史文章页面） 更多公众号运营问题与小技巧可点击我的头像到我社区主页观看。 我是立十，非官方人员💍公众号💍运营资深忠实粉丝，专注回答社区中关于公众号的问题。

[图片] 在过去的小程序开发过程中，全局工具栏一直是开发者们急需解决的问题。然而，小程序并未直接支持此功能，开发者们只能采用自定义组件方式来实现。这种方法需要在每个页面的 wxml 中引入组件，导致大量重复代码，同时状态同步过程复杂且不够顺滑，给开发者带来了很大的困扰。 为了解决这个头疼的问题，Skyline 已经支持了小程序全局工具栏功能。这个全新的功能将大大简化开发流程，提升用户体验和操作便利性。全局工具栏可以实现跨页面渲染和状态同步，其渲染层级位于页面之上，使得用户在不同页面间切换时，工具栏的状态能得到保持，大大增强了操作的便利性。 接下来的文章中，我们将详细介绍小程序全局工具栏的使用流程，希望能帮助开发者们更好地理解和应用这一强大的功能～ 使用步骤通过以下三个步骤，你将能够轻松实现全局工具栏的功能： 1、配置信息：首先，在 app.json 文件中添加 appBar 选项，如下所示： { "appBar": {} }   2、添加 appBar 代码文件：在代码根目录下添加入口文件，包括以下四个文件： app-bar/index.js app-bar/index.json app-bar/index.wxml app-bar/index.wxss   3、编写 appBar 代码：使用自定义组件的方式编写 appBar 代码。在 app-bar/index.js 文件中，创建一个自定义组件实例，并在 app-bar/index.wxml 文件中编写组件的结构。同时，可以在 app-bar/index.wxss 文件中添加样式。最后，在需要获取 appBar 组件实例的页面中，使用 getAppBar 接口获取实例，进行操作。例如： Page({ getInstance() { if (typeof this.getAppBar === 'function') { const appBarComp = this.getAppBar(); appBarComp.setData({}); } } });   通过以上三个步骤，你已经成功实现小程序全局工具栏，从而简化开发流程并提升用户体验和操作便利性～ 注意事项和限制在使用小程序全局工具栏时，我们需要关注以下几点注意事项和限制，以确保功能的正常运行： app-bar 组件仅支持 Skyline 渲染，Webview 渲染不支持，需确保项目采用 Skyline 渲染引擎以实现全局工具栏功能。在 Webview 渲染和 Skyline 渲染之间混跳时，全局工具栏的状态同步会受到影响，需要注意在跳转页面时处理状态变化。由于全局工具栏的渲染层级位于页面之上，需要避免与其他页面元素发生层叠覆盖，确保留出足够的空间容纳全局工具栏，避免影响用户体验。全局工具栏功能需要 v3.3.1 及以上的小程序基础库版本支持。遵循以上注意事项和限制，开发者将能够更好地利用小程序全局工具栏功能，提升用户体验和操作便利性。 案例展示我们通过实际案例来介绍小程序全局工具栏的应用场景～ 以微信学堂为例，我们可以使用全局工具栏来实现课程播放栏的功能。在课程播放的过程中，我们可以浏览其他课程、查看课程介绍等等。在这种情况下，实现一个全局的课程播放栏可以很好地提升用户体验。借助小程序全局工具栏，我们可以轻松实现这一功能～ [图片] 接下来，让我们来看看具体的代码实现～ 使用十分简单，我们参照使用步骤建立 app-bar 组件，然后我们只需要在 app-bar 组件中实现我们的业务代码即可。 我们的课程播放器还结合了手势和 worklet 动画，实现了最小化和最大化全局工具栏的效果，用户可以根据自己的需要来切换全局工具栏的大小，提高用户使用体验，实现更加丰富和高效的用户界面～ 在 app-bar/index.wxml 中，实现的代码与我们平时写自定义组件无异，可以根据业务诉求实现自定义的组件，我们这里展示了课程播放器的实现。 <!-- app-bar/index.wxml --> <vertical-drag-gesture-handler worklet:ongesture="handleVerticalDrag"> <view class="expand-container"> <!-- 最大化展示：nav-bar --> <view class="nav-bar column"></view> <!-- 跟着手势变化，改变组件的展示效果 --> <view class="cover-area" style="height: {{maxCoverSize}}px;"> <view class="row " bind:tap="expand">               <!-- 跟着手势改变宽高 --> <image class="cover" mode="aspectFill" src="{{musicCover}}" />                              <!-- 最小化展示：标题、按钮 --> <view class="title-wrap row-between"> <view class="title column"> <text overflow="ellipsis" max-lines="1">Skyline 渲染框架入门与实践</text> <text class="name" overflow="ellipsis" max-lines="1">小程序技术专员 - binnie</text> </view> <view class="row"> <image class="icon" style="margin-right: 24px;" src="/assets/play.png" /> <image class="icon" src="/assets/next.png" /> </view> </view> </view> </view> <!-- 最大化展示：详情内容 --> <view class="music-title">...</view> <view class="footer">...</view>        </view> </vertical-drag-gesture-handler> 因为我们在 wxml 中使用了手势系统，所以我们需要给手势加上手势事件，这样我们就实现了一个顺滑的课程播放器啦～ 如果你还没有学习过 worklet 动画和手势系统，建议可以学习一下 worklet 动画 和 手势系统，了解之后你将更好地理解我们在课程播放器中使用的手势和 worklet 动画的实现方式，同时，worklet 动画和手势系统也可以帮助你实现更加复杂和丰富的用户界面。 Component({   lifetimes: {     attached() {       const progress = shared(0)       // 通过 worklet 改变各个组件的状态       this.applyAnimatedStyle('.cover', () => {         'worklet'         ...       })       this.applyAnimatedStyle('.expand-container', () => {         'worklet'         ...       })       this.applyAnimatedStyle('.title-wrap', () => {         'worklet'         return {           opacity: 1 - progress.value         }       })       this.applyAnimatedStyle('.nav-bar', () => {         'worklet'         ...       })       this.progress = progress     }   },   methods: {   // vertical-drag-gesture-handler 绑定的手势事件     handleVerticalDrag(evt) {       'worklet'       if (evt.state === GestureState.ACTIVE) {         const delta = evt.deltaY / screenHeight         this.handleDragUpdate(delta)       } else if (evt.state === GestureState.END) {         const velocity = evt.velocityY / screenHeight         this.handleDragEnd(velocity)       } else if (evt.state === GestureState.CANCELLED) {         this.handleDragEnd(0.0)       }     },     // 手势变化时     handleDragUpdate(delta) {       'worklet'       const curValue = this.progress.value       const newVal = curValue - delta       this.progress.value = clamp(newVal, 0.0, 1.0)     },     // 手势结束时     handleDragEnd(velocity) {       'worklet'       ...       if (animateForward) {         this.progress.value = timing(           1.0, {           duration: 200,           easing: animationCurve,         })       }       ...     }   } }) 以上是我们实现课程播放器的核心代码，如果您想要进一步了解和实践，可在 PC 端点击 代码片段 进行调试。 总结小程序全局工具栏为用户提供了更加便捷的操作方式和更丰富的功能，让小程序的使用体验得到了显著提升。通过全局工具栏，用户可以在不同页面间快速切换，轻松访问常用功能，同时还可以自定义工具栏，满足个性化需求。此外，全局工具栏还可以帮助开发者提高用户粘性，提升小程序的活跃度。 小程序全局工具栏适用于多种场景，如电商平台、在线教育、新闻资讯、工具类等。例如，电商平台可以将购物车、订单等入口放置在全局工具栏上，方便用户随时查看和管理；在线教育平台可以将课程列表、学习记录等功能放置在全局工具栏上，方便用户快速找到所需内容。 小程序全局工具栏是一个非常实用的功能，可以帮助用户更好地使用小程序，同时也为开发者提供了提升用户体验和增加用户粘性的机会。我们邀请大家尝试将小程序全局工具栏这个能力应用到自己的小程序上，为用户带来更好的使用体验～

今天介绍，在小程序中如何选择音频文件。 我们知道，小程序提供了选择本机图片、视频的API，但没有提供用于选择音频文件的API。我们可以变通下，使用wx.chooseMessageFile，这个API可以选择聊天会话中的文件，在聊天会话中，我们选择文件，可以选择本机的音频文件，我们选择后，可以发送给朋友，然后使用这个API进行选择音频文件然后再进行处理。这个API我们限制一下，只选择音频文件，所以我们让API选择的音频文件为后缀为.mp3和.m4a的文件。我们需要这样使用API，填写扩展名，并且设置文件类型，我们还可以限制待选取的文件大小，代码如下： wx.chooseMessageFile({       count: 1,       type: 'file',       extension: ['.m 4a', '.mp3'],       success(res) {         const filepath = res.tempFiles[0].path         const filename = res.tempFiles[0].name         const filesize = res.tempFiles[0].size         if (filesize <= 2048000) {           that.setData({             filepath: filepath,             filename: filename,             audioExist: true,           });         } else {           wx.showToast({             title: '文件超过2M',           })         }       }     }) [图片] 上面的代码就选择了音频文件，并且存储了音频文件的路径和名称，这样我们就可以进一步，将音频文件上传到服务器，在服务器端，我们将音频文件进行格式转换工作，转换成功后，我们还需要将转换后的音频文件下载供用户使用。下载后的音频文件虽然无法直接报错，但是可以使用音频播放器进行播放试听。我们还需要再变通一下，我们选择另一个API，wx.shareFileMessage，虽然微信小程序不支持直接将音频文件保存到手机，但是通过这个API，我们可以将文件分享到聊天，然后通过其他方法保存到电脑，或者另存到手机。 音频格式转换功能包含在上面的小程序码中，可以扫码进行尝试。