微信小程序中实现AI对话、生成3D图像并使用xr-frame演示

微信小程序中如何使用混元大模型实现AI对话、生成3D图像,并将生成的3D图像使用xr-frame演示

具体的实现方法可点击链接:
具体实现示例进行详细查看源码,这个示例中,运用了微信小程序内置的AI方法和部署云函数两种方式,实现后的截图如下:


使用云函数的主要的实现思路

使用微信小程序内置的AI方法,局限性较多,不利于后期的使用和开发,下面介绍云函数的使用方法:

  • 第一步:

    开通云开发,具体开通步骤:

    1、第一种:直接进入微信开发者工具,点击左上角的【云开发】按钮开通;

    2、第二种:浏览器搜索微信公众平台或点击https://mp.weixin.qq.com链接,扫码进入您的小程序,

    进入后找到页面左侧的【开发与服务】,点击【云服务】,再点击【云开发】,开通即可;

  • 第二步:

    开通混元大模型,具体开通步骤:

    (1)浏览器进入https://console.cloud.tencent.com登录您的腾讯云,可以直接使用微信登录;

    (2)进入控制台,搜索"腾讯混元大模型",进入后点击左侧【立即接入】按钮;

    (3)有两种方式接入,第二种使用OpenAI SDK方式接入,相比于第一种需要的东西更多,直接使用第一种使用腾讯云SDK方式接入;

    (4)点击【创建密钥】,创建后将密钥的id和密钥key复制保存,不要泄露;

  • 第三步:

    打开项目中的全局app.js文件,添加如下代码:

    wx.cloud.init({

    env: '你的云开发环境id',

    traceUser: true

    });

    至于云开发环境id,打开【云开发】按钮,面板中复制粘贴或者进入【微信公众平台】-【开发与服务】-【云服务】-【云开发】,找到【环境ID】这一列即可;

  • 第四步:

    代码的编写和环境的部署,具体步骤如下:

    (1)进入微信开发者工具,创建"cloudfunctions"文件夹,

    (2)选中"cloudfunctions"这个文件夹,右键选择"新建一个node.js云函数"选项(如果没有这个选项就需要自己先安装依赖),起一个自己喜欢的名字,例如叫:test;

    (3)选中"test",右键选择"在内建终端中打开",然后执行:npm install --save wx-server-sdk;(4)执行完毕后,打开"test"云函数,里面会有个node_modules文件夹,选中和node_modules文件夹同级别的index.js文件,里面编写云函数代码,

    (5)编写完成后,选中"test"云函数,右键选择"上传并部署:云端安装依赖"这个按钮,等待部署;

    (6)部署完成后,其中index.js文件中的secretId: process.env.SECRET_ID和secretKey: process.env.SECRET_KEY,代码需要进行配置(可以不用配置,直接写上刚才在腾讯混元大模型【创建密钥】中创建的密钥的id和密钥key,但是风险很大,建议配置);

    (7)点击开发者工具左上角的【云开发】按钮,点击【云函数】,找到刚才部署成功后的"test"云函数,选择【配置】这个相关名称的按钮,打开后在里面配置键和值,键为SECRET_ID和SECRET_KEY,值为刚才在腾讯混元大模型【创建密钥】中创建的密钥的id和密钥key;

    (7)在其他文件夹建立页面进行调用该函数即可。

因为步骤繁多,只用简单的代码无法显示,可点击示例查看源码~

相关推荐
2501_940041743 分钟前
全栈开发实战:5个高复杂度后端集成场景
前端
蝎子莱莱爱打怪4 分钟前
👋🏻👋🏻再见,拉勾网——那个"最懂互联网人"的招聘平台倒了😭
前端·后端·招聘
o丁二黄o7 分钟前
语义版本控制:用Gemini镜像站实现合同条款的深度差异分析与风险追踪
javascript·kotlin·scala
步十人21 分钟前
【JavaScript】通过AJAX技术让前端发请求到后端
javascript·ajax·okhttp
weixin_4379189623 分钟前
前端String 数组和Math API大全
前端·javascript
阿正的梦工坊23 分钟前
【Typescript】03-函数对象与接口
前端·javascript·typescript
threelab24 分钟前
Three.js 银河星系效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
程序员敲代码吗26 分钟前
探索JavaScript对象创建的灵活方式
开发语言·javascript·ecmascript
海上彼尚28 分钟前
Nodejs也能写Agent - 7.基础篇 - MCP
前端·javascript·人工智能·node.js
FlyWIHTSKY29 分钟前
Next.js中客户端组件和服务端组件
开发语言·javascript·ecmascript