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一样的整理和复制方法,这里就不一一讲解,找到需要的然后整理过来。如图:

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

相关推荐
尘浮生1 小时前
Java项目实战II基于SpringBoot的共享单车管理系统开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·微信小程序·小程序
嚯——哈哈3 小时前
筑起数字堡垒:解析AWS高防盾(Shield)的全面防护能力
服务器·微服务·云计算·aws
z千鑫17 小时前
【人工智能】深入理解PyTorch:从0开始完整教程!全文注解
人工智能·pytorch·python·gpt·深度学习·ai编程
尘浮生17 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
.生产的驴17 小时前
SpringCloud OpenFeign用户转发在请求头中添加用户信息 微服务内部调用
spring boot·后端·spring·spring cloud·微服务·架构
喵叔哟17 小时前
16. 【.NET 8 实战--孢子记账--从单体到微服务】--汇率获取定时器
微服务·oracle·.net
Smile丶凉轩18 小时前
微服务即时通讯系统的实现(服务端)----(1)
c++·git·微服务·github
蚂蚁数据AntData18 小时前
DB-GPT V0.6.2 版本更新:牵手libro社区、GraphRAG图谱构建能力增强等
gpt
运维&陈同学19 小时前
【zookeeper03】消息队列与微服务之zookeeper集群部署
linux·微服务·zookeeper·云原生·消息队列·云计算·java-zookeeper