使用React+Taro搭建小程序

在开发微信小程序的过程中，常用的小程序UI框架有：

taro
uniapp
mpvue
Mpx
Wepy
Wux Weapp

显然比较好用且较广泛使用的是uniapp和taro。
虽然Taro和uniapp文档不够完善，在开发路上踩坑不断，
但是也阻挡不了开发者勇往直前的踩坑之路。
本篇略微记录一下使用taro开发微信小程序的小小心得：

React官网

一，首先看看使用react搭建项目：

a.安装node环境

nodejs

b.安装react脚手架

npm isntall -g create-react-app

查看版本

create-react-app --version

c.新建项目

create-react-app my-app

d.运行启动项目

cd my-app

npm install

在这里插入代码片

npm start

e.运行成功及效果

效果

二，使用Taro搭建小程序

a.taro特性

• Taro 的语法规则基于 React 规范。

• 组件生命周期与 React 保持一致

• 支持使用 JSX 语法

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发多种应用

JSX是一种嵌入式的类似XML的语法。具体参考：JSX参考

b.安装：@tarojs/cli

npm install -g @tarojs/cli

c.创建模板项目

taro init myApp

d.运行项目

npm run dev:weapp      //小程序预览

npm run dev:h5         //H5预览

【注意】：小程序运行起来编译成功后，会生成dist文件。
可直接在微信开发者工具内打开dist文件进行预览。

e.打包

npm build dev:weapp     //小程序打包

npm build dev:h5      ///H5打包

f.小程序运行成功及效果

效果：