V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoyan2017
V2EX  ›  推广

uniapp 仿微信聊天实战|仿微信界面/朋友圈|uni-app 聊天

  •  
  •   xiaoyan2017 · 2019-10-10 14:24:10 +08:00 · 4226 次点击
    这是一个创建于 1873 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目概况

    今天给大家分享的是uni-app 仿微信聊天室 UniappChatRoom实战项目,仿微信红包|表情|朋友圈
    使用 uni-app+vue+vuex+uniPop+swiper 等技术开发的仿微信聊天室 uniapp-chatroom 项目,类似 vue 及小程序 api 语法使开发更加方便,实现了发送图文消息、表情(gif 动图),图片预览、地图位置、红包、仿微信朋友圈等功能

    运用技术

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

    预览图

    如上图:在 H5、小程序、App 端均测试通过,而且兼容性一致,一次开发编译到多端。

    引入公共组件及样式

    /**
      * @author     andy by 2019-09-23
      * @about      Q:282310962  wx:xy190310
      */
      
    import Vue from 'vue'
    import App from './App'
    
    // >>>引入 css
    import './assets/fonts/iconfont.css'
    import './assets/css/reset.css'
    import './assets/css/layout.css'
    
    // >>>引入状态管理
    import store from './store'
    Vue.prototype.$store = store
    
    // >>>引入公共组件
    import headerBar from './components/header/header.vue'
    import tabBar from './components/tabbar/tabbar.vue'
    import popupWindow from './components/popupWindow.vue'
    Vue.component('header-bar', headerBar)
    Vue.component('tab-bar', tabBar)
    Vue.component('popup-window', popupWindow)
    
    // >>>引入 uniPop 弹窗组件
    import uniPop from './components/uniPop/uniPop.vue'
    Vue.component('uni-pop', uniPop)
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    const app = new Vue({
        ...App
    })
    app.$mount()
    

    uniapp+vuex 状态管理实现登录注册拦截

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state: {
            user: uni.getStorageSync('user'),
            token: uni.getStorageSync('token'),
        },
        mutations: {
            // 存储 token
            SET_TOKEN(state, data) {
                state.token = data
                uni.setStorageSync('token', data)
            },
            // 存储用户名
            SET_USER(state, data) {
                state.user = data
                uni.setStorageSync('user', data)
            },
            ...
        },
    })
    
    <script>
        import { mapState, mapMutations } from 'vuex'
        import util from '../../utils/util.js'
        
        export default {
            data() {
                return {
                    formObj: {},
                }
            },
            computed: {
                ...mapState(['user', 'token'])
            },
            mounted() {
                // 判断是否有登录
                if(this.user){
                    uni.redirectTo({url: '/pages/index/index'})
                }
            },
            methods: {
                // 提交表单
                handleSubmit(e) {
                    ...
                }
            }
        }
    </script>
    

    uniapp 实现仿微信朋友圈效果

    /**
     * @tpl 朋友圈模板
     */
    
    <template>
        <view class="flexbox flex_col">
            <header-bar :isBack="true" title="朋友圈" :bgColor="{background: headerBarBackground}" transparent>
                <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
                <text slot="iconfont" class="uni_btnIco iconfont icon-publish mr_5" @tap="handlePublish"></text>
            </header-bar>
            
            <view class="uni__scrollview flex1">
                <view class="uni-friendZone">
                    ...
                </view>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    headerBarBackground: 'transparent'
                }
            },
            onPageScroll : function(e) {
                // console.log("滚动距离为:" + e.scrollTop);
                this.headerBarBackground = 'rgba(65,168,99,'+e.scrollTop / 200+')'
            },
            methods: {
                ...
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    

    作者:xiaoyan2017
    链接: https://segmentfault.com/a/1190000020636455
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    1 条回复    2019-10-10 14:39:53 +08:00
    LeeSeoung
        1
    LeeSeoung  
       2019-10-10 14:39:53 +08:00
    有开源吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3041 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:17 · PVG 22:17 · LAX 06:17 · JFK 09:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.