使用React+Taro搭建小程序
在开发微信小程序的过程中,常用的小程序UI框架有:tarouniappmpvueMpxWepyWux Weapp显然比较好用且较广泛使用的是uniapp和taro。虽然Taro和uniapp文档不够完善,在开发路上踩坑不断,但是也阻挡不了开发者勇往直前的踩坑之路。本篇略微记录一下使用taro开发微信小程序的小小心得:React官网一,首先看看使用react搭建项目:a.安装node环境nodejs
·
在开发微信小程序的过程中,常用的小程序UI框架有:
taro
uniapp
mpvue
Mpx
Wepy
Wux Weapp
显然比较好用且较广泛使用的是uniapp和taro。
虽然Taro和uniapp文档不够完善,在开发路上踩坑不断,
但是也阻挡不了开发者勇往直前的踩坑之路。
本篇略微记录一下使用taro开发微信小程序的小小心得:
一,首先看看使用react搭建项目:
a.安装node环境
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.小程序运行成功及效果
效果:
更多推荐
已为社区贡献4条内容
所有评论(0)