小程序和vue语法对比_React语法开发微信小程序 Demo

小程序和vue语法对比_React语法开发微信小程序 Demo_第1张图片

前言

从16年微信小程序内测的时候至今,微信小程序用实践证明了自己的创新和价值,微信小程序的规则也在社区的影响下变得更加完善。

但是不得不说,用惯了VSCode,官方的开发工具确实不怎么好用。之前没有接触过小程序开发,这次用了一两个星期的时间,大致熟悉了开发模式和流行的开发框架:Vue规范的uni-app、类Vue规范的wepy、近Vue写法的mpvue、O2实验室遵循React规范的Taro。

因为个人比较熟悉React和TypeScript,最后选择了Taro。不得不说使用框架开发小程序真的太爽了,感谢下Taro的开发者们。他能解决以下几个问题,编辑器、语言、调试、UI:

  1. 能使用VSCode编辑器开发,不用去适应小程序的编辑器,配合格式化插件Prettier,能有效控制团队代码规范。以及各种其他插件,各种方便。偷懒是程序员进步的根本动力。
  2. React+TypeScript能大大的提高开发效率和降低Bug率。真的是大大的提高,能使用jsx写模版和TypeScript的智能提示。如果你熟悉React的话,能轻松无痛过渡到小程序开发。
  3. 调试,还是要吐槽一下原生的开发工具,UI调试的时候真的太难用了:元素选择慢;直接写css没有代码提示;而且无法查看伪元素(after、before)但是css中是可以写的。平时用惯了Chrome DevTools,对这种降低效率的工具有点无法接受。好在Taro可以编译H5和微信小程序,这样可以同时开启微信小程序调试和Chrome DevTools,两端一起预览,虽然会有一些差别,但是能及时发现以做好兼容小程序。
  4. UI框架,其他的UI框架没有怎么了解,主要说一些Taro-UI,他包含了大部分交互所需组件。通过覆盖scss,基本上可以只保留交互效果,完全定制属于自己的主题,除了官方说的定制方法,完全可以自己定制到 类名 级别,原理就是选择器优先级覆盖,但是会有一些问题,比如升级UI框架版本的话,可能有影响。同时因为微信组件样式作用域的关系,覆盖代码要放在pages层级。

Demo

Taro 框架(v1.2.17),React+TypeScript 语法,Mobx 管理数据,Taro UI 框架。

Mobx 管理数据,这是 React 流行的数据管理方案之一,简单、可扩展的状态管理。需要注意是Taro使用的是 Mobx 4 版本,在对象动态写入等地方有些坑。
同时项目使用 TypeScript 。可能大部分前端开发人员没有接触过强类型语言,自从我使用之后就放不下了,也一直在团队中安利。TypeScript 的学习难度不算太高,但是收获绝对很值。

Taro 框架支持TypeScript,所以在调用wx的api的时候会有类型提示,接口规范也基本支持Promise方式。可能社区用TypeScript+Mobx开发的还是比较少,所以有一些框架上的问题,项目过程中也提了几个issue和PR。将demo分享出来也是希望更多的人在选择的时候有个参考,同时也能对社区有些贡献。

leidenglai/weapp-taro-typescript​github.com
小程序和vue语法对比_React语法开发微信小程序 Demo_第2张图片

目录结构

— config/  // 构建配置,Taro默认生成
— dist/ // 小程序构建缓存和输出目录
— src/            // 项目文件
    assets/ // 所有资源文件 如图片、字体、样式文件
    components/// 组件目录
    interface/// 公共接口
    libs // 手动导入的库,此目录不会进行代码检查和压缩编译
    pages/ // 项目页面目录,对应微信小程序的pages		
    services/// 与后端交互的接口请求文件
    stores/  // mobx数据管理
    utils/  // 一些中间件、插件方法等
    app.scss// 项目的配置
    app.tsx// 应用入口
- .eslintrc.json  // eslint配置
- .stylelintrc.json  // stylelint配置
- tsconfig.json   // ts语言的配置
— package.json  // 项目描述文件
— README.md     // 项目文档
- project.config.json // 小程序配置文件


Taro 框架

Taro 介绍 · Taro

Taro是一套遵循React语法规范的 多端开发解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro,我们可以只书写一套代码,再通过 Taro的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。

开发环境


进入项目根目录,安装依赖包:

## 安装依赖包
yarn

## 小程序调试模式
yarn dev:weapp

## h5
yarn dev:h5

开发时可以先在 h5 模式下完成大部分业务逻辑和 UI 调试,然后同时开启小程序和 H5 模式,对照查看效果,调试页面。

构建发布和问题多看看Taro官方文档,有问题上github看看issue。

注意事项

  1. Taro只是React语法糖,并不是真正的React框架
Taro 的生命周期/路由 和 setState在小程序端其实是包装成 React API 的一层语法糖,我们把这层包装称之为 Taro 运行时框架。几乎所有 Taro 提供的 API 和语法糖最终都是通过小程序本身提供的 API 实现的。

2. 开发之前一定要多看几遍Taro官方文档的注意事项和进阶指南

3. Taro官方对Mobx的引入的例子漏了一点。其实多页面的应用,只需在入口文件的render函数导入全部store即可,不需要引入Page组件。这样在全局所有页面中都可以注入store。

const store = {
  commonStore: new CommonStore(),
  userStore: new UserStore()
}

class App extends Component {
  // ...

  render () {
    return 
  }
}

4. (自1.3.6后已支持)框架使用的是React语法糖,所有关于组件的props,使用的是小程序的Component构造器properties属性,但是properties是Object类型,所以组件的props不能是Mobx的Observable,否则会被转化为普通的对象或者值。解决方法是传入关键信息如key字段,然后在子组件中注入Store,获取Observable数据。


资源

  • 项目配置 解释 package.json 文件 — JavaScript 标准参考教程(alpha)
  • Taro 中文文档:Taro 介绍 · Taro
    Taro UI:Taro UI | O2Team
  • React 官方中文文档:React 是一个用于构建用户界面的 JavaScript 库
  • Mobx 中文文档:MobX 介绍 · MobX 中文文档
  • TypeScript 中文文档:文档简介 · TypeScript中文网 · TypeScript——JavaScript的超集
  • Lodash.js 中文文档: https://www.html.cn/doc/lodash/
  • scss:Sass 参考手册 | Sass 中文文档

你可能感兴趣的:(小程序和vue语法对比)