成都商城网站开发设计,网络公司名字大全及寓意,兰州网站建设设计,企业邮箱怎么创建我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣获取前端知识 本文将介绍 Taro 是如何从一个为了解决小程序开发问题的框架演变成一个多端统一开发框架的。
使用 React 语法来写小程序
谈一谈小程序开发
微信小程序为我们的业务提供了一种新的展现形态… 我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣获取前端知识 本文将介绍 Taro 是如何从一个为了解决小程序开发问题的框架演变成一个多端统一开发框架的。
使用 React 语法来写小程序
谈一谈小程序开发
微信小程序为我们的业务提供了一种新的展现形态但对于开发者来说开发体验则显得并不那么友好。
首先从文件组织上看一个小程序页面或组件需要同时包含 4 个文件脚本逻辑、样式、模板以及配置文件在开发一个功能模块时就需要在 4 个文件之间切换而当功能模块多的话就需要在多个文件之间切换这样显然非常浪费时间。 其次从开发方式上看在前端工程化思想深入人心的今天小程序的种种开发方式显得有些落后了主要体现在以下几个方面
没有自定义文件预处理无法直接使用 Sass、Less 以及较新的 ES.Next 语法字符串模板太过孱弱小程序的字符串模板仿的是 Vue但是没有提供 Vue 那么多的语法糖当实现一些比较复杂的处理时写起来就非常麻烦虽然提供了 wxs 作为补充但是使用体验还是非常糟糕
缺乏测试套件无法编写测试代码来保证项目质量也就不能进行持续集成自动化打包。
所以从开发方式上看小程序开发没有融入目前主流的工程化开发思想很多业界开发模式与工具没有在小程序开发中得到相应体现像是从前端工业时代回退到了刀耕火种的年代。
最后从代码规范上看小程序的规范有很多不统一的地方例如内置组件的属性名有时候是全小写有时候是 CamelCase 格式有时候又是中划线分割的形式这样就导致编码的时候得不时查阅文档才能确定写法。
如何更优雅地开发小程序
在 Taro 的设计之初我们的想法就是希望能够以一种更加优雅的方式来开发小程序解决小程序开发上的种种痛点首先我们希望能使用前端工程化的方式来进行开发同时在语法上我们希望能抛弃小程序的四不像语法遵循一套我们熟悉的框架语法来进行开发这样不仅能更好地保证开发质量、提升开发体验同时也能大大降低开发者开发小程序的成本。
于是在开发方式上Taro 打造了一套完善编译工具引入了前置编译的机制可以自动化地对源文件进行一系列的处理最终输出小程序上的可执行文件包括代码的编译转换处理加入文件预处理功能支持 NPM 包管理等等这一部分的原理将会在后续章节中为大家介绍。而语法标准上我们把目光投向了市面上流行的三大前端框架。
React、Vue、Angular 是目前前端框架三巨头他们各有各的风格关于他们的优劣在业界也是一直争论不休这本身也是智者见智仁者见仁的事所以在本文中就不再评述。Taro 最终采用的是 React 语法来作为自己的语法标准主要有以下几点考虑
React 是一个非常流行的框架也有广大的受众使用它也能降低小程序开发的学习成本小程序的数据驱动模板更新的思想与实现机制与 React 类似
React 采用 JSX 作为自身模板JSX 相比字符串模板来说更自由更自然更具表现力不需要依赖字符串模板的各种语法糖也能完成复杂的处理React 本身有跨端的实现方案 - React Native并且非常成熟社区活跃对于 Taro 来说有更多的多端开发可能性。
最终Taro 采用了 React 语法来作为自己的语法标准配合前端工程化的思想为小程序开发打造了更加优雅的开发体验。 如何实现优雅
那么如何实现使用 React 来开发小程序呢在 Taro 中采用的是编译原理的思想所谓编译原理就是一个对输入的源代码进行语法分析语法树构建随后对语法树进行转换操作再解析生成目标代码的过程。 探索多端可能性
多端统一开发一直是所有开发人员的共同追求。在终端碎片化的大背景下前有 Hybrid 模式拉开序幕后有 React Native、Weex 风起云涌再到如今 Flutter 横空出世种种这些都是为了能够 Write once, run anywhere 。给每一种终端单独进行开发的成本是昂贵的所以一个能够尽可能抹平多端开发差异的开发解决方案就显得极为重要。
多端转换原理
开发时我们遵循 React 语法标准结合编译原理的思想对代码文件进行一系列转换操作最终获得可以在小程序运行的代码。而 React 最开始就是为了解决 Web 开发而生的所以对代码稍加改动也可以直接生成在 Web 端运行的代码而同属 React 语法体系下的 React Native也能够很便捷地提供支持。同理其他平台如快应用、百度小程序等将源码进行编译转换操作也能获得该平台下的对应语法代码。 抹平多端差异
基于编译原理我们已经可以将 Taro 源码编译成不同端上可以运行的代码了但是这对于实现多端开发还是远远不够。因为不同的平台都有自己的特性每一个平台都不尽相同这些差异主要体现在不同的组件标准与不同的 API 标准以及不同的运行机制上。 可以看出小程序和 Web 端上组件标准与 API 标准有很大差异这些差异仅仅通过代码编译手段是无法抹平的例如你不能直接在编译时将小程序的 直接编译成
这一套标准主要以三个部分组成包括标准运行时框架、标准基础组件库、标准端能力 API其中运行时框架和 API 对应 taro/taro组件库对应 tarojs/components通过在不同端实现这些标准从而达到去差异化的目的。 而在标准的定制上起初我们想重新定制一套标准规范但是发现在所有端都得实现这套标准的成本太高所以我们就思考为什么不以一个端的组件库、API 为标准呢这样不仅省去了标准定制的时间而且在这个端上我们可以不用去实现这套标准了。最终在所有端中我们挑选了微信小程序的组件库和 API 来作为 Taro 的运行时标准因为微信小程序的文档非常完善而且组件与 API 也是非常丰富同时最重要的是百度小程序以及支付宝小程序都是遵循的微信小程序的标准这样一来Taro 在实现这两个平台的转换上成本就大大降低了。 运行时
本文介绍的是 Taro 在编译成小程序和 H5 运行时发生了什么 JSX 转换微信小程序模板的实现 以这段代码为例
import Taro, { Component } from tarojs/taro
import { View, Text } from tarojs/componentsclass Home extends Component {config {navigationBarTitleText: 首页}state {numbers: [1, 2, 3, 4, 5]}handleClick () {this.props.onTest()}render () {const oddNumbers this.state.numbers.filter(number number 2)return (ScrollView classNamehome scrollTop{false}奇数{oddNumbers.map(number Text
onClick{this.handleClick}{number}/Text)}偶数{numbers.map(number number % 2 0
Text onClick{this.handleClick}{number}/Text)}/ScrollView)}
} Taro 的结构主要分两个方面运行时和编译时。运行时负责把编译后到代码运行在本不能运行的对应环境中你可以把 Taro 运行时理解为前端开发当中 polyfill。举例来说小程序新建一个页面是使用 Page 方法传入一个字面量对象并不支持使用类。如果全部依赖编译时的话那么我们要做到事情大概就是把类转化成对象把 state 变为 data把生命周期例如 componentDidMount 转化成 onReady把事件由可能的类函数Class method和类属性函数(Class property function) 转化成字面量对象方法Object property function等等。
但这显然会让我们的编译时工作变得非常繁重在一个类异常复杂时出错的概率也会变高。但我们有更好的办法实现一个 createPage 方法接受一个类作为参数返回一个小程序 Page 方法所需要的字面量对象。这样不仅简化了编译时的工作我们还可以在 createPage 对编译时产出的类做各种操作和优化。通过运行时把工作分离了之后再编译时我们只需要在文件底部加上一行代码 Page(createPage(componentName)) 即可。
如果你是从 Taro CLI 的 dist 文件夹看编译后的代码会发现它相当复杂那是因为代码会再经过 babel 编译为 ES5。
除了 Page 类型之外小程序还有 Component 类型所以 Taro 其实还有 createComponent 方法。由于 Component 在小程序里是全局变量因此我们还得把 import { Component } from tarojs/taro 的 Component 重命名。
回到一开始那段代码我们定义了一个类属性 configconfig 是一个对象表达式Object Expression这个对象表达式只接受键值为标识符Identifier或字符串而键名只能是基本类型。这样简单的情况我们只需要把这个对象表达式转换为 JSON 即可。另外一个类属性 state 在 Page 当中有点像是小程序的 data但它在多数情况不是完整的 data下文会继续讨论data。这里我们不用做过多的操作babel的插件 transform-class-proerties 会把它编译到类的构造器中。函数 handleClick 我们交给运行时处理有兴趣的同学可以跳到 Taro 运行时原理查看具体技术细节。
再来看我们的 render() 函数它的第一行代码通过 filter 把数字数组的所有偶数项都过滤掉真正用来循环的是 oddNumbers而 oddNumbers 并没有在 this.state 中所以我们必须手动把它加入到 this.state。和 React 一样Taro 每次更新都会调用 render 函数但和 React 不同的是React 的 render 是一个创建虚拟 DOM 的方法而 Taro 的 render 会被重命名为 _createData它是一个创建数据的方法在 JSX 使用过的数据都在这里被创建最后放到小程序 Page 或 Component 工厂方法中的 data 。最终我们的 render 方法会被编译为
_createData() {this.__state arguments[0] || this.state || {};this.__props arguments[1] || this.props || {};const oddNumbers this.__state.numbers.filter(number number 2);Object.assign(this.__state, {oddNumbers: oddNumbers});return this.__state;
}
开发指导
引入目录时如果不是在本模块文件下的不要使用相对路径要使用绝对路径如果是js 文件的引入是和mgr 项目一样的/ 代表根目录
如果是 scss 文件的引入styles 文件也做了 alias引入的时候 import ~/styles/variables.scss scss写的时候先引入变量文件颜色字体统一使用定义好的。必选强制看一遍 /variables.scss文件。我是歌谣 放弃很容易 但是坚持一定很酷
