使用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.小程序运行成功及效果

效果：

使用React+Taro搭建小程序相关推荐

Taro框架使用React语法开发小程序有关行内样式解析问题
前两天有个同事在使用Taro的react语法开发小程序时碰到了一个关于行内样式的问题: 本以为蓝色这两个字的颜色应该是蓝色的,结果发现这个行内样式却没有生效,还是黑色.于是看了编译后的代码,居然是这样 ...
为何我们要用 React 来写小程序 - Taro 诞生记
在互联网不断发展的今天,前端程序员们也不断面临着新的挑战,在这个变化多端.不断革新自己的领域,每一年都有新的美好事物在发生.从去年微信小程序的诞生,到今年的逐渐火热,以及异军突起的轻应用.百度小程序等 ...
8个小程序开源项目助你快速搭建小程序
今天和大家分享几个小程序开源项目, 帮助我们轻松搭建自己的小程序应用. 我会从大家最熟悉的小程序UI组件, 到可视化库, 再到完整项目, 一一和大家介绍. 小程序UI组件库小程序多端开发框架小程序 ...
java代码实现购物车小程序_使用Taro实现小程序商城的购物车功能模块的实例代码...
Taro 是一套遵循 React 语法规范的多端开发解决方案. 现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的 ...
win下搭建小程序服务器,win下搭建小程序服务器
win下搭建小程序服务器内容精选换一换云硬盘挂载至云服务器后,需要登录云服务器初始化云硬盘,即格式化云硬盘,之后云硬盘才可以正常使用.云耀云服务器磁盘初始化的操作方法与ECS相同,本节操作介绍使 ...
VScode+Taro开发小程序
现如今市面上端的形态多种多样,业务要求同时在不同的端都要求有所表现的时候只编写一套代码就能够适配到多端的能力就显得极为需要,Taro 是一个开放式跨端跨框架解决方案. 首先,你需要使用npm或者yar ...
react.js做小程序_如何使用React.js构建现代的聊天应用程序
react.js做小程序 In this tutorial, I will guide you to build your own group chat application using React ...
Taro -- 微信小程序登录
Taro微信小程序登录 1.调用Taro.login()获取登录凭证code: 2.调用Taro.request()将code传到服务器: 3.服务器端调用微信登录校验接口(appid+appsecr ...
函数计算搭建小程序Web应用后端服务
简介:使用Severless架构搭建移动App.小程序和Web应用后端服务,弹性伸缩使用云资源. 直达最佳实践:[函数计算搭建小程序Web应用后端服务] 最佳实践频道:[点击查看更多上云最佳实践] 这 ...

使用React+Taro搭建小程序

使用React+Taro搭建小程序相关推荐

最新文章

热门文章