taro.js和nutui实现商品选择页面

首先安装 Taro.js 和 NutUI:

```

npm install -g @tarojs/cli

npm install taro-ui

```

taro init myapp

cd myapp

```

选用 Taro 模板一并安装依赖：

```

npm install

```

taro create --name goods --type page

```

在 `goods.jsx`中导入并使用 Taro-ui 组件库相关的组件：

```jsx

import Taro, { useState } from "@tarojs/taro";

import { View, Text, Image, Button, Checkbox, CheckboxGroup } from "@tarojs/components";

import { AtInputNumber, AtDivider, AtButton } from "taro-ui";

// 这里假设我们有两个规格参数，分别是颜色和尺码，定义一个数组

const skuList = [

{

id: 1,

spec: ['红色', 'L'],

price: 100,

{

id: 2,

spec: ['红色', 'M'],

price: 98,

{

id: 3,

spec: ['蓝色', 'L'],

price: 99,

{

id: 4,

spec: ['蓝色', 'M'],

price: 97,

];

export default function Goods() {

// 存储当前选择的规格，初始为空

const [spec, setSpec] = useState([]);

// 存储当前选择的数量，初始为1

const [num, setNum] = useState(1);

return (

<View>

{/* 商品信息 */}

<View>

</View>

{/* 规格选择 */}

<View>

<CheckboxGroup onChange={value => setSpec(value)}>

{

...new Set(skuList.map(i =\> i.spec\[0\]))\].map((color, index) =\> \{color}\) } \ \选择尺码\ \ setSpec(prev =\> (\[...prev, ...value\]))}\> { \[...new Set(skuList.map(i =\> i.spec\[1\]))\].map((size, index) =\> ( \{size}\ )) } \ \ {/\* 购买数量 \*/} \ \ setNum(value)} /\> \ \ {/\* 确认按钮 \*/} \ \确认\ \ \ \ ); } \`\`\` 6. 在 \`app.jsx\` 中注册并配置 Taro-ui 组件库： \`\`\`jsx import Taro from "@tarojs/taro"; import { AtButton } from "taro-ui"; import "taro-ui/dist/style/index.scss"; // 一定要引入样式 function App({ children }) { return \{children}\; } export default App; \`\`\` 这样，在 Taro.js 和 NutUI 的基础上我们已经编写了一个基本的商品选择页面。当用户选择商品规格和数量后，点击确认按钮即可触发相应的事件进行下单操作。 需要注意的是，这里使用了不少的 Taro-ui 组件，比如 \`AtInputNumber\`、\`AtDivider\` 以及 \`AtButton\` 等等。需要在代码中导入这些组件并声明相关使用， 若有收获，就点个赞吧