简介|对话语言模型上周发布了，相关的讨论引发了整个网络。您还渴望体验吗？本文邀请作者Dai （ ）的作者Dai 详细教您如何从开发环境准备，开发过程，服务器界面， API网关访问部署中开发微信系。

在两篇文章“”和“”中，我们分别概述了丰富的游戏玩法，并分析了其工作原理。如果您对相关内容感兴趣，欢迎您回去观看公共帐户的粉丝和朋友，想象着在评论领域中有更多的应用程序实践，一些粉丝表示希望自己体验自己的奇迹。这次，我们邀请来自 社区的开发人员，以帮助您开发一个从基础到更高级方面的微信小组，包括开发环境准备，项目实施，服务界面构建， API 访问，部署，部署和部署和其他方面。

准备

1）迷你计划申请

在微信中搜索“”相关的迷你程序，并检查哪些名称未占据。选择一个名称，记录并准备 *大小的徽标，并在微信公共平台官方网站的首页上申请微信Mini计划。一般而言，通过审查大约需要3个小时。

2）帐户申请

（）目前没有在中国开展业务，并且所提供的服务在中国通常无法经历。读者可以在帐户申请和注册中搜索特定的教程。

申请帐户后，我们仍然需要申请一个帐户，以便在代码中实现提供的API。这是通过代码访问的关键。

帐户申请成功后，生成了访问页面。要特别注意保存钥匙（不能再次查看它，只有在丢失的情况下才能再生）。

此时，基本准备工作已经完成。接下来，我将向所有开发人员描述核心代码的开发过程。

发展环境

1）创建一个新的迷你程序

首先，根据您的实际情况下载相应的微信开发人员工具。下载地址如下：

其次，我个人建议在创建新的迷你程序时选择最简单的基本模板，并检查框以使用微信云开发环境。删除复杂的配置，以便您可以更快地了解对微信系的代码结构的初步了解。当我撰写文档时，因为我申请的小程序尚未获得批准，所以我选择了以下测试号进行开发。

2）环境简介

导出初始化项目后，您将看到更清晰的文件结构。小型程序的开发与三个火枪手使用以开发网页的普通HTML，CSS和JS之间没有根本区别。在微信系统中，WXML，WXSS和JS都是HTML，CSS和JS的子集。

页面的结构用WXML编写，使用的样式在WXSS中定义。变量，功能和网络请求在JS中执行。简而言之，一个迷你程序由一个应用程序组成，该应用程序描述了整体程序和多个描述其各自页面的页面。此处的应用是指放置在根目录中的三个文件app.js，app.json和app.wxss。它们主要负责全局逻辑，配置和样式。

是您将要编写的多个页面。您可以通过官方导航功能在多个方面跳跃。每个页面由四个文件组成：page.js，page.json，page.wxml和page.wxss。 WXML页面类似于HTML文件，主要负责该页面的结构。

与HTML相比，WXML更简单。在开发过程中，布局基本上使用了视图和文本标签，以及其他官方文档中解释的其他标签。但是，在开发过程中，您需要特别注意官方文件中组件的内容。

发展过程

1）如何介绍WEUI组件

有两种组件访问方法可供选择：

如果您不想在开发过程中花费大量时间研究NPM，并且希望快速查看结果，或者您在Mini 商店中列出的代码软件包的大小受到限制（但是扩展库我个人建议选择第一种方法。

WEUI的官方参考文件如下：

2）定义

如果您认为页面上显示的信息太单调了，则可以在迷你程序中使用它。根据微信提供的自定义指南，您可以轻松地将代码复制到项目中。本文披露了核心步骤代码。如果您对更多详细信息感兴趣，则可以在以下地址上访问“微信官方指南”页面：

主要步骤：在app.json中添加配置信息

{
"pages": [
"pages/chat/index",
"pages/index/index",
"pages/logs/logs"

],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "ChatGPT",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"useExtendedLib": {
"weui": true
},
"tabBar": {
"color": "#1485EE",
"selectedColor": "#FF514E",
"list": [
{
"pagePath": "pages/chat/index",
"text": "ChatGPT概览"
},
{
"pagePath": "pages/index/index",
"text": "我的创作"
}
]
}
}

值得注意的是，列表需要存在，否则编译器将报告错误。在这里，我将公开项目目录进行屏幕截图，以便通过比较上下文配置信息更容易理解。

3）写主界面

计划的接口仅需要一个输入框和一个查询按钮。当用户单击“询问”按钮时，在输入框中获取值，并请求服务器 /询问接口以获取结果。获得数据后，将其显示在页面上的结果显示中。

在确定了这个基本过程之后，接下来需要做的就是知道这些基本组件在微信中使用的标签。有关更多详细信息，请访问微信小组开发文档。

<form bindsubmit="submitForm">
<view class="weui-form">
<view class="weui-cells__title">请输入你想要解决的问题：view>
<view class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea name="q" class="weui-textarea" placeholder="可以问我今天天气怎么样？或者讲个故事" rows="2">textarea>
<div class="weui-textarea-counter"><span>0span>/50div>
div>
div>

<block wx:if="{{result}}">
<view class="weui-cells__title">回复：view>
<view class="usermotto">
<text class="user-motto">{{result}}text>
view>
block>
view>

<view class="weui-form__tips-area">

                <block wx:if="{{downloadUrl}}">
<view class="weui-cell">
<button disabled="{{downloaddisabled}}" loading="{{downloadloading}}" load aria-role="button" bindtap='download' data-text="{{downloadUrl}}" plain>立即下载
button>
view>
block>

<block wx:if="{{message}}">
<view class="weui-form__tips">
{{message}}
view>
block>
view>
<view class="weui-form__opr-area">
<button aria-role="button" class="weui-btn weui-btn_primary" disabled="{{disabled}}" loading="{{loading}}" form-type="submit"> 询问ChatGPT
button>
view>

view>
form>

4）绑定点击事件

在形式上绑定事件：

<form bindsubmit="submitForm"> form>

然后在相应的JS文件中定义方法。

5）请求服务器接口

submitForm: function (e) {
//一般前置检查代码
...

const that = this
wx.request({
url: 'http://youdomain.com/api/xxxx',
method: 'post',
header: {"content-type": "application/x-www-form-urlencoded"},
data: data,
success(rsp) {

console.log("ask result-----",rsp.data)
that.setData({
result: rsp.data.data.rsp,
disabled: false,
loading: false,
})
},
complete(d) {
console.log(d)
}
})
console.info("form.submited")

....其他相关代码
},

值得注意的是，上面使用的URL需要Mini程序中的域名白名单注册，否则将无法访问。需要同时注册的域名。

配置地址：登录到微信系管理背景，并将其配置在开发管理服务域名称中。如下所示。

此时，Mini程序的配置已完成。开发人员可以使用其手机在真实设备上预览或调试。如果目前未配置域名，则还可以通过忽略域名来强制支票。当然，如果它正式启动以进行审查，则必须有一个注册的域名，并且在迷你程序背景中已配置了域名。

服务器接口

设置上述内容后，下一步是配置服务器。根据快速开发原则，您可以借用“现成的车轮”，以确保效率首先。您可以参考现有的API-（）。

然后配置接口名称和相应。我定义了一个称为 /ask的接口名称，并定义了处理询问接口的功能，如下所示。

async ask() {
const { request, helper, axios, logger } = this.ctx
const { message } = request.body
logger.info('requset body===', request.body)
logger.info("message===",message)

...其余相关代码
这里的token就是前面提到的在openai上申请到的token

const config = {
headers: { Authorization: `Bearer ${token}` }
}

const req = {
model: 'text-curie-001',
prompt: message,
max_tokens: 2000,
temperature: 0.5
}

console.log("req===",req)

let text = ''
const result = await axios.post('https://api.openai.com/v1/completions', req, {
timeout: 300000,
headers: { Authorization: 'Bearer ${token}' }
})
.then(rsp => {
console.log('pdf file result', rsp)

if (rsp.choices) {
text = rsp.choices[0].text
}
})
.catch(err => {
console.log('pdf file error', err)
})

const data = {
rsp: text
}

helper.success(data, 'success')

}

这里是我上面申请的内容，因此请注意不要泄漏。

API网关访问和部署

1）网关访问

考虑到获得并发功能，频率限制，自动扩展和其他功能的访问，我选择了 API网关。如何通过 将API暴露于外部网络？首先，访问。其次，创建一个新协议[微信需要协议]。最后，创建一个新的接口询问并将其映射到我们自己的服务器。