Taro 小程序实战技术摘要

Taro 小程序实战技术摘要

React

一个用于构建用户界面的 JAVASCRIPT 库。采用声明范式，能够轻松描述应用。经过对DOM的模拟，最大限度地减小与DOM的交互。组件复用，可以很好的应用在大项目的开发中。单向响应的数据流，使得开发变得清晰。

Taro

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现现在市面上端的形态多种多样，Web、React-Native、微信小程序等各类端大行其道，当业务要求同时在不一样的端都要求有所表现的时候，针对不一样的端去编写多套代码的成本显然很是高，这时候只编写一套代码就可以适配到多端的能力就显得极为须要。

使用 Taro，咱们能够只书写一套代码，再经过 Taro 的编译工具，将源代码分别编译出能够在不一样端（微信/百度/支付宝/字节跳动小程序、H五、React-Native 等）运行的代码。

TypeScript

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

GitFlow

git-flow 是一个 git 扩展集，按 Vincent Driessen 的分支模型提供高层次的库操做

VsCode + 插件

Visual Studio Code（简称VsCode）是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux。内置JavaScript、TypeScript和Node.js支持，并且拥有丰富的插件生态系统，可经过安装插件来支持C++、C#、Python、PHP等其余语言。以及更多丰富便捷的插件库。

代码检查

代码检查主要是用来发现代码错误、统一代码风格。

在 JavaScript 项目中，咱们通常使用 ESLint 来进行代码检查。它经过插件化的特性极大的丰富了适用范围，搭配 typescript-eslint-parser 以后，甚至能够用来检查 TypeScript 代码。

TSLint 与 ESLint 相似，不过除了能检查常规的 js 代码风格以外，TSLint 还可以经过 TypeScript 的语法解析，利用类型系统作一些 ESLint 作不到的检查。

为何须要代码检查

有人会以为，JavaScript 很是灵活，因此须要代码检查。而 TypeScript 已经可以在编译阶段检查出不少问题了，为何还须要代码检查呢？

由于 TypeScript 关注的重心是类型的匹配，而不是代码风格。当团队的人员愈来愈多时，一样的逻辑不一样的人写出来可能会有很大的区别：

• 缩进应该是四个空格仍是两个空格？
• 是否应该禁用 var？
• 接口名是否应该以 I 开头？
• 是否应该强制使用 === 而不是 ==？

这些问题 TypeScript 不会关注，可是却影响到多人协做开发时的效率、代码的可理解性以及可维护性。

下面来看一个具体的例子：

let myName = 'Tom';

console.log(`My name is ${myNane}`);
console.log(`My name is ${myName.toStrng()}`);
console.log(`My name is ${myName}`)

// tsc 报错信息：
//
// index.ts(3,27): error TS2552: Cannot find name 'myNane'. Did you mean 'myName'?
// index.ts(4,34): error TS2551: Property 'toStrng' does not exist on type 'string'. Did you mean 'toString'?
//
//
//
// eslint 报错信息：
//
// /path/to/index.ts
//   3:27  error  'myNane' is not defined         no-undef
//   5:38  error  Missing semicolon               semi
//
// ✖ 2 problems (2 errors, 0 warnings)
//   1 errors, 0 warnings potentially fixable with the `--fix` option.
//
//
//
// tslint 报错信息：
//
// ERROR: /path/to/index.ts[5, 36]: Missing semicolon

下图表示了 tsc, eslint 和 tslint 能覆盖的检查：

上图中，tsc, eslint 和 tslint 之间互相都有重叠的部分，也有各自独立的部分。

虽然发现代码错误比统一的代码风格更重要，可是当一个项目愈来愈庞大，开发人员也愈来愈多的时候，代码风格的约束仍是必不可少的。

UI设计协做

蓝湖是一款设计图共享平台,帮助互联网团队管理设计图。蓝湖能够自动生成标注,与团队共享设计图,展现页面之间的跳转关系。支持从Sketch一键分享、在线讨论、自动为设计图生成标注，并且只需简单几步就能将设计图变成一个能够点击的演示原型，支持分享给同事，让他也能够在手机中查看设计效果。蓝湖已经成为新一代产品设计的工做方式。

直接在线编辑和预览的方式，让产品与设计师的交流反馈获得极大的提高，同时开发者能够获得详细的标注，以及不一样平台的支持提示，使得开发效率变快。

框架搭建

全局配置文件

（ps: 截图中的秘钥配置和配置都是测试，你们看一下大概配置就好）
经过 Config 文件，区分开发、生产环境，动态的编译代码后，使用相应正确的配置，还有小程序不一样的标识，同时保存了微信、支付宝、神策等第三方平台的密钥。统一的配置文件能让后期更好维护。

经过Swagger文档生成API文件

在需求评审后，先后端人员将会在一块儿制定接口结构，这点体如今Swagger文档之中，随后前端使用脚手架工具把Swagger文档yaml文件生成可调用的fetch请求文件集成到项目，避免了手动编写接口代码的错误风险，这点前提是对Swagger有严格的要求，基于接口规范编码。

1. 放入Swagger文件

1. 执行转化命令

sudo api-cli MINI js

1. 获得api请求配置文件

1. 代码中使用

开发适配

在自动生成api请求文件后，须要更改一些配置才能在于小程序之中运行,因此咱们作了如下适配：

• 小程序请求

  • Taro.request 适配 微信、支付宝小程序请求

• 全局请求头添加

  • userToken 用来识别用户身份信息
  • branch 后端服务路径分支名称
  • clientType 小程序平台名称
  • version 当前程序版本

• 测试调试工具

  • baseURL 更改全局请求地址
  • branch 更改请求头分支名
  • clear 清除缓存数据

以上适配让小程序的可拓展、可维护性获得大大提升。

资源优化

因为官方的限制，一个小程序的代码包括资源文件大小不能超过2M，在真实迭代状况下，随着业务的增长，功能的改变，2M大小对咱们来讲可能很快就要超出，咱们采用如下方案：

1. 代码分包

此方式是官方推荐的方法，经过把不一样业务代码资源分离出来，主要的功能先行下载运行，如：主页商铺列表、商铺详情、订单列表等，而相对低频的功能能够后续异步下载运行，如：退款列表/详情、会员权益说明等，可是官方仍是限制了最多为4个分离包，每一个大小限制也为2M。

1. 图片资源远端保存

这是一种经常使用的包大小减少体积的方案，超过30k大小的文件放入阿里云OSS资源仓库保存，代码中使用远程路径方式引入，但同时要考虑首屏渲染的平衡

1. 代码压缩

代码运行终究是机器作的事，只是顺便让咱们程序员看看，因此在咱们编译代码的同时对其js、css等文件内容压缩，去除运行中没必要要的注释、打印、多余空格等，同时用编译环境控制是否开启压缩功能，这样平时开发调试的时候能够关闭压缩功能，更好的进行调试、测试、排错。

线上代码报错日志 fundebug

在真实线上的环境，不免会遇到很隐性的BUG，经过集成fundebug的方式。来检测到线上程序报错的信息。

fundebug 能够快速复现出错场景，记录出错前点击、页面跳转、网络请求，控制台打印等信息。经过 Source Map 还原生产环境中的压缩代码，提供完整的堆栈信息，准肯定位到出错源码，帮助咱们快速修复Bug。

一键还原出错代码

数据采集

Sensors（神策分析）针对企业级客户的自助式用户行为分析平台。实时数据采集、建模、分析，驱动市场营销、产品优化、用户运营、管理监控。

神策官方提供了小程序的SDK，可是咱们须要配合产品提供的事件和逻辑，本身编写埋点。

• 埋点事件模型和抽象类

// 点击优惠券列表
export interface IClickCouponMerchantList extends IClickCoupon {}

// 点击兑换优惠券
export interface IClickToExChange {}

// 使用商品
export interface IConsume extends IOrder, IMerchant, ICommodity {}

// 点击小程序首页banner
export interface IClickMiniBanner {}

// ... 

export interface IStatisEvents {
  ClickCouponMerchantList?: (params: IClickCouponMerchantList) => any
  ClickToExChange?: (params: IClickToExChange) => any
  Consume?: (params: IConsume) => any
  ClickMiniBanner?: (params: IClickMiniBanner) => any
  // ...
}

• 数据采集封装

interface IStatis extends IStatisEvents {
  sensors: any;
  init: () => any;
  defaultTrack: (eventName: string, eventParams: any) => any;
}
const loadStatisEvent = (statis: Statis): IStatis => {
  return new Proxy(statis, {
    get(obj, prop) {
      const target = obj[prop];
      if (obj.hasOwnProperty(prop)) {
        return target;
      }
      if (!SaConfig.enable) {
        return noop;
      }
      if (typeof target === "function") {
        return target.bind(obj);
      }
      // 默认采集
      return obj.defaultTrack.bind(obj, prop);
    }
  });
};

class Statis implements IStatis {
  public sensors: any;

  constructor(sensors) {
    this.sensors = sensors;
  }

  init() {
    this.sensors.init();
  }

  defaultTrack(eventName: string, eventParams: any) {
    this.sensors.track(eventName, eventParams);
  }

  Login(id: string) {
    this.sensors.login(id);
  }

  RegisterApp(params: IRegisterApp) {
    const param = Object.assign(
      {
        platform: AppConfig.CLENT_TYPE
      },
      params
    );
    this.sensors.registerApp(param);
  }
}

const sa = loadStatisEvent(new Statis(sensors_));

• 事件采集

结语

微信/支付宝 双端发布，虽然说是一套代码，可是作了满多兼容，主要在两端受权用户信息不太同样，须要封装统一，再一个是样式写的不规范，两端表现的也不一致。 swagger API文件生成 可调用的 fetch 文件、统一请求封装和自定义请求头、处理多端受权用户信息等，还有不少技术和流程的细节，容我后续再跟你们慢慢讲解。