京东小程序平台：全面开放的生态模式，带来新机遇
发表时间：2024-07-12 14:54:45
文章来源：炫佑科技
浏览次数：161
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
京东小程序平台：全面开放的生态模式，带来新机遇
这里我们得先从微信小程序的历史说起，从其前身到现在，大致可以分为三个阶段：
为了满足商家、服务商等用户在京东应用中的开放能力需求，京东还推出了自己的小程序平台。按照官方定义：京东小程序平台是一个完全开放的生态模式，通过加入平台，可以共享京东APP的流量红利、海量SKU、开放能力，提升用户体验，为商家带来新的机会。
小程序架构与Web*大的区别在于，小程序的运行环境分为渲染层和逻辑层，其中JXML模板与JXSS样式工作在渲染层，JS脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由两个线程管理：渲染层界面用于渲染；逻辑层使用线程运行 JS 脚本。一个小程序有多个界面，因此渲染层有多个线程。这两个线程之间的通信会通过客户端（以下简称客户端）进行中转，逻辑层也会通过转发发送网络请求。小程序的通信模型如下图所示。
小程序的渲染层负责处理页面渲染、用户交互、事件处理等任务。逻辑层负责处理业务逻辑、数据计算、接口请求等任务。通过将渲染层和逻辑层分成两个独立的线程，小程序可以实现耗时操作（相当于 web ）的异步执行，从而提高小程序的流畅度和响应度。例如，在进行网络请求时，逻辑层可以异步调用 API，将任务交给后台线程处理，同时保持用户界面的响应度和流畅度，提升用户体验。
由于逻辑层和渲染层所处的环境不同，导致逻辑层无法访问DOM接口。从这张图中我们也可以看出，影响小程序性能的主要因素就是渲染层和逻辑层之间的数据交互。
2.vue-like、react-like框架起什么作用？
京东小程序开发可以用原生的语法，那为什么还要用Taro呢？可能有以下几个原因：
1.提高开发效率，可以使用React、Vue开发
对于熟悉 Web开发的朋友来说，借助跨端框架，“理论上”你可以像开发普通的 React 或者 Vue 应用一样开发一个小程序，和之前的开发模式没什么区别react开发微信小程序，不需要关心 AXML 或者 WXML 的语法，也可以用熟悉的 Less 或者 Sass 来写样式。
2. 一次开发，多终端运行
从框架名字就可以看出，跨端框架中*重要的两个字就是跨端。这里的跨端主要是指不同的小程序平台，比如京东小程序、支付宝小程序程序、钉钉小程序、微信小程序、今日头条小程序等。除了小程序之外，一般都支持H5，有的跨端框架可能还会支持React。这就保证了跨端框架开发之后，可以分发到微信、支付宝等不同的小程序平台，也可以编译成通用的H5或者RN应用，真正做到一次开发，多端运行。
3. 组件重用
因为可以一次开发，多端运行京东小程序平台：全面开放的生态模式，带来新机遇，我们的代码可以在不同的小程序或者H5中复用，在此基础上积累通用的组件，抽象通用的逻辑，会大大提升开发效率。
4. 性能改进
主要针对优化数据交互，实现增量更新，实现树贯通等能力，减少包大小。
3. 技术选择
由于需要开发京东小程序，因此优先选择了Taro跨端框架。内部支持的小程序UI框架较少，因此选择了比较稳定的vue3框架nutui-vue，使用了官方推荐的状态管理库pinia。*终选定的项目框架是Taro3+vue3++pinia。
网络请求方面，服务端接口统一对接color网关，通过宿主app获取登录态，发起请求时手动填写。前端对接自研脚手架whale-cli，通过数据配置自动生成接口api及输入输出参数定义。
资源管理方面，大图、图标资源接入OSS外链，小图接入，精简代码包大小。项目以一级页面为主包页面，其他页面为子包，方便后续扩展。
4. 效率与性能之间的平衡
1. 公共组件封装
为了解决C端适配问题，对 和 等公共组件进行了封装，并在组件内部暴露Toast 和 的接口API，以简化调用和开发。
Empty、等基础组件是页面中常用的功能模块，经过封装后，提供更好的使用体验，减少冗余代码。
（二）长列表性能优化
这是小程序用户体验中比较重要的一个点，也是开发过程中遇到很多问题、坑数不胜数的点。长列表的渲染可能会出现以下问题：（1）滑动卡顿；（2）滑动白屏。尝试过滑动、滚动等解决办法，但总是会有些问题。*终采用了虚拟列表+滑动的方案。
（三）项目配置
基于Taro的项目配置主要是修改/文件夹下的配置文件，主要用到两个配置项：env和。它们配置的变量也是编译后可用的。定义的变量是全局变量，但是容易被ts报为未定义变量，所以主要用到env配置项。env可以在命令行中读取变量，所以使用命令行定义变量非常方便。
以上就是基于Taro开发小程序的实战笔记，在开发小程序的过程中，大家还遇到了哪些问题呢？欢迎在评论区讨论哦~
