AI 代码远征季 | AI生成+云部署，在线商城H5应用开发实战

npm install @cloudbase/js-sdk -S

yarn add @cloudbase/js-sdk

<script src="//static.cloudbase.net/cloudbase-js-sdk/${version}/cloudbase.full.js"></script>
<script>
  const app = cloudbase.init({
    env: 'cloudbase-yyy-xxx',
    clientId: '<CLIENT_ID>', // 应用 ID，选填
  });
</script>

import cloudbase from '@cloudbase/js-sdk';

const app = cloudbase.init({
    env: 'cloudbase-yyy-xxxx',
    clientId: '<CLIENT_ID>', // 应用 ID，选填
});

const model = app.ai.createModel("deepseek");
const systemPrompt =
  "生成 CloudBase 云函数：  
- 函数名 getProducts  
- 从云数据库查询商品集合  
- 支持分页参数 page 和 pageSize  
- 返回字段：id, name, price, image";

const res = await model.streamText({
  data: {
    model: "deepseek-r1", // 指定具体的模型
    messages: [
      { role: "user", content: systemPrompt },
    ],
  },
});
// 当使用 deepseek-r1 时，模型会生成思维链内容
for await (let data of res.dataStream) {
  // 打印思维链内容
  const think = (data?.choices?.[0]?.delta)?.reasoning_content;
  if (think) {
    console.log(think);
  }

  // 打印生成文本内容
  const text = data?.choices?.[0]?.delta?.content;
  if (text) {
    console.log(text);
  }
}

生成一个 React 商品列表页组件：  
- 从云函数获取商品数据  
- 支持分页（每页10条）  
- 卡片式布局，包含图片、名称、价格  
- 实现下拉加载更多

import React, { useState, useEffect } from 'react';
import { cloud } from '@cloudbase/js-sdk';

const ProductList = () => {
  const [products, setProducts] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  // 调用云函数获取商品数据
  const fetchProducts = async () => {
    setLoading(true);
    try {
      const res = await cloud.callFunction({
        name: 'getProducts',
        data: { page, pageSize: 10 }
      });
      setProducts(prev => [...prev, ...res.result.data]);
    } catch (err) {
      console.error('获取商品失败:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchProducts();
  }, [page]);

  // 滚动加载更多
  const handleScroll = () => {
    if (window.innerHeight + document.documentElement.scrollTop !== 
        document.documentElement.offsetHeight || loading) return;
    setPage(prev => prev + 1);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="product-grid">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>¥{product.price.toFixed(2)}</p>
        </div>
      ))}
      {loading && <div className="loading">加载中...</div>}
    </div>
  );
};
export default ProductList;

生成一个 React 购物车云同步：  
- 从云函数获用户取购物车数据  
- 实时购物车数据更新

// cloud/functions/syncCart.js  
const cloud = require('@cloudbase/node-sdk');  

exports.main = async (event) => {  
  const { userId, cartItems } = event;  
  const app = cloud.init({ env: process.env.ENV_ID });  

  try {  
    // 原子更新购物车  
    await app.database().collection('user_carts').doc(userId).update({  
      items: cartItems,  
      updateTime: new Date()  
    });  

    // 发布实时更新事件  
    await app.callFunction({  
      name: 'pushNotification',  
      data: {  
        userId,  
        type: 'cart_update'  
      }  
    });  

    return { code: 0 };  
  } catch (error) {  
    return { code: 500, msg: error.message };  
  }  
};

生成一个 React 支付链路：  
- 下单详情页  
- 支付聚合页，支持多种支付方式
- 支付成功页
- 订单列表页
- 从元函数获取用户信息和商品信息 

// cloud/functions/createPayment.js  
const cloud = require('@cloudbase/node-sdk');  
const tenpay = require('tenpay');  

exports.main = async (event) => {  
  const { orderId, totalFee, openId } = event;  
  const app = cloud.init();  

  // 初始化支付配置  
  const pay = new tenpay({  
    appid: process.env.WX_APPID,  
    mchid: process.env.WX_MCHID,  
    partnerKey: process.env.WX_KEY  
  });  

  // 生成支付参数  
  const result = await pay.getPayParams({  
    out_trade_no: orderId,  
    body: '商城订单支付',  
    total_fee: totalFee,  
    openid: openId  
  });  

  // 记录支付请求  
  await app.database().collection('payment_logs').add({  
    orderId,  
    params: result,  
    createTime: new Date()  
  });  

  return result;  
};

生成 CloudBase 云函数：  
- 函数名 getProducts  
- 从云数据库查询商品集合  
- 支持分页参数 page 和 pageSize  
- 返回字段：id, name, price, image

const cloud = require('@cloudbase/node-sdk');
const app = cloud.init({ env: process.env.ENV_ID });

exports.main = async (event) => {
  const { page = 1, pageSize = 10 } = event;
  const db = app.database();
  const collection = db.collection('products');

  try {
    const res = await collection
      .field({ id: true, name: true, price: true, image: true })
      .skip((page - 1) * pageSize)
      .limit(pageSize)
      .get();

    return { code: 0, data: res.data };
  } catch (err) {
    return { code: 500, msg: '数据库查询失败', error: err };
  }
};