即时聊天微信小程序代码

仿照hiapp,首页是朋友圈新闻,第二栏是通讯录,可以进行聊天。采用flex布局,像微信那样聊天,自己发的聊天在右侧。

  <scroll-view scroll-y="true" class="timeline flex-rest-height">
    <block wx:for="{{messages}}">
      <view class="message flex-row {{item.from === 'sent' ? 'message-sent' : ''}}">
        <text wx:if="{{!item.image}}" class="message-text {{item.from === 'sent' ? 'message-sent-text' : 'message-received-text'}}">{{item.text}}</text>
        <image wx:else src="{{item.text}}" class="message-image"></image>
      </view>
    </block>
  </scroll-view>

  <view class="footer flex-row">
      <view class="input-container flex-rest-width">
        <input id="message" value="{{inputValue}}" placeholder="message..." class="message-input" bindchange="bindChange"/>
      </view>
      <view class="btn-area">
        <button bindtap="sendMessage" class="send-message-btn" type="primary" size="mini">Send</button>
      </view>
  </view>
</view>

下载地址:项目工程

关注公众号“大模型全栈程序员”回复“小程序”获取1000个小程序打包源码。更多免费资源在http://www.gitweixin.com/?p=2627

发表评论

邮箱地址不会被公开。 必填项已用*标注