Taro原理分析

2021.1.10 星期一 :

文档

实践

@tarojs/cli

配置文件中配置项，api等可以看到webapck的影子。比如：alias，webpackChain。
有些是taro特殊项。比如：designWidth，framework。
plugins 也有一些taro插件可以配置。
配置中还区分小程序，h5等不同端。

build

build 后文件分析。

### app.js

require("./runtime"), 
require("./common"), 
require("./vendors"), 
require("./taro"), 
(wx["orderNewWebpackJsonp"] = wx["orderNewWebpackJsonp"] || []).push(
  [],
  {
    135: {},
    227: {},
    // ...
  },
  [
    [227, 0, 1, 2, 3]
  ]
]);

/* runtime.js */
(function(e){function r(r){} /* .... */)([]);

/* common.js */
// (wx["orderNewWebpackJsonp"]=wx["orderNewWebpackJsonp"]||[]).push([[3]

/* vendors.js */
// (wx["orderNewWebpackJsonp"]=wx["orderNewWebpackJsonp"]||[]).push([[2],{0:

/* taro.js */
(wx["orderNewWebpackJsonp"]=wx["orderNewWebpackJsonp"]||[]).push([
  [1],
  {
    1: function() {},
    213: function() {}, 
  }
  // ...
]);

config配置中output: { /* 可以配合 npm script 和环境变量来动态修改 多个taro分包模块打包冲突 */jsonpFunction: "orderNewWebpackJsonp"}

### base.wxml
引入taro标签的定义，有一个utils.wxs。

<wxs module="xs" src="./utils.wxs" />
<template name="taro_tmpl">
  <block wx:for="{{root.cn}}" wx:key="uid">
    <template is="tmpl_0_container" data="{{i:item,l:''}}" />
  </block>
</template>

<template name="tmpl_0_static-view">
  <view hover-class="{{xs.b(i.hoverClass,'none')}}" hover-stop-propagation="{{xs.b(i.hoverStopPropagation,false)}}" hover-start-time="{{xs.b(i.hoverStartTime,50)}}" hover-stay-time="{{xs.b(i.hoverStayTime,400)}}" animation="{{i.animation}}" style="{{i.st}}" class="{{i.cl}}"  id="{{i.uid}}">
    <block wx:for="{{i.cn}}" wx:key="uid">
      <template is="{{xs.e(cid+1)}}" data="{{i:item,l:l}}" />
    </block>
  </view>
</template>
<!-- 。。。 -->

有看到app.wxss, comp.js, comp.json。
因为是分包，并没看到app.json。(需要在主应用中添加)

### pages
每个页面下都有index.js/json/wxml/wxss 标准的4个文件。

<import src="../../base.wxml"/>
<template is="taro_tmpl" data="{{root:root}}" />

以上是xml的所有内容。
可以看到是使用了小程序template能力。

require("../../app"),
(wx["orderNewWebpackJsonp"]=wx["orderNewWebpackJsonp"]||[]).push([
  [9],
  {
    228: function(){},
    // ...
  },
  [
      [228, 0, 1, 2, 3]
  ]
]);

blend

原生项目使用 Taro

1) 基础混合用法
2) 对 Taro 项目的部分页面分包
3) 把 Taro 项目作为一个完整分包​
4) 把 Taro 组件编译为原生自定义组件
安装插件 @tarojs/plugin-indie

3 完整分包​

京东购物小程序 | Taro3 项目分包实践
京东购物小程序 | Taro3 项目分包实践

但不幸的是，Taro 并没有提供一套完整的将项目作为独立分包运行在小程序中的解决方案。因此，本篇文章将介绍如何通过一套合适的混合开发实践方案，解决 Taro 项目作为独立分包后出现的一些问题。
\$_PS: 但是文档中已经有原生小程序中分包内容。

以下为正文：
幸运的是，在3.1.4版本后的 Taro，提供了混合开发的功能，意思为可以让原生项目和 Taro 打包出来的文件混合使用，只需要在打包时加入 –blended 命令即可。

blended 中文翻译是混合的意思，在加入了这个命令后，Taro 会在构建出来的 app.js 文件中导出 taroApp，我们可以通过引入这个变量来在原生项目下的 app.js 调用 Taro 项目 app 的 onShow、onHide 等生命周期。

如果单纯地使用 blended 命令，即使我们不需要调用 onShow、onHide 这些生命周期，我们也需要在原生项目下的 app.js 里引入Taro项目的入口文件，因为在执行我们的小程序页面时，我们需要提前初始化一些运行时的逻辑，因此要保证 Taro 项目下的 app.js 文件里的逻辑能优先执行。

#### 问题
理想很丰满，现实很骨感，由于我们需要将 Taro 项目作为单独的分包打包到主购项目中，因此这种直接在原生项目的 app.js 中引入的方式只适用于主包内的页面，而不适用于分包。

#### 解决方案
引入 @tarojs/plugin-indie 插件，保证 Taro 前置逻辑优先执行
要解决混合开发在分包模式下不适用的问题，我们需要引入另外一个 Taro 插件 @tarojs/plugin-indie。
##### @tarojs/plugin-indie 原理
查看该插件的源码，我们可以发现该插件处理的逻辑非常简单，就是在编译代码时，对每个页面下的 js chunk 文件内容进行调整，在这些 js 文件的开头加上 require(“../../app”),并增加对应 module 的 sourceMap 映射。在进行了这样的处理后，便能保证每次进入 Taro 项目下的小程序页面时，都能优先执行 Taro 打包出来的运行时文件了。

其他

Taro3运行时机制剖析

版本升级

3.5