最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

Taro 小程序实战技术摘要

Rolan 2019-3-25 00:17

Taro 小程序实战技术摘要React一个用于构建用户界面的 JAVASCRIPT 库。采用声明范式,可以轻松描述应用。通过对DOM的模拟,最大限度地减少与DOM的交互。组件复用,能够很好的应用在大项目的开发?#23567;?#21333;向响应的数据流 ...

Taro 小程序实战技术摘要

React

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

Taro

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

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将?#21019;?#30721;分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。

TypeScript

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

GitFlow

git-flow 是一个 git 扩展集,按 Vincent Driessen 的?#31181;?#27169;型提供高层次的库操作

VsCode + 插件

Visual Studio Code(简称VsCode)是一个轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系?#24120;?#21487;通过安装插件来支持C++、C#、Python、PHP等其他语言。以?#26696;?#22810;丰富便捷的插件库。

代码检查

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

在 JavaScript 项目中,我们一般使用 ESLint 来进行代码检查。它通过插件化的特性极大的丰富了适用范围,搭配 typescript-eslint-parser 之后,甚至可以用来检查 TypeScript 代码。

TSLint 与 ESLint 类似,不过除了能检查常规的 js 代码风格之外,TSLint 还能够通过 TypeScript 的语法解析,利用类型系统做一些 ESLint 做不到的检查。

为什么需要代码检查

有人会觉得,JavaScript 非常灵活,所以需要代码检查。而 TypeScript 已经能够在编译阶段检查出很多问题了,为什么还需要代码检查呢?

因为 TypeScript 关注的重心是类型的匹配,而不是代码风格。当团队的人员越来越多时,同样的逻辑不同的人写出来可能会有很大的区别:

  • 缩进应该是四个空格还是两个空格?
  • 是否应该禁用 var?
  • 接口名是否应该以 I 开头?
  • 是否应?#20204;?#21046;使用 === 而不是 ==?

这些问题 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设计协作

蓝湖是一款设计图共享?#25945;?帮助互联网团队管理设计图。蓝湖可以自动生成标注,与团队共享设计图,展示页面之间的跳转关系。支持从Sketch一键分享、在线讨论、自动为设计图生成标注,而且只需简单几步就能将设计图变成一个可以点击的演示原型,支持分享给同事,?#30431;?#20063;可以在?#21482;?#20013;查看设计效果。蓝湖已经成为新一代产品设计的工作方式。

直接在线编辑和预览的方式,让产品与设计师的交流反馈得到极大的提升,同时开发者可以得到详细的标注,以及不同?#25945;?#30340;支持提示,使得开发效率变快。

框架搭建

全局配置文件

(ps: 截图中的秘钥配置和配置都是测试,大家看一下大概配置就好)

通过 Config 文件,区分开发、生产环?#24120;?#21160;态的编译代码后,使用相应正确的配置,还有小程序不同的标识,同时保存了微信、支付宝、神策等第三方?#25945;?#30340;密钥。统一的配置文件能让后期更好维护。

通过Swagger文档生成API文件

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

  1. 放入Swagger文件

  1. 执行转化命令
sudo api-cli MINI js
  1. 得到api请求配置文件

  1. 代码中使用

开发适配

在自动生成api请求文件后,需要更改一些配置才能在于小程序之中运行,所以我们做了以下适配:

  • 小程序请求

    • Taro.request 适配 微信、支付宝小程序请求
  • 全局请求头添加

    • userToken 用来识别用户身份信息
    • branch 后端服务路径?#31181;?#21517;称
    • clientType 小程序?#25945;?#21517;称
    • version 当前程序版本
  • 测试调试工具

    • baseURL 更改全局请求地址
    • branch 更改请求头?#31181;?#21517;
    • clear 清除缓存数据

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

资源优化

由于官方的限制,一个小程序的代码包括资源文件大小不能超过2M,在真实迭代情况下,随着业务的增加,功能的改变,2M大小对我们来说可能很快就要超出,我们采用以下方案:

  1. 代码分包

此方式是官方推荐的方法,通过把不同业务代码资源分离出来,主要的功能先行下载运行,如:主页商铺列表、商铺详情、订单列表等,而相对?#25512;?#30340;功能可以后续异步下载运行,如:退款列表/详情、会员权益说明等,但是官?#20132;?#26159;限制了最多为4个分离包,每个大小限制也为2M。

  1. 图片资源远端保存

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

  1. 代码压缩

代码运行?#31449;?#26159;机器做的事,只是顺便让我们程序员看看,所以在我们编译代码的同时对其js、css等文件内容压缩,去除运行中不必要的注释、打印、多余空格等,同时用编译环境控制是否开启压缩功能,这样平时开发调试的时候可以关闭压缩功能,更好的进行调试、测试、排错。

线上代码报错日志 fundebug

在真实线上的环?#24120;?#38590;免会遇到很隐性的BUG,通过集成fundebug的方式。来检测到线上程序报错的信息。

fundebug 可以快速复现出错场景,记录出错前点击、页面跳转、网络请求,控制台打印等信息。通过 Source Map 还原生产环境中的压缩代码,提供完整的堆栈信息,准?#33539;?#20301;到出错源码,帮助我们快速修复Bug。

一键还原出错代码

数据采集

Sensors(神策分析)针对企?#23548;?#23458;户的自助式用户?#24418;?#20998;析?#25945;ā?#23454;时数据采集、建模、分析,驱动市场营销、产品优化、用户运营、管理监控。

神策官?#25945;?#20379;了小程序的SDK,但是我们需要配合产品提供的事件和逻辑,自己编写埋点。

  • 埋点事件模型?#32479;?#35937;类
// 点击优惠券列表
export interface IClickCouponMerchantList extends IClickCoupon {}

// 点击?#19968;?#20248;惠券
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 文件、统一请求封装和自定义请求头、处理多端授权用户信息等,还有很多技术和流程的细节,容我后续再跟大家慢慢?#27493;狻?/p>

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: newsning 来自: segmentfault
新时时彩软件
福建时时彩开奖直播 意大利恩波利二手市场 黄金农场主方块三著 里尔对第戎比赛结果 阿拉斯加垂钓走势图 公牛vs爵士 莱万特vs揽胜运动 大胆的戴夫和荷鲁斯之眼APP 德科钻石客服 一起来捉妖照妖镜 11月21日鹈鹕vs爵士全场录像 比利亚雷亚尔对战巴伦西亚