从0到1开发小程序/H5 AI chatgpt，记录过程中遇到的所有坑。希望能帮到你。先上效果图

一、CSS坑点

1.对话框对齐

用户靠右这个很好实现

display: flex;justify-content: flex-end;

AI靠左是需要有宽度自动撑开效果的，不能使用弹性盒

display: inline-block;max-width: 100%;width: fit-content;

2.对话框文本溢出换行

解决数字英文不换行问题 word-wrap: break-word;

3.赞/踩功能动效

需求是点完之后慢慢消失不再显示，当然可以借助vue的transition组件实现。但是如果试试原生小程序或者mpvue怎么办呢？只能自己写一个效果了。先控制fadeOutAni为true，再把evaluate重置为false

 <view v-if="evaluate" :class="{'fadeOut':fadeOutAni}">
      <view>赞</view>
      <view>踩</view>
 </view>

4.页面布局

底部输入框肯定是保持不动的。两种方式实现：

1.底部不开启固定定位，只让中间滚动区域flex:1

2.底部开启固定定位，中间滚动区域给个padding-bottom

至于哪种好我更偏向于第一种，因为固定定位在H5可能会出问题，如果有大神知道可以指点下。

二、scroll-view坑点

中间滚动区域使用scroll-view，因为要实现AI回复时窗口永远跟随在底部。但是也产生了许多坑点。

1.scroll-view高度

scroll-view需要有个固定高度，这里我设置的是flex：1

scroll-view内部的view的高度不能设置，要让内容自动撑开

2.下拉加载

聊天是有历史记录的，通过scroll-view的下拉加载，和页面的下拉刷新不同

需要给scroll-view添加至少三条属性才能实现

<scroll-view 
    scroll-y 
    :scroll-top="scrollTop" 
    :scroll-with-animation="false" 
    @refresherrefresh="getFresh"
    refresher-enabled 
    :refresher-triggered="refresher" 
    :show-scrollbar="false"
 >
 </scroll-view>

refresher-enabled：true

refresher-triggered：下拉时为true，刷新后为false

refresherrefresh：下拉的回调

3.自动滚动

当AI回答时，要自动滚动页面到最底部保持用户能看见。

上面设置的scrollTop就排上用场了。

scrollToBottom () {
  this.$nextTick(() => {
    const query = wx.createSelectorQuery();
    query.select('.容器的类名').boundingClientRect(rect => {
      if (rect) {
        console.log("🚀 ~ query.select ~ rect:", rect)
        this.scrollTop = rect.height
      }
    }).exec();
  })
},

4.自定义刷新样式

scroll-view设置属性refresher-default-style="none"

在标签中嵌套 <view slot="refresher">刷新样式</view>

三、websocket坑点

放到下集继续

AI聊天Chat Gpt（上）