Mr笔记

Appearance

S12-07 小程序-Taro-项目：mr-mp-taro-juanpi ​

[TOC]

image-20240731122137187

接口文档 ​

baseURL

警告

由于juanpi.com网站已经倒闭，因此接口中的图片已经不再显示

首页 ​

首页Banner ​

请求方法 : GET

接口地址 : /homeinfo

调用例子 : baseURL + /homeinfo

接口返回的数据格式：

json
{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

image-20240819105320321

受欢迎度和推荐 ​

请求方法 : GET

接口地址 : /recommend

调用例子 : baseURL + /recommend

json
{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

商品列表 ​

请求方法 : POST

接口地址 : baseURL + /goods

可选参数（json格式） :

{
    "page": 1,  # 默认为1，即第一页
	"type": 0 # 支持 0 和 1。 其中 0 代表是精选专场， 1 代表是精选单品
}

调用例子 : baseURL + /goods

接口返回的数据格式：

{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

我的 ​

我的页面列表 ​

请求方法 : GET

接口地址 : /profile

必选参数 : 无

调用例子 : baseURL + /profile

接口返回的数据格式：

json
{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

环境搭建 ​

技术栈

  • react18
  • RTK
  • taro

项目初始化 ​

sh
taro init mr-mp-taro-juanpi

image-20240815171324618

处理报错 ​

错误： $RefreshReg$ is not defined

image-20240815172122267

解决： 这是由于React 在 H5 Dev 编译模式时默认开启了 fast refresh 功能。可以通过关闭热更新解决该问题：

1、在config/index.js中，设置h5的hot为false

js
const config = {
  // ...
  h5: {
    devServer: {
      hot: false, // 关闭热更新
    },
  },
}

2、在babel.config.js中，设置hot为false

js
module.exports = {
  presets: [
    [
      'taro',
      {
        framework: 'react',
        hot: false, // 禁用fast refresh
      },
    ],
  ],
}

错误： 不支持commonjs

image-20240815172745265

解决： 这是因为eslint的格式化检查问题，实际是需要支持commonjs的。可以关闭该检查

image-20240815172914199

错误： 缺少全局变量的定义

image-20240815172943723

解决： 在eslint中定义该全局变量

image-20240815173037274

错误： eslint引号规则强制在 JSX 属性中使用一致的单引号或双引号

image-20240815173105307

解决： 关闭该规则

image-20240815173354755

功能： 添加别名@

image-20240815173458912

功能： 启用webpack缓存

image-20240815173555648

功能： 启用局部css样式，和图片转base64限制

image-20240815173747006

image-20240815173845073

依赖包 ​

  • @reduxjs/toolkit
  • react-redux
  • classnames
  • proptypes

页面模板 ​

页面使用函数式组件 + hooks编写

image-20240815174047008

样式 ​

样式使用局部样式：文件格式：index.modules.scss

使用样式

image-20240815174214302

定义样式

image-20240815174236261

导航栏 ​

image-20240819101608093

image-20240819101722558

注意： 该配置在h5中不会生效，只在小程序中生效

tabBar ​

1、创建页面

sh
taro create --name category
taro create --name cart
taro create --name profile

taro create --name detail

2、配置tabbar

image-20240819102405700

3、配置pages

image-20240819102432547

image-20240819102515199

首页 ​

组件：HomeSearch ​

image-20240819102639293

页面布局 ​

1、使用组件

image-20240819103056955

2、页面布局

image-20240819103600549

3、样式

image-20240819104632086

组件：HomeBanner ​

image-20240819112807612

接口 ​

请求方法 : GET

接口地址 : /homeinfo

调用例子 : baseURL + /homeinfo

接口返回的数据格式：

json
{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

image-20240819105320321

请求数据 ​

1、service

image-20240819110308790

2、store/index.js

image-20240819111245272

3、store/modules/home.js

image-20240819112343255

4、app.js

image-20240819112113069

5、组件

image-20240819112054285

页面布局 ​

1、获取store数据

image-20240819114519597

2、使用组价

image-20240819114658459

3、页面布局

image-20240819115412634

组件：HomePopular ​

image-20240819112817573

接口 ​

请求方法 : GET

接口地址 : /recommend

调用例子 : baseURL + /recommend

json
{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

请求数据 ​

1、service

image-20240819110726230

2、store

image-20240819113035767

image-20240819113953273

3、组件

image-20240819113157770

页面布局 ​

1、使用组件

image-20240819115620187

2、页面布局

image-20240819120124695

3、样式

image-20240819120139527

组件：HomeRecommend ​

image-20240819120435438

接口 ​

请求方法 : GET

接口地址 : /recommend

调用例子 : baseURL + /recommend

json
{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

image-20240819110649190

请求数据 ​

见：组件：HomePopular

页面布局 ​

1、使用组件

image-20240819120642052

2、页面布局

image-20240819122237920

3、样式

image-20240819121743502

商品列表 ​

全局组件：TabControl ​

image-20240819123021835

页面布局 ​

1、使用组件

image-20240819124541040

2、页面布局

image-20240819124529414

3、样式

image-20240819123411079

接口 ​

请求方法 : POST

接口地址 : baseURL + /goods

可选参数（json格式） :

{
    "page": 1,  # 默认为1，即第一页
	"type": 0 # 支持 0 和 1。 其中 0 代表是精选专场， 1 代表是精选单品
}

调用例子 : baseURL + /goods

接口返回的数据格式：

{
    "code": 200,
    "data": {
	 "xxx": "xxx"	        
    }
}

请求数据 ​

1、service

image-20240819124937216

2、store

image-20240819131403364

image-20240819130639376

image-20240819130641416

image-20240819131248450

3、组件：触发action

注意： 异步action只能接收一个参数

image-20240819125336055

4、组件：获取数据

image-20240819131649076

全局组件：GridView ​

image-20240819132058383

页面布局 ​

1、使用组件

image-20240819132041049

2、页面布局

image-20240819133255185

3、样式

image-20240819132533866

全局组件：GridViewItem ​

页面布局 ​

1、使用组件

image-20240819132819358

2、页面布局

image-20240819134405217

3、样式

image-20240819133600239

功能 ​

商品列表切换 ​

1、在homeStore中定义当前tab名currentTabName

image-20240819151540143

2、在home页获取currentTabName

image-20240819151642924

3、在使用GridView组件时通过currentTabName动态获取goods数据

image-20240819151806258

4、点击tabControl，修改homeStore中的currentTabName

image-20240819152115538

image-20240819152301484

image-20240819151951118

image-20240819152043982

上拉加载 ​

1、在useReachBottom()生命周期中监听页面滚动到底部，并发送请求

image-20240819153155601

详情页 ​

Detail ​

页面跳转 ​

1、点击grid-view-item组件，向外发射onItemClick事件

image-20240819153805315

image-20240819153811247

2、在外部组件中监听onItemClick事件

image-20240819154022231

3、在detail页面接收参数，并展示

image-20240819154325644

打包部署 ​

打包配置 ​

可以在dist目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下。

例如：编译到微信小程序，最终结果是在 dist/weapp 目录下； H5打包结果放在 dist/h5目录下

好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的， 在config/index.js配置如下：

1、在config/index.js文件中配置如下：

image-20240731122152739

2、针对微信小程序的特殊配置

image-20240731122235569

H5 ​

打包：

sh
npm run build:h5

微信小程序 ​

1、在project.config.json中配置小程序

image-20240819160055032

2、打包

sh
npm run build:weapp

3、微信开发者工具打开 weapp 目录进行预览或发包