uni-app仿微信聊天实战|uniapp+swiper仿微信

xiaoyan2015

今天分享的是基于UniApp+swiper+vuex+uniPop等技术实现开发的仿微信聊天App实例项目，表情滑动部分使用的是swiper组件，弹窗是自定义uniPop模态框。还实现了红包、地图定位、仿微信朋友圈等功能。



使用技术

• 编辑器：HBuilder X
• 技术框架：uni-app + vue
• 状态管理：Vuex
• iconfont图标：阿里字体图标库
• 自定义导航栏 + 底部Tabbar
• 弹窗组件：uniPop（基于uni-app封装模态弹窗）
• 测试环境：H5端 + 小程序 + App端（三端均兼容）
  

引入公共组件及样式

1. import Vue from 'vue'
   
2. import App from './App'
   
3. 
   
4. // >>>引入css
   
5. import './assets/fonts/iconfont.css'
   
6. import './assets/css/reset.css'
   
7. import './assets/css/layout.css'
   
8. 
   
9. // >>>引入状态管理
   
10. import store from './store'
    
11. Vue.prototype.$store = store
    
12. 
    
13. // >>>引入公共组件
    
14. import headerBar from './components/header/header.vue'
    
15. import tabBar from './components/tabbar/tabbar.vue'
    
16. import popupWindow from './components/popupWindow.vue'
    
17. Vue.component('header-bar', headerBar)
    
18. Vue.component('tab-bar', tabBar)
    
19. Vue.component('popup-window', popupWindow)
    
20. 
    
21. // >>>引入uniPop弹窗组件
    
22. import uniPop from './components/uniPop/uniPop.vue'
    
23. Vue.component('uni-pop', uniPop)
    
24. 
    
25. Vue.config.productionTip = false
    
26. App.mpType = 'app'
    
27. 
    
28. const app = new Vue({
    
29.     ...App
    
30. })
    
31. app.$mount()

复制代码

uniapp实现仿微信朋友圈效果
实现类似微信朋友圈页面滚动一定距离顶部导航栏由透明变背景色，通过onPageScroll函数实现自定义导航上下滑动自动调整导航栏的透明度

1. /**
   
2. * @tpl 朋友圈模板
   
3. */
   
4. 
   
5. <template>
   
6.     <view class="flexbox flex_col">
   
7.         <header-bar :isBack="true" title="朋友圈" :bgColor="{background: headerBarBackground}" transparent>
   
8.             <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
   
9.             <text slot="iconfont" class="uni_btnIco iconfont icon-publish mr_5" @tap="handlePublish"></text>
   
10.         </header-bar>
    
11.         
    
12.         <view class="uni__scrollview flex1">
    
13.             <view class="uni-friendZone">
    
14.                 ...
    
15.             </view>
    
16.         </view>
    
17.     </view>
    
18. </template>
    
19. 
    
20. <script>
    
21.     export default {
    
22.         data() {
    
23.             return {
    
24.                 headerBarBackground: 'transparent'
    
25.             }
    
26.         },
    
27.         onPageScroll : function(e) {
    
28.             // console.log("滚动距离为：" + e.scrollTop);
    
29.             this.headerBarBackground = 'rgba(65,168,99,'+e.scrollTop / 200+')'
    
30.         },
    
31.         methods: {
    
32.             ...
    
33.         }
    
34.     }
    
35. </script>
    
36. 
    
37. <style scoped>
    
38. 
    
39. </style>

复制代码

借助scroll-view组件将聊天信息滚动到页面底部

1. export default {
   
2.     data() {
   
3.         return {
   
4.             scrollTop: 0,
   
5.             ...
   
6.         }
   
7.     },
   
8.     mounted() {
   
9.         this.scrollToBottom()
   
10.     },
    
11.     updated() {
    
12.         this.scrollToBottom()
    
13.     },
    
14.     methods: {
    
15.         // 滚动至聊天底部
    
16.         scrollToBottom(t) {
    
17.             let that = this
    
18.             let query = uni.createSelectorQuery()
    
19.             query.select('#scrollview').boundingClientRect()
    
20.             query.select('#msglistview').boundingClientRect()
    
21.             query.exec((res) => {
    
22.                 // console.log(res)
    
23.                 if(res[1].height > res[0].height){
    
24.                     that.scrollTop = res[1].height - res[0].height
    
25.                 }
    
26.             })
    
27.         },
    
28.         ...
    
29.     }
    
30. }

复制代码

今天就介绍到这里，后续会继续为大家分享项目实战案例。

原创

react仿微信web版聊天室|仿微信客户端react版

原创

html5语音即时聊天|仿微信语音效果|表情|定位