在开发微信小程序的过程中，常用的小程序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.小程序运行成功及效果

在这里插入图片描述

效果：

在这里插入图片描述

# 小程序 # reactjs
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue