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

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

相关推荐
掘金-我是哪吒6 小时前
微服务mysql,redis,elasticsearch, kibana,cassandra,mongodb, kafka
redis·mysql·mongodb·elasticsearch·微服务
茶馆大橘7 小时前
微服务系列六:分布式事务与seata
分布式·docker·微服务·nacos·seata·springcloud
想进大厂的小王10 小时前
项目架构介绍以及Spring cloud、redis、mq 等组件的基本认识
redis·分布式·后端·spring cloud·微服务·架构
九卷技术录11 小时前
(微服务)服务治理:几种开源限流算法库/应用软件介绍和使用
微服务·服务治理·限流算法
阿伟*rui11 小时前
认识微服务,微服务的拆分,服务治理(nacos注册中心,远程调用)
微服务·架构·firefox
光芒再现dev11 小时前
已解决,部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘
运维·python·gpt·语言模型·自然语言处理
想进大厂的小王14 小时前
Spring-cloud 微服务 服务注册_服务发现-Eureka
微服务·eureka·服务发现
丁总学Java15 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
mosen86816 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650217 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车