公众号菜单跳转小程序指定页面？

1.背景 如今信息流业务是各大互联网公司争先抢占的一个大面包，为了提高用户的后续消费，产品想出了各种各样的方法，例如在微视中，用户可以无限上拉出下一条视频；在知乎中，也可以无限上拉出下一条回答。这样的操作方式用户体验更好，后续消费也更多。最近几年的时间，微信小程序已经从一颗小小的萌芽成长为参天大树，形成了较大规模的生态，小程序也拥有了一个很大的流量入口。 2.demo体验 那如何才能在小程序中实现类原生APP效果的下一条无限刷体验？ 这篇文章详细记录了下一条无限刷效果的实现原理，以及细节和体验优化，并将相关代码抽象成一个微信小程序代码片段，有需要的同学可查看demo源码。 线上效果请用微信扫码体验： [图片] 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a 3.实现原理 出于性能和兼容性考虑，我们尽量采用小程序官方提供的原生组件来实现下一条无限刷效果。我们发现，可以将无限上拉下一篇的文章看作一个竖向滚动的轮播图，又由于每一篇文章的内容长度高于一屏幕高度，所以需要实现文章内部可滚动，以及文章之间可以上拉和下拉切换的功能。 在多次尝试后，我们最终采用了在[代码]<swiper>[代码]组件内部嵌套一个[代码]<scroll-view>[代码]组件的方式实现，利用[代码]<swiper>[代码]组件来实现文章之间上拉和下拉切换的功能，利用[代码]<scroll-view>[代码]来实现一篇文章内部可上下滚动的功能。 所以页面的dom结构如下所示： [代码]<swiper class='scroll-swiper' circular="{{false}}" vertical="{{true}}" bindchange="bindChange" skip-hidden-item-layout="{{true}}" duration="{{500}}" easing-function="easeInCubic" > <block wx:for="{{articleData}}"> <swiper-item> <scroll-view scroll-top="0" scroll-with-animation="{{false}}" scroll-y > content </scroll-view> </swiper-item> </block> </swiper> [代码] 4.性能优化 我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用。例如减少代码包体积，使用分包，渲染性能优化等。下面主要讲一下渲染性能优化。 4.1 dom优化 由于页面需要无限上拉刷新，所以要在[代码]<swiper>[代码]组件中不断的增加[代码]<swiper-item>[代码]，这样必然会导致页面的dom节点成倍数的增加，最后非常卡顿。 为了优化页面的dom节点，我们利用[代码]<swiper>[代码]的[代码]current[代码]和[代码]<swiper-item>[代码]的[代码]index[代码]来做优化，控制是否渲染dom节点。首先，仅当[代码]index <= current + 1[代码]时渲染[代码]<swiper-item>[代码]，也就是页面中最多预先加载出下一条，而不是将接口返回的所有后续数据都渲染出来；其次，对于用户已经消费过的之前的[代码]<swiper-item>[代码]，不能直接销毁dom节点，否则会导致[代码]<swiper>[代码]的[代码]current[代码]值出现错乱，但是我们可以控制是否渲染[代码]<swiper-item>[代码]内部的子节点，我们设置了仅当[代码]current <= index + 1 && index -1 <= current[代码]时才会渲染[代码]<swiper-item>[代码]中的内容，也就是仅渲染当先文章，及上一篇和下一篇的文章内容，其他文章的dom节点都被销毁了。 这样，无论用户上拉刷新了多少次，页面中最多只会渲染3篇文章的内容，避免了因为上拉次数太多导致的页面卡顿。 4.2 分页时setData的优化 setData工作原理 [图片] 小程序的视图层目前使用[代码]WebView[代码]作为渲染载体，而逻辑层是由独立的 [代码]JavascriptCore[代码] 作为运行环境。在架构上，[代码]WebView[代码] 和 [代码]JavascriptCore[代码] 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 [代码]evaluateJavascript[代码] 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 [代码]JS[代码] 脚本，再通过执行 [代码]JS[代码] 脚本的形式传递到两边独立环境。 而 [代码]evaluateJavascript[代码] 的执行会受很多方面的影响，数据到达视图层并不是实时的。 每次 [代码]setData[代码] 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关。 [代码]setData[代码] 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互。 [代码]setData[代码] 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。 避免不当使用setData [代码]data[代码] 应仅包括与页面渲染相关的数据，其他数据可绑定在this上。使用 [代码]data[代码] 在方法间共享数据，会增加 setData 传输的数据量，。 使用 [代码]setData[代码] 传输大量数据，通讯耗时与数据正相关，页面更新延迟可能造成页面更新开销增加。仅传输页面中发生变化的数据，使用 [代码]setData[代码] 的特殊 [代码]key[代码] 实现局部更新。 避免不必要的 [代码]setData[代码]，避免短时间内频繁调用 [代码]setData[代码]，对连续的setData调用进行合并。不然会导致操作卡顿，交互延迟，阻塞通信，页面渲染延迟。 避免在后台页面进行 [代码]setData[代码]，这样会抢占前台页面的渲染资源。可将页面切入后台后的[代码]setData[代码]调用延迟到页面重新展示时执行。 优化示例 无限上拉刷新的数据会采用分页接口的形式，分多次请求回来。在使用分页接口拉取到下一刷的数据后，我们需要调用[代码]setData[代码]将数据写进[代码]data[代码]的[代码]articleData[代码]中，这个[代码]articleData[代码]是一个数组，里面存放着所有的文章数据，数据量十分庞大，如果直接[代码]setData[代码]会增加通讯耗时和页面更新开销，导致操作卡顿，交互延迟。 为了避免这个问题，我们将[代码]articleData[代码]改进为一个二维数组，每一次[代码]setData[代码]通过分页的 [代码]cachedCount[代码]标识来实现局部更新，具体代码如下： [代码]this.setData({ [`articleData[${cachedCount}]`]: [...data], cachedCount: cachedCount + 1, }) [代码] [代码]articleData[代码]的结构如下： [图片] 4.3 体验优化 解决了操作卡顿，交互延迟等问题，我们还需要对动画和交互的体验进行优化，以达到类原生APP效果的体验。 在文章间上拉切换时，我们使用了[代码]<swiper>[代码]组件自带的动画效果，并通过设置[代码]duration[代码]和[代码]easing-function[代码]来优化滚动细节和动画。 当用户阅读文章到底部时，会提示下一篇文章的标题等信息，而在页面上拉时，由于下一篇文章的内容已经加载出来了，这样在滑动过程中会出现两个重复的标题。为了避免这种情况出现，我们通过一个占满屏幕宽高的空白[代码]<view>[代码]来将下一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]hidden="{{index !== current && index !== current + 1}}"[代码]来隐藏这个空白[代码]<view>[代码]，并对这个空白[代码]<view>[代码]的高度变化增加动画，来实现下一篇文章从屏幕底部滚动到屏幕顶部的效果： [代码].fake-scroll { height: 100%; width: 100%; transition: height 0.3s cubic-bezier(0.167,0.167,0.4,1); } [代码] [图片] 而当用户想要上拉查看之前阅读过的文章时，我们需要给用户一个“下滑查看上一条”提示，所以也可以采用同上的方式，通过一个占满屏幕宽高的提示语[代码]<view>[代码]来将上一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]wx:if="{{index + 1 === current}}"[代码]来隐藏这个提示语[代码]<view>[代码]，并对这个提示语[代码]<view>[代码]的透明度变化增加动画，来实现下拉时提示“下滑查看上一条”的效果： [代码].fake-previous { height: 100%; width: 100%; opacity: 0; transition: opacity 1s ease-in; } .fake-previous.show-fake-previous { opacity: 1; } [代码] 至此，这个类原生APP效果的下一条无限刷体验的需求的所有要点和细节都已实现。 记录在此，欢迎交流和讨论。 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a

随着云的发展，各大公司提供更加安全稳定的云服务，越来越多的企业也选择将自己的业务上云，使用云服务带来的好处本文不再赘述了，直接进入主题，使用腾讯云服务，快速构建一个基本的架构，实现低成本、安全稳定的部署服务。在这里希望可以和大家交流，提供更完善的方案。 涉及到的云服务主要包括：服务器，对象存储，缓存，数据库，消息队列，负载均衡，弹性伸缩，Web应用防火墙；项目开发管理：TAPD敏捷项目管理，腾讯Git代码托管。不分先后，每个产品都很好用。 所有产品都提供线上管理，各种报表、图表，实时数据统计可以分析系统运行现状，完善升级系统。 [图片] 服务器 服务器主要用来部署运行代码。根据需求，购买不同规格的服务器，支持多种操作系统，CPU、内存、带宽等资源可以随时调整，适应企业业务发展对服务器需求的调整，并且支持不同的计费方式，可以帮助节约成本。可以根据已经配置好的服务器环境，制作镜像，购买新的服务器时可以选择已有镜像，服务器环境无需重新配置，并且在实现弹性伸缩时必须要用到自定义镜像。 对象存储 主要用来存储资源文件，包括图片、视频、普通文件，资源文件可以通过外网访问。特点是：使用简单，提供多种语言SDK，集成简单，安全稳定，按照流量收费，无需关心并发、带宽、丢失等问题。 缓存 腾讯云提供多种缓存，redis、memcache都有，最大连接数支持都是万为单位，保证可以满足企业的需求，可以包年包月，也可以按照使用量付费，更重要的是安全稳定，热备容灾保证业务不中断。 数据库 关系型数据库，文档型数据库等都支持，单台数据库轻松搞定万级以上qps，如mysql，支持主从、读写，数据同步、容灾、恢复、数据迁移，简单几步操作就可以完成，保证数据安全。 消息队列 腾讯云消息队列提供了两种消息模型：消息队列模型和消息主题模型。产品优势：高性能，单实例轻松到5000qps，高可靠性，保证所有消息不丢失，每个消息被正确使用，提供多语言SDK，文档完善，接入方便简单。 负载均衡 负载均衡提供安全快捷的流量分发服务，访问流量经由负载均衡可以自动分配到云中的多台云服务器上，扩展系统的服务能力并消除单点故障，购买后，配置访问到负载均衡即可。负载均衡支持亿级连接和千万级并发，可轻松应对大流量访问，满足业务需求。 配合弹性伸缩，可以实现服务器根据使用率实时增加减少服务器数量，实现业务负载。 弹性伸缩 可周期性地执行管理策略或创建实时监控策略，来管理服务器实例数量，并完成对实例的环境部署，保证业务平稳顺利运行。在需求高峰时，弹性伸缩自动增加服务器数量，以保证性能不受影响；当需求较低时，则会减少服务器数量以降低成本。根据已经配置好的服务器，制作镜像，设置伸缩策略，伸缩的新服务器使用已有镜像，新服务器启动后可立即提供服务，配合负载均衡，实现并发流量分发。 WEB应用防火墙 帮助用户应对 Web 攻击、入侵、漏洞利用、挂马、篡改、后门、爬虫、域名劫持等网站及 Web 业务安全防护问题。企业组织通过部署腾讯云网站管家服务，将 Web 攻击威胁压力转移到腾讯云网站管家防护集群节点，分钟级获取腾讯 Web 业务防护能力，为组织网站及 Web 业务安全运营保驾护航。 TAPD敏捷项目管理 TAPD（Tencent Agile Product Development）是源自于腾讯的敏捷研发协作平台，提供贯穿敏捷研发生命周期的一站式服务。覆盖从产品概念形成、产品规划、需求分析、项目规划和跟踪、质量测试到构建发布、用户反馈跟踪的产品研发全生命周期，提供了灵活的可定制化应用和强大的集成能力，帮助研发团队有效地管理需求、资源、进度和质量，规范和改进产品研发过程，提高研发效率和产品质量，可以配合工蜂使用，让代码与任务关联。并且在微信端可以实现任务推送，实时关注任务进度，好用免费！！！ 腾讯Git代码托管工蜂 为开发者提供基于 Git 的在线代码托管工具，包含代码提交/存储/下载/复刻/分支/历史/比对/合并等功能。可一站式完成对代码及代码质量管理，项目及项目人员管理，大大提升研发效率，配合TAPD使用，让每个commit都有一个任务，免费没限制！！！ 使用以上产品，可以帮助企业快速建立安全稳定的后端架构，并且所有服务是由专业团队维护，有任何问题都有官方专业团队解答，关键是可以提供N多个9的可用性。同时，企业也可以减少运营成本，将更多精力放在研发产品上，专注自己的核心业务，实现更好发展。