13

小程序模块化搭建思路详解

 3 years ago
source link: https://zhuanlan.zhihu.com/p/242933554
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

小程序模块化搭建思路详解

随着小程序发展越来越火热，小程序搭建也成为了搭建系统中的一个新的方向。本文将以 Rax 和支付宝小程序作为技术示例，介绍在淘系搭建系统中是如何进行模块化搭建小程序。

小程序搭建和普通页面搭建存在如下的差异：

1、普通页面只对一个页面进行搭建和发布，而小程序可能包含多个页面

2、普通页面可以通过 JS 动态加载和渲染模块内容，而小程序的代码是固定的，因此在源码阶段就要将模块内容组装完成

因此对小程序将拆分为两部分：小程序模块与小程序运行框架。小程序模块用于正常的页面搭建，小程序框架基于小程序工程，能结合搭建信息产生通过处理最终生成小程序源码的一个代码框架。小程序的产生过程如下图所示：

对于搭建页面，根据搭建信息和小程序运行框架内的模板页生成小程序内的搭建页，而普通的源码页面则直接进入最终的小程序中。

小程序物料开发

小程序模块

小程序模块的文件内容可以分成两个部分。一个部分是进行渲染的小程序格式的文件，如 index.axml/index.acss/index.js/index.json，另一部分则是给搭建系统中描述搭建数据格式信息的 schema.json，这个描述最终会决定模块对应的搭建表单以及数据请求时返回的数据格式，其格式可以参考 JSON Schema 定义。其中我们可以使用 Rax 进行研发，这样可以在产生小程序原生语法的代码的同时可以产生 H5 的代码，用于正常 H5 页面的搭建场景。以下是我们模块构建产物的定义：

|----miniapp           // 模块小程序端文件
|    |----index        
|    |----index.acss   
|    |----index.axml   
|    |----index.js     
|    |----index.json   // 页面 json 定义
|----index.js          // 模块 h5 端文件
|----index-pc.js       // 模块 pc 端文件
|----schema.json       // schema 描述
|----mock.json         // mock 数据

对于模块的使用，可以有两种方式。第一是在开发完成后发布 npm 包，这样在小程序中可以以 npm 包的方式进行引入使用。第二则是将小程序模块放在一个小程序插件之中，通过插件的方式进行引入，这种方式非常适合 ISV 模块开发的场景。插件可以参考文档。

小程序运行框架

小程序运行框架则是根据小程序的标准工程格式生成。是其文件结构如下。template 目录会作为搭建模板页被复制成为最终的搭建页。template/index.js 中则编写通用的数据请求和模块渲染逻辑。对于不需要搭建的页面，则可以像 other 目录一样单独定义。

|----pages                  // 预定义的页面，以下的文件都遵循小程序规范
|    |----template          // 用于生成搭建页面的模板页       
|    |    |----index.acss  
|    |    |----index.axml  
|    |    |----index.js     
|    |    |----index.json   
|    |----other             // 纯源码页，单独定义的页面
|    |    |----index.acss  
|    |    |----index.axml   
|    |    |----index.js    
|    |    |----index.json   
|----app.acss               // 应用 acss文件
|----app.js                 // 应用入口文件
|----app.json               // 应用 json，可以预定义一些 app 信息
|----package.json           // package.json，可以预定义需要打入的 npm 包

小程序搭建

在完成物料开发后，就进入了小程序的搭建阶段。由于我们原有系统已经有了一套成熟的搭建界面，因此我们的小程序搭建流程和移动端的搭建保持了一致，都是基于模块的 schema.json 进行搭建表单的渲染，然后进行数据填写和发布。这样我们的可以同时产出 H5 页面和小程序的页面。

小程序预览

由于小程序本身无法在浏览器环境进行预览的，所以我们可以有两种思路进行预览。

一是由于我们使用了 Rax 进行开发，因此会产生模块对应的 H5 的代码，则可利用这部分代码展示一个 H5 版本的预览，不过这个方案和真实的小程序渲染结果可能会存在偏差。

二则是利用官方的小程序渲染能力，如支付宝小程序提供的 Herbox 工具，其效果如下，他可以通过小程序的源码提供 H5 端的渲染，同时也提供了真机预览的能力，更真实和准确。

小程序源码拼装与发布

在搭建完成后，就可以进行小程序的打包和发布。

对于所有需要搭建的页面，我们可以产生一份标准搭建信息。如下是搭建信息的一个案例，包含搭建页面 a 和搭建页面 b 两个搭建页

// 搭建信息
{
  "pages": [
    {
      "pageInfo": {
        "id": 1,
        "name": "搭建页面 a",
        "path": "/build/a"
      },
      "modules": [
        {
          "name": "test-module-a",
          "uuid": "111111111"
        },
        {
          "name": "test-module-a",
          "uuid": "22222222"
        }
      ]
    },
    {
      "pageInfo": {
        "id": 2,
        "title": "搭建页面 b",
        "path": "/build/b"
      },
      "modules": [
        {
          "name": "test-module-c",
          "uuid": "33333333"
        }
      ]
    }
  ]
}

根据搭建信息，产生的小程序文件内容如下。template 目录被复制为了 a 和 b 两个页面。

|----pages                  
|    |----build          
|    |    |----a
|    |    |    |----index.acss  
|    |    |    |----index.axml  
|    |    |    |----index.js     
|    |    |    |----index.json 
|    |    |----b
|    |    |    |----index.acss  
|    |    |    |----index.axml  
|    |    |    |----index.js     
|    |    |    |----index.json 
|    |----other            
|    |    |----index.acss  
|    |    |----index.axml   
|    |    |----index.js    
|    |    |----index.json   
|----app.acss               
|----app.js             
|----app.json            
|----package.json

为了能根据投放数据进行动态渲染，我们在 index.axml 内注入模块的 axml 片段。这样就可以根据数据动态渲染模块。

<view a:for="{{modules}}" key="{{item.uuid}}">
  <test-module-a a:if="{{item.name === 'test-module-a'}}" data="{{item.data}}" />
  <test-module-b a:if="{{item.name === 'test-module-b'}}" data="{{item.data}}" />
</view>

同时如果我们通过 npm 包的方式加载模块，则在 index.json 中声明：

{
  "usingComponents": {
    "test-module-a": "test-module-a/miniapp/index",
    "test-module-b": "test-module-b/miniapp/index"
  }
}

package.json 中声明：

{
  // ...
  dependencies: {
    // ...
    "test-module-a": "xxx",
    "test-module-b": "yyy"
  }
}

这样我们就完成了小程序源码部分的拼装。

获取完成小程序源码后，我们就可以和正常小程序一样进行发布，并在小程序平台进行提审、发布等操作。

以上总结了在淘系搭建系统内的模块化搭建小程序整体思路。在具体实践过程中，由于生成一个小程序的过程较为复杂，因此可以采取小程序模板页面+子页面的模式进行搭建，即先搭建一个模板页面，使用其进行小程序的生产和发布，然后根据模板页面产生子页面，只进行数据搭建。具体投放时，小程序内根据不同的传参进行子页面的数据请求然后进行渲染。这样在子页面（通常面向运营使用）的搭建流程会更为顺畅。

如果您对前端搭建方向感兴趣，欢迎联系 [email protected] 或者微信：limboooooo 进行沟通交流~


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK