Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二)

Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二)


在开始这个专栏,我们需要找一个小程序为参考,参考和仿照其界面,聊天交互模式。

这里参考小程序-小柠AI智能聊天,可自行先体验。

该小程序主要提供了以下几点功能向需求:

  1. 每天免费提问3次;
  2. 保存前一天的聊天记录;
  3. gpt流模式的响应聊天;
  4. 每天0点自动重置次数和聊天记录。

整体界面简洁,就是简单啦,跟我们实践入门比较贴合。再一个则是本人不是专业前端,太花里胡哨弄不来,所以,我们这个专栏系列就会按照这几个需求点来开发实现。


我们这里主要仿照该小程序的Gpt聊天界面:

页面布局主要3部分:

  1. 头部标签次数
  2. 聊天滑动窗口
  3. 底部导航栏

打开上一节创建的项目gpt_test ,目录中,在pages 目录下的index.js 就是页面逻辑,index.json 就是页面配置,index.wxml 就是页面元素,index.wxss页面样式。

第一步:在index.js增加页面变量,写死几条数据,渲染页面用

复制代码
  data: {
    messages: []    //聊天记录列表
  },
  onLoad() {
    //页面加载,写死几条聊天记录
    var message = {
      type: 1,
      content: "你好,gpt"
    };
    this.appendMessage(message)
    var message = {
      type: 2,
      content: "你好,请问有什么可以帮助您?"
    };
    this.appendMessage(message)    
  },

  // 追加聊天记录
  appendMessage(message) {
    const messages = this.data.messages.concat(message);
    this.setData({
      messages
    });
  },

第二步:在index.wxml先补充需要的页面布局和对应的css样式

复制代码
<view class="container">
    <view class="page__hd">
      头部标签
    </view>
    
    <view class="page__bd">
      聊天滚动页
      <scroll-view scroll-y="true" class="message-container">
        <block wx:for="{{messages}}" wx:key="index">
          <view class="message" wx:if="{{item.type === 1}}">
            <text data-text="{{item.content}}">
              {{item.content}}
            </text>
          </view>
          <view class="message response" wx:if="{{item.type === 2}}">
            <text data-text="{{item.content}}">
              {{item.content}}
            </text>
          </view>
        </block>
      </scroll-view>
    </view>
    
    <view class="page__fd">
      底部导航
    </view>
</view>

index.wxss补充滚动条的css样式

复制代码
.message-container {
  flex: 1;
}

.message {
  margin-bottom: 7px;
  padding: 5px;
  background-color: #f0f0f0;
}

.response {
  text-align: left;
  background-color: #d3d3d3;
}

.input {
  padding: 7px;
  border: 2px solid #ccc;
}

保存,运行之后,基础页面如下。

这个基础页面只是先把需要的加上。页面样式统统都需要美化。至于控件和样式如何美化,这里参考开源的小程序工具库wux,基本各种想要的基础样式和控件里面都有,导航,标签,水印,弹框等等。

git clone下来wux 之后,添加到代码片段,只需要打开目录下的example即可。


第三步:也是很重要一步,整合wux里面所需要的内容到我们项目

至于如何把我们要的内容整理到自己项目,学会这个思路和方法才是最主要的。学习就是学要如何去找,如何去整理,在之后需要其它控件等等,也是同样方式,再整理到自己项目,所以思路和方法很重要。

这里以找标签为例:

  1. 第一步,找到标签的页面点击进去;
  2. 第二步,通过打开控制器,查看点击的标签在pages的哪个页面;
  3. 第三步,进入pages所在标签 目录,找到需要的标签所用到的js逻辑,复制到自己项目的js;
  4. 第四步,进去对应的wxml页面,找到需要的标签元素,复制到自己项目的wxml,同时在wxss中到找对应样式,复制到项目的wxss。

这里找到所要的标签

查看调试器输出,定位该页面代码位置

找到所需要的页面标签,比如我们找tag/index.wxmlCustom color 下的几个标签,打开index.wxml

查看wux-tag相关联的.js, .json, .wxss的相关代码,找了下,只有**.json**中有如下图的引用。

复制这段代码到我们的.json文件,还需要把引用的dist/tag/index 目录复制过来,但是该目录下又依赖其它dist 的模块,为了后续方便,懒得一个一个依赖去找,我们直接把整个dist目录复制过来先,发布时候再移除冗余的。


运行,效果如图:

运行起来,是出来效果了,但是整体的效果很奇怪,都居中了,怎么回事呢?看看调试器的样式,跟wux对比下

发现确实缺了样式,漏导入全局样式了,复制assets/styles/example.wxss 到项目里,然后在全局文件app.wxss 中,移除原来初始化自带的的**.container**样式,导入import assets/styles/example.wxss

复制代码
/**app.wxss**/
@import 'assets/styles/example.wxss';

再次运行,头部效果正常啦。

底部导航栏 和导航栏的icon一样的整理和复制方法,这里就不一一讲解,找到需要的然后整理过来。如图:

这样,一个页面就完成了。我们需要的前端小程序部分,静态页面也就定好了。

相关推荐
2305_797882094 分钟前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
碳基学AI11 分钟前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义免费下载方法
大数据·人工智能·python·gpt·算法·语言模型·集成学习
码熔burning1 小时前
【Spring Cloud Alibaba】:Nacos 入门讲解
分布式·spring cloud·微服务
暮雨哀尘1 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
*星星之火*2 小时前
【GPT入门】第33 课 一文吃透 LangChain:chain 结合 with_fallbacks ([]) 的实战指南
gpt·langchain
幽络源小助理3 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
AskHarries13 小时前
dify开启多租户模式
openai
极客先躯13 小时前
高级java每日一道面试题-2025年3月22日-微服务篇[Nacos篇]-Nacos的主要功能有哪些?
java·开发语言·微服务
bjzhang7515 小时前
微服务组件——Eureka组件的安装与使用指南
微服务·eureka
骑猪兜风23316 小时前
没有人知道“他妈的” 智能体到底是什么
人工智能·openai·ai编程