摘要：微信小程序媒介技术的产生和发展给互联网领域带来了一场全新的变革。因其轻量化、高传播效率等特点,微信小程序迅速大规模占领互联网市场,重塑了媒介生态环境。随着体验至上的时代到来,互联网用户对小程序的用户体验、使用场景的个性化、使用便捷度有着更高的需求。为弥补原生小程序的短板,尤其是针对一些业务复杂、迭代频繁或多端覆盖的场景,本文利用H5技术交互性强、表现力丰富等优势,将其与微信小程序原生开发技术相结合,从而更好地满足用户需求、提升互动性。

　　关键词：微信小程序；HTML5；跨平台开发；用户体验

　　0引言

　　微信小程序作为微信生态体系的核心板块,其使用频次和用户规模均实现显著增长。其具有“无需下载安装”“用完即走”“所见即所得”等特点,在社群营销和引流方面有着得天独厚的优势[1],且传播更加容易,许多互联网企业的创业者和开发者都利用这些优势迅速打通线上线下信息壁垒,拓展线下流量市场,形成新的平台竞争方式,为企业信息传播带来革命,给整个行业带来竞争。

　　然而,微信小程序“即用即走”的特性背后,是轻量化与功能深度、便捷性与用户留存、生态开放与平台控制之间的利弊权衡。首先,小程序强调“轻量级”,代码包大小往往被限制在2MB以内（总包不能超过20MB）,因此像一般的高精度图像处理、长流程表单填写、电商多级跳转等复杂功能无法实现；其次,正因为不用安装下载,使用方便,用户往往是通过微信内部路径（如扫二维码、搜索、对话框分享等）方式使用微信小程序,缺乏一个固定的访问入口（如手机桌面图标）,从而导致用户主动访问意愿较低,用户召回难度大,难以形成小程序自己的固定用户粘性；再次,小程序虽然支持不同平台、不同系统（iOS或Android）,但不同平台API差异需要额外适配,大大增加了开发成本和维护成本；最后,也是从用户角度来说最重要的,原生微信小程序需实时从服务器获取资源,在弱网环境下访问,启动延迟显著（尤其是相较于原生APP的本地缓存优势）,再加上小程序是基于WebView渲染,逻辑层与视图层是双线程模型,各自分离,数据通信需要通过Native中转,因此,高频率交互或复杂动画的呈现容易出现卡顿现象,流畅度远不及原生应用,严重影响用户体验[2]。

　　面对这一现象,纪芩研究了数据库注入、异步加载、缓存等对微信小程序性能的影响,为其他开发者提供了优化方向[3]；张芳杰等人系统地研究了基于小程序的混合开发技术,重点分析了小程序结合React Native、Flutter等框架的性能、开发效率及使用场景等[4]。上海电气科学研究院的研究人员通过对设备管理小程序可视化及网页应用可视化的分析研究,将传统的人工记录设备信息、小程序和网页相结合,大幅度提高了工业互联网下设备管理人员的工作效率[5]。

　　可以看出,有针对性地改善原生小程序在网页表现方面的性能可极大地弥补小程序在灵活性、动态性和开发效率等方面的不足,从而提升用户体验,实现更灵活、高效的迭代与运营。本文重点研究使用HTML5（下文简称H5）结合微信小程序原生开发技术实现跨平台的混合开发。

　　1研究现状

　　H5即HTML5的缩写,是一种用于创建和呈现网页内容的标记语言,它不仅仅是对HTML网页标记语言的简单更新,更是对之前版本的全面升级：H5引入了许多新特性,比如视频、音频的直接支持、画布绘图能力以及本地存储等。这些功能极大地丰富了网页的表现力和交互性,让用户的体验变得更加生动和有趣。也正是这一特性,弥补了微信小程序原生技术交互性差的不足。因此,微信小程序与H5的跨平台混合开发技术在体验至上的互联网时代得到了广泛应用。

　　最常见的案例便是在一些电商小程序中的品牌宣传页、活动页面等。H5技术可以方便修改网页内容,快速复写已有的H5活动页面,无需小程序重新审核,因此,大大减少了更新时间,降低了开发成本；在另一些常见的新闻咨询类的小程序,如今日头条、腾讯新闻的文章阅读页或专题报道页面中,内容管理系统（CMS）通常基于H5开发,便于同步更新,且支持复杂的新闻图片排版和交互操作（如在线投票、评论互动等）；此外,还有一类教育、知识付费类型的小程序,其中包含的课程详情页、在线文档阅读或者第三方题库模块,往往采用嵌入H5的方式,不仅因为H5页面处理复杂文本或公式渲染的技术更加成熟,还因为其可以直接快速集成第三方H5教育平台,包括腾讯课堂、网易云课堂等。

　　可以看出,H5嵌入微信小程序的混合开发以其跨平台兼容性、灵活的内容更新机制以及丰富的多媒体展示能力,为微信小程序的注入了新的活力。

　　2实现方法

　　为了实现微信小程序与H5页面之间的通信与交互,常见的方法是采用小程序原生组件web-view或借助微信公众平台面向网页开发者提供的基于微信内的网页开发工具包JS-SDK。二者本质都是通过小程序自身的页面容器加载外部网页[4]。同时,二者实现的前提都是被嵌入的小程序必须是经过微信官方平台认证,并且在小程序的开发设置中配置好业务域名,经过服务器验证后,方可正常使用。

　　2.1 web-view组件

　　微信小程序中的web-view组件相当于HTML页面中的iframe,它允许开发者在微信小程序中打开一个H5页面。从官方给出的文档可以看出,微信小程序基础库1.6.4版本之后,开发者便可以在小程序内使用<web-view>组件链接HTML页面,具体实现在微信小程序的开放平台中有介绍,本文不再赘述。

　　2.2 JS-SDK工具包

　　JS-SDK是微信官方为开发者提供的网页开发工具包,实际上就是一个JavaScript库,允许H5页面调用微信的原生能力,从而实现分享、支付、扫码等。

　　Step1：配置JS安全域名。

　　官方开发文档显示,JS安全域名只能与公众号（服务号或订阅号）绑定,因此,需先将小程序绑定一个现有公众号,再进入“公众号设置”,根据弹窗提示对“JS接口安全域名”进行设置。

　　Step2：引入JS-SDK。

　　常见的JS-SDK的引入方法包括在框架页面中使用脚本形式引入、在需要调用JS接口的页面使用代码直接引入以及利用yarn、npm等包管理工具进入。本文采用页面直接调用的方式完成引入,关键代码如图1所示。

       为了确保调用H5页面的安全性,只有使用wx.config接口进行过权限验证,才能正常使用JS-SDK。因此,在实际开发中,需要先在服务端生成自己的权限验证信息,包括appID（所绑定公众号的唯一标识）,在微信公众号平台申请时获取timestamp（时间戳）、nonceStr（用于生成签名的随机字符串,长度一般不超过32位）以及url地址（当前页面的url）,具体实现如图2所示。

       3优势与劣势

　　从技术层面来看,将微信小程序原生框架的便捷性、高效性与H5页面技术的灵活性相结合进行跨平台混合开发,能快速实现某些复杂功能,提高开发效率[6]。一方面,可以保留小程序的设计理念,另一方面,又能充分利用H5的特性进行创新性页面呈现。

　　在小程序中嵌入H5页面可直接利用丰富、成熟的Web框架和JavaScript 3D库（如D3.js、cannon.js等）,实现复杂交互或可视化效果；同时,针对微信生态环境的特殊性,可通过H5的响应式设计,包括视口（Viewport）设置、媒体查询（Media Queries）、流式媒体（Streaming Media）以及弹性布局（Flexbox）等技术手段[7],减少微信小程序原生代码对兼容性需求的处理。

　　H5页面可跨平台运行,因此,将其嵌入小程序混合开发,不仅可以减少重复开发成本,避免学习小程序特有的WXML/WXSS语法,降低技术门槛,还可以让前端、后端团队专注各自的模块独立开发、分开测试,降低协作耦合度,提升开发效率。

　　跨平台混合开发中,H5页面资源往往是在服务器端部署,修改后无需更新、重启,实时生效,非常适合快速修复页面Bug或上线新功能,这不仅降低了维护成本,还满足了一些小程序需要快速迭代更新的需求。同时,微信官方对小程序包有体积的限制,通常一个小程序的主包不能超过2MB,总包体不能超过20MB,跨平台混合开发可将一些非核心功能（如加载文档、活动页等）以H5形式部署于服务端,从而避免小程序的主包占用内存过大的问题。

　　嵌入小程序的H5页面可灵活加载一些额外的Web View容器及其他网络资源,因此,从加载速度来看,混合开发的小程序加载耗时会延长30%以上,尤其是网络状况不好或H5页面功能内容复杂时,可能会影响用户体验[8,9]。另外,WebView渲染能力弱于小程序原生组件,因此,若嵌入的多个H5页面同时打开,小程序可能会出现卡顿甚至崩溃。

　　除此之外,小程序内嵌入的H5页面可随时修改更新,无需提交小程序审核即可发布,这带来了一定的安全隐患：若H5页面未严格过滤输入,很可能被注入恶意脚本,遭遇XSS攻击；更有一些恶意仿冒小程序UI的H5页面,诱导用户输入密码从而非法套取更多信息和隐私。因此,混合开发时需考虑H5页面的安全防御措施。

　　4性能优化

　　正如上文所述,基于H5嵌入小程序的混合开发模式在提供极致开发灵活性的同时,面临着性能优化的严峻挑战。因此,本文从降低加载时间成本、减少主线程负担以及优化H5页面技术性能等方面提升混合开发小程序的使用体验。

　　4.1预加载和缓存策略

　　为了实现瞬间呈现页面,使用户在点击进入程序界面时不再等待网页资源加载,本文对图片等资源采用预加载的方式,具体实现如图6所示。

　　4.3优化JavaScript及CSS性能

　　除了上述方法,代码的优化也在小程序的性能提升方面起到了非常重要的作用。可以采用Terser、Webpack等代码自动化工具对源代码进行自动压缩和冗余祛除。在优化结果的基础上,在JavaScript脚本中通过ref缓存DOM元素,以避免在频繁调用的函数中使用复杂选择器进行查询；针对函数中的高频触发事件,例如接收输入、屏幕滚动等,采取节流(Throttle)控制[10],将其执行频率限制在合理范围,避免影响页面响应速度；使用Sass等CSS预处理器的嵌套规则、混合等功能对CSS进行优化,使小程序代码更易于维护和重用。

　　4结语

　　经过项目实践与分析,小程序原生组件与H5页面技术相结合的混合开发技术不仅方便实现跨平台复用、高效便捷、生态整合和节约成本,还带来了更丰富、灵活的用户体验。面对H5页面可能存在的加载变慢、使用不流畅的问题,开发时可从技术角度采取一系列性能优化措施,以确保小程序的整体性能,如通过调整图片清晰度、合并脚本文件等方式降低外部资源加载的速度；利用预加载(Lazy Load)技术延迟一些非核心资源的加载；采取如本地缓存或页面缓存等策略减少网络重复请求等。这些性能优化手段的叠加实施可以确保用户在使用过程中享受到稳定、流畅的体验。此外,安全性也是跨平台混合开发中不能忽视的重要考量,因为这直接关系到用户信息的安全和隐私的保护,因此,混合开发时需对H5页面采取安全防御措施,这也是本研究后续将思考和探索的问题。

参考文献

　　[1]周鸿祎.周鸿祎自述:我的互联网方法论[M].北京:中信出版社,2014.

　　[2]孙珂.基于用户体验的小程序产品微创新设计研究—以360小程序为例[D].上海:华东理工大学,2020.

　　[3]纪芩.基于JMeter的微信小程序性能测试应用[J].电脑与电信,2022,53(8):69-72.

　　[4]张芳杰,刘太君,尚爱民,等.基于react-native的移动端周界入侵定位系统[J].无线通信技术.2019,28(3):1-5.

　　[5]赖晓凤.微信小程序跨平台竞争研究[D].长沙:湖南大学,2019.

　　[6]PINE J I.Welcome to the Experience Economy[J].Health Forum Jouarl,2001,44(5):10.

　　[7]JONES T K.Augmenting Corporate R&D with Networked Micro Innovation Teams[J].IEEE Engineering Management Review,2016,44(4):30-32.

　　[8]王丽娜,李彬彬.基于用户体验的产品“微创新”设计评价研究[J].价值工程,2012,31(20):28-29.

　　[9]许烨,潘超.基于用户体验的微信小程序设计[J].无线互联科技,2021,18(10):50-51.

　　[10]任平红,陈矗.web编程基础:HTML5、css3、Javascipt[M].第2版.北京:清华大学出版社,2019.