# Taro 与 GMU 小程序

# Taro 介绍

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

# Taro 与 GMU 小程序

GMU 小程序支持微信小程序语法，通过 CLI 能够将微信小程序直接编译生成的 GMU 小程序，它能够直接在 GMU App 环境中运行。

Taro 在 GMU 小程序体系中扮演的是一个上层框架的角色，使用 Taro 能够帮助你更快捷的编写微信小程序以及同构 H5 项目或更多端，而 GMU 小程序是专注于解析微信小程序语法（说明：可以使用原生微信语法编写小程序，也可以使用 Taro 或更多的框架编写小程序，并不做限制）。

# 标准化方向

团队统一使用 Taro vue 语法，官方文档链接：http://taro-docs.jd.com/taro/docs/README (opens new window)
Taro 版本采用 3.x（注：建议用最新，3.0 以上支持 vue 语法编写），并不对具体版本做特殊要求。说明：GMU 小程序底层是对微信小程序语法标准的全面支持，而 Taro 框架体系是把 DSL 语言转变为微信小程序语法的一种方案，我们不会对工具有过多的限制，拥抱社区。如果您发现 Taro 框架部分功能没有支撑到微信小程序，可以提交 PR 到社区来解决。

# JSN 到 Taro

从 JSN 到 Taro 的技术转变，虽然整个技术体系的底层发生了翻天复地的变化，但对于前端开发使用者来说，需要对项目改造的内容点并不多。主要需要注意的有如下几点：

原 JSN 项目存在大量 Light.sdk 调用，而在我们的小程序环境中，我们使用的则是标准化的小程序组件或 API 。例如：

// JSN 项目
LightSDK.navigate("test"); // 跳转
LightSDK.close(); // 关闭

LightSDK.back({
  number: "9999",
}); // 返回

LightSDK.switchTab(
  {
    index: "",
  },
  ""
); // 切换tab

转变为

// Taro api 形式（也可以查看wx文档，类似 wx.navigateTo）
import Taro from "@tarojs/taro";

Taro.navigateTo({
  url: "pages/test?id=1", // 跳转
});
Taro.navigateBack({
  delta: 2, // 表示回退层级
});
Taro.switchTab({
  url: "/home", // 切换tab
});

<!-- taro vue 单文件 -->
<navigator url="/pages/test">跳转到新页面</navigator>
<navigator url="/pages/home" open-type="switchTab">切换tab</navigator>

资源引用的路径变化。注：Taro 项目的目录结构有部分约定式，同时也可在配置项中设置 alias。

// 部分图片路径可做如下修改，注：因为小程序包体积会有限制，建议资源都在线化，可做骨架屏来提升体验
const img = {
  //   loginedImg: "../../lt/doc/images/home/user-logged.png", // 原 JSN 项目
  loginedImg: require("@/lt/doc/images/home/user-logged.png"), // 小程序项目
  //   loginedImg: "https://xxx/lt/doc/images/home/user-logged.png" // 建议资源在线化
};

部分标签变化。Taro 中不存在 <div></div> 标签，统一为 <view></view> 标签。文本标签 <span></span> 变为 <text></text>。

关于 Taro 组件的使用文档：http://taro-docs.jd.com/taro/docs/components-desc (opens new window)

原 JSN 项目中默认为 flex 布局，而小程序中建议用 flex 布局，所以需要在主动外层容器添加 display:flex; 属性。

# Taro 调试技巧

使用 Taro 多端同步调试

参考 Taro 官方：http://taro-docs.jd.com/taro/docs/envs-debug (opens new window)

结合 GMU 小程序的调试模式

说明：目前 GMU 小程序暂未提供配合 Taro 使用的项目脚手架，因为我们的目的不是把 Taro 作为一个捆绑框架使用，我们的目标是兼容所有的上层框架。

为了能让 Taro 项目方便快捷的与 GMU 小程序体系结合，目前临时方案可做如下的配置修改：

GMU 配置文件

// light.project.json

{
  "prject": "miniprogram",
  "type": "miniprogram",
  "dist": "build",
  "plugins": ["miniprogram"]
}

taro 配置文件

// config/index.js

const config = {
  sourceRoot: "src",
  outputRoot: "dist/light/src", // 输出符合 light 项目的工程结构，注：如果该项目为多端同构项目，此处可以根据环境变量，做不同的输出结构配置
  copy: {
    patterns: [{ from: "light.project.json", to: "dist/light/project.json" }], // 复制 light 项目配置文件，到 light 工程
    options: {},
  },
};

第一步：运行 Taro 项目。

yarn dev
# 或 npm run dev

第二步：在 Taro 输出小程序的位置下 (例：dist/light) 运行 Light 监听。

说明：也可以在 npm script 上添加便捷脚本例如："dev:light": "cd dist/light && light release -wb 3000"

light release -wb 3000

第三步：修改 Taro 项目，实时编译到 Light 项目，Light 监听并实时渲染到浏览器或 Light View。

# 小程序调试

可以开启vconsole在手机上查看具体的日志信息，可参考文档

如需查看请求的接口network信息，在 app.js 中加入如下代码 __base__.DEBUG_SHOW_NETWORK_INFO = true即可。可参考文档