Taro+react 微信小程序记录

2023-01-11 20:50:09 浏览数 (1)

全局安装taro

npm install -g @tarojs/cli

搭建一个taro项目

taro init myTaro

坑点: 用npm i ,不要用yarn装依赖,否则ts无限报错

启动

yarn dev:weapp

vscode写完会自动编译到dist目录

预览

1、下载微信开发者工具

点击下载微信开发者工具

2、安装后导入项目,选择dist目录,预览小程序

配置路由

代码语言:javascript复制
1//app.config.ts
2export default defineAppConfig({
3  pages: ["pages/index/index", "pages/article/index"],
4  window: {
5    backgroundTextStyle: "light",
6    navigationBarBackgroundColor: "#fff",
7    navigationBarTitleText: "WeChat",
8    navigationBarTextStyle: "black",
9  },
10  tabBar: {
11    list: [
12      {
13        pagePath: "pages/index/index",
14        text: "首页",
15      },
16      {
17        pagePath: "pages/article/index",
18        text: "文章",
19      },
20    ],
21    color: "#000",
22    selectedColor: "#56abe4",
23    backgroundColor: "#fff",
24    borderStyle: "white",
25  },
26});

安装taro-ui

坑点:由于taro-ui会有版本冲突问题,直接修改package.json然后npm i

代码语言:javascript复制
1//package.json
2"taro-ui": "^3.0.0-alpha"

入口文件引入样式

代码语言:javascript复制
1import "taro-ui/dist/style/index.scss";

封装request

坑点1:小程序不会有跨域问题,直接调后端就行

坑点2:小程序不可以使用axios,直接用原生

0 人点赞