文章目录
- 前言
- 步骤1:创建账号
- 步骤2:创建一个微信小程序并配置API。
- 步骤3:在微信开发者工具中创建一个新的微信小程序项目
- 步骤4:创建ChatGPT API云函数
- 步骤5:创建UI界面
- 步骤6:创建发送邮件的云函数
- 步骤7:部署并测试
- 总结
- 写在最后
✍创作者:全栈弄潮儿
🏡 个人主页: 全栈弄潮儿的个人主页
🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区
📙 专栏地址:小程序从入门到精通
前言
作为一名打工人,每天提交日报、每周周报,成为公司考核的要求。可是作为一名程序猿,不知道大家有没有像我一样,下班之后都要绞尽脑汁去思考如何提交一份工作内容丰富的日报?而且想写出一份内容丰富、情文并茂的日报都会消耗大量时间。
今天就带大家基于OpenAI开发一个生成周报的微信小程序,只需通过AI就可以帮助大家在公司卷出新高度。
下面是实现微信小程序接入ChatGPT,根据前端、后端、设计师、产品、架构师等职位实现一个周报生成器的具体步骤和示例代码。
步骤1:创建账号
创建一个ChatGPT账号并获取API密钥。您需要访问ChatGPT官网注册一个账号,并在控制台中创建一个API密钥。
步骤2:创建一个微信小程序并配置API。
您需要访问微信公众平台创建一个小程序,并在小程序后台中配置ChatGPT API密钥。具体步骤如下:
在小程序后台中打开开发设置,将服务端口配置为443,并在“服务器域名”中添加对应的服务域名。
步骤3:在微信开发者工具中创建一个新的微信小程序项目
首先,您需要在微信开发者工具中创建一个新的微信小程序项目。然后,您可以使用微信开发者工具中的代码编辑器创建UI界面和逻辑。
步骤4:创建ChatGPT API云函数
在微信小程序中,您可以使用云开发来创建云函数。首先,您需要打开微信开发者工具中的云开发控制台,然后单击“函数服务”>“新建函数”。接下来,您可以选择Node.js作为运行环境,并输入以下代码:
const axios = require('axios');exports.main = async (event) => {const { text, model } = event;const headers = {'Content-Type': 'application/json','Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,};const data = {'model': model,'prompt': text,'temperature': 0.5,'max_tokens': 256,'stop': ['\n'],};const response = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', data, { headers });return response.data.choices[0].text.trim();
};
这是调用ChatGPT API的云函数代码。请确保将OPENAI_API_KEY替换为您自己的API密钥。
步骤5:创建UI界面
在微信小程序中,您可以使用WXML、WXSS和JavaScript来创建UI界面。以下是一个简单的示例,用于在前端页面中选择职位和输入工作内容:
wxml
<view class="container"><view class="title">请选择您的职位:</view><view class="position-buttons"><button wx:for="{{positions}}" wx:key="{{item}}" bindtap="selectPosition">{{item}}</button></view><view wx:if="{{selectedPosition}}"><view class="title">本周工作:</view><textarea bindinput="onWorkInput"></textarea><view class="title">下周计划:</view><textarea bindinput="onPlanInput"></textarea><view class="title">问题与困难:</view><textarea bindinput="onProblemInput"></textarea><view class="title">周报预览:</view><view class="report">{{report}}</view><button class="send-button" bindtap="sendReport">发送到邮箱</button></view>
</view>
javascript
Page({data: {positions: ['前端工程师', '后端工程师', '设计师', '产品经理', '测试工程师', '架构师'],selectedPosition: '',workContent: '',planContent: '',problemContent: '',report: '',},selectPosition(e) {this.setData({ selectedPosition: e.currentTarget.dataset.position });},onWorkInput(e) {this.setData({ workContent: e.detail.value });this.generateReport();},onPlanInput(e) {this.setData({ planContent: e.detail.value });this.generateReport();},onProblemInput(e) {this.setData({ problemContent: e.detail.value });this.generateReport();},generateReport() {const { selectedPosition, workContent, planContent, problemContent } = this.data;if (!selectedPosition || !workContent || !planContent || !problemContent) return;wx.cloud.callFunction({name: 'chatgpt',data: {text: `${selectedPosition}本周工作:${workContent}\n下周计划:${planContent}\n问题与困难:${problemContent}`,model: 'davinci-codex-002',},success: (res) => {this.setData({ report: res.result });},fail: console.error,});},sendReport() {const { report } = this.data;if (!report) return;wx.cloud.callFunction({name: 'sendReport',data: {report,},success: () => {wx.showToast({title: '发送成功',icon: 'success',});},fail: console.error,});},
});
步骤6:创建发送邮件的云函数
您可以使用第三方库如nodemailer
来创建一个发送邮件的云函数。以下是一个简单的示例:
const nodemailer = require('nodemailer');exports.main = async (event) => {const { report } = event;const transporter = nodemailer.createTransport({host: 'smtp.ethereal.email',port: 587,auth: {user: process.env.EMAIL_USER,pass: process.env.EMAIL_PASSWORD,},});const info = await transporter.sendMail({from: 'Weekly Report Generator <noreply@example.com>',to: process.env.EMAIL_TO,subject: 'Weekly Report',text: report,});return info.messageId;
};
请确保将EMAIL_USER、EMAIL_PASSWORD和EMAIL_TO替换为您自己的信息。
步骤7:部署并测试
您可以在微信开发者工具中使用“上传并部署”功能来部署您的小程序。
自测:选择您的职位、填写工作内容、下周计划和问题与困难,然后点击“生成周报”按钮,等待程序返回生成的周报。如果一切正常,您将看到一个包含周报的文本框。然后,您可以点击“发送周报”按钮,程序将使用您的邮箱发送周报。
总结
代码实现中还有一些细节需要注意,例如错误处理和数据验证。您可以根据您的需求进行修改和完善。
这是一个比较完整的实现,希望对您有所帮助!
写在最后
✨原创不易,希望各位大佬多多支持。
👍点赞,你的认可是我创作的动力。
⭐️收藏,感谢你对本文的喜欢。
✏️评论,你的反馈是我进步的财富。