xiaoyan2017

xiaoyan2017 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织 www.cnblogs.com/xiaoyan2017/ 编辑
编辑

web前端开发爱好者,专注于前端h5、jquery、vue、react、angular等技术研发实战项目案例。
Q:282310962 wx:xy190310

个人动态

xiaoyan2017 发布了文章 · 10月16日

基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面

1、项目简介

Nuxt.js是目前比较热门的服务端渲染SSR框架。凭借其更好的SEO、更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发,更易于上手,获得了很多技术开发者的青睐。
nuxt_chatroom项目是基于nuxt+vue+vuex+vant等技术开发的仿微信|Tinder界面聊天实例。实现了卡片式翻动、消息发送/表情gif、图片/视频预览、红包/朋友圈等功能。

效果片段
image
啧啧,效果还可以吧,下面就来讲解下实现过程。

2、技术框架

  • 使用技术:nuxt.js+vue.js+vuex
  • UI组件库:vant-ui (有赞移动端vue.js组件库)
  • 字体图标:阿里iconfont图标库
  • 弹窗组件:vpopup(基于vue自定义弹框)
  • 本地存储:cookie-universal-nuxt: ^2.1.4

image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image

大家如果对Nuxt.js不熟悉的话,可以先去官网看看资料。其实只要你会vue,上手就非常简单的。
image.png
https://zh.nuxtjs.org/
https://github.com/nuxt/nuxt.js

3、项目目录结构

image.png
想了解更多Nuxt.js目录结构及使用说明,可以去参看下面链接。
https://zh.nuxtjs.org/guide/d...

4、关于自定义组件

项目中 顶部Navbar、Tabbar及弹窗 均是自定义组件实现的,这里不作过多讲解,感兴趣的可以去看看下面的分享文章。
image.png
image.png
image
Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏
Vue自定义弹框组件|仿android/ios弹窗效果

5、仿Tinder|探探卡牌翻动

遇见页面原型参考了社交App探探的卡片滑动效果。整体分为 顶部导航、滑动区、底部标签栏 等三个部分。
image
这里不过多介绍,感兴趣的可以去看下面的这篇分享文章。
Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder

6、nuxt默认布局

nuxt项目中,layouts目录下的default.vue页面为默认的布局页面。

<!-- 布局模板 -->
<template>
  <div class="nuxt__container flexbox flex-col">
    <header-bar />
    <div class="nuxt__scrollview scrolling flex1"><nuxt /></div>
    <tab-bar />
  </div>
</template>

注意:在nuxt项目中是通过<nuxt />来显示主体内容的,而vue中则是使用<router-view />

nuxt.config.js配置文件
nuxt.js的默认配置文件,可以配置 meta、路由信息、css/js及插件引入、webpack等配置。
https://zh.nuxtjs.org/guide/configuration/

export default {
  // 端口配置(可选)
  server: {
    port: 3000,
    host: '192.168.122.100'
  },
  /*
  ** 页面头部meta信息配置
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
      { hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt仿微信'},
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' },
    ],
    script: [
      { src: '/js/fontSize.js' },
      { src: '/js/wcPop/wcPop.js' },
    ]
  },
  /*
  ** 全局css配置
  */
  css: [
    '~/assets/css/reset.css',
    '~/assets/css/layout.css',
    '~/assets/fonts/iconfont.css',
  ],
  /*
  ** 全局插件列表
  */
  plugins: [
    '~/plugins/vue-global.js',
    // 通过这种方式引入本地js也可以(需设置ssr:false)
    // {src: '~/assets/js/fontSize.js', ssr: false}
  ],
  // ...
}

nuxt.config.js中的meta是全局配置的,如果单独页面配置,参考如下:

<script>
export default {
    // 配置页面 meta 信息
    head() {
        return {
            title: '这里是标题信息 - 标题信息',
            meta: [
                {name:'keywords',hid: 'keywords',content: '关键字1 | 关键字2 | 关键字3'},
                {name:'description',hid:'description',content: '描述1 | 描述2 | 描述3'}
            ]
        }
    },
    // 自定义布局页面
    layout: 'xxx.vue',
    // 中间件处理
    middleware: 'auth',
    // 异步处理
    async asyncData({app, params, query, store}) {
        let uid = params.uid
        let cid = query.cid
        return {
            uid: uid,
            cid: cid,
        }
    },
    // ...
}
</script>

7、Nuxt聊天模块

一开始考虑聊天模块的编辑框使用inputtextarea实现。可是文本框中只能插入emoj字符 (:32 :微笑:),不能插入emoj图片表情,不是自己想要的效果。
image
如上图:于是就使用了div的可编辑功能contenteditable来插入图文内容。

<template>
    <div
        ref="editor"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

经过一系列处理,编辑器支持多行文本输入、光标处插入emoj表情等功能。

如下图:在vue.js项目中如何获取上传视频的第一帧作为封面图?
image.png
网上的很多的解决方案,会使截图出现黑屏情况。后来经过反复调试,终于实现了这个效果。

let file = this.$refs.chooseVideo.files[0]
if(!file) return
let size = Math.floor(file.size / 1024)
if(size > 3*1024) {
    alert('请选择3MB以内的视频')
    return false
}
// 获取视频地址
let videoUrl
if(window.createObjectURL != undefined) {
    videoUrl = window.createObjectURL(file)
} else if (window.URL != undefined) {
    videoUrl = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
    videoUrl = window.webkitURL.createObjectURL(file)
}

let $video = document.createElement('video')
$video.src = videoUrl
// 防止移动端封面黑屏或透明白屏
$video.play()
$video.muted = true
$video.addEventListener('timeupdate', () => {
    if($video.currentTime > .1) {
        $video.pause()
    }
})

// 截取视频第一帧作为封面
$video.addEventListener('loadeddata', function() {
    setTimeout(() => {
        var canvas = document.createElement('canvas')
        canvas.width = $video.videoWidth * .8
        canvas.height = $video.videoHeight * .8
        canvas.getContext('2d').drawImage($video, 0, 0, canvas.width, canvas.height)
        let videoThumb = canvas.toDataURL('image/png')
        console.log(videoThumb)
    }, 16);
})

大家有兴趣的话,可以自己去弄一弄试试哈。如果有其它好的方法,欢迎交流讨论!

OK,基于Nuxt.js仿微信聊天室项目就分享到这里。希望对大家有些帮助!✍💪

image

最后附上个Flutter项目实例
flutter+dart聊天室|flutter仿微信App聊天界面|flutter聊天实例
image

查看原文

赞 10 收藏 6 评论 2

xiaoyan2017 发布了文章 · 10月12日

Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder

开场

技术宅男对探探/陌陌并不陌生,一款专注于陌生人的社交App。里面的左右滑动翻牌子效果更是让人眼前一亮,似乎有一种古时君王选妃子的感觉。让人玩的爱不释手。

一睹风采
image
哈哈,效果还行吧。下面就简单的讲解下具体的实现方法。

页面布局

页面整体分为 顶部Navbar、卡片区域、底部Tabbar 三个部分。
image.png

<!-- //翻一翻模板 -->
<template>
    <div>
        <!-- >>顶部 -->
        <header-bar :back="false" bgcolor="linear-gradient(to right, #00e0a1, #00a1ff)" fixed>
            <div slot="title"><i class="iconfont icon-like c-red"></i> <em class="ff-gg">遇见TA</em></div>
            <div slot="right" class="ml-30" @click="showFilter = true"><i class="iconfont icon-filter"></i></div>
        </header-bar>
 
        <!-- >>主页面 -->
        <div class="nuxt__scrollview scrolling flex1" ref="scrollview" style="background: linear-gradient(to right, #00e0a1, #00a1ff);">
            <div class="nt__flipcard">
                <div class="nt__stack-wrapper">
                    <flipcard ref="stack" :pages="stackList" @click="handleStackClicked"></flipcard>
                </div>
                <div class="nt__stack-control flexbox">
                    <button class="btn-ctrl prev" @click="handleStackPrev"><i class="iconfont icon-unlike "></i></button>
                    <button class="btn-ctrl next" @click="handleStackNext"><i class="iconfont icon-like "></i></button>
                </div>
            </div>
        </div>
 
        <!-- >>底部tabbar -->
        <tab-bar bgcolor="linear-gradient(to right, #00e0a1, #00a1ff)" color="#fff" />
    </div>
</template>

侧边弹出框

点击筛选,在侧边会出现弹窗。其中范围滑块、switch开关、Rate评分等组件则是使用Vant组件库。
image.png

侧边弹窗模板

<template>
    <!-- ... -->
    
    <!-- @@侧边栏弹框模板 -->
    <v-popup v-model="showFilter" position="left" xclose xposition="left" title="高级筛选与设置">
        <div class="flipcard-filter">
            <div class="item nuxt-cell">
                <label class="lbl">范围</label>
                <div class="flex1">
                    <van-slider v-model="distanceRange" bar-height="2px" button-size="12px" active-color="#00e0a1" min="1" @input="handleDistanceRange" />
                </div>
                <em class="val">{{distanceVal}}</em>
            </div>
            <div class="item nuxt-cell">
                <label class="lbl flex1">自动增加范围</label>
                <em class="val"><van-switch v-model="autoExpand" size="20px" active-color="#00e0a1" /></em>
            </div>
            <div class="item nuxt-cell">
                <label class="lbl flex1">性别</label>
                <em class="val">女生</em>
            </div>
            <div class="item nuxt-cell">
                <label class="lbl">好评度</label>
                <div class="flex1"><van-rate v-model="starVal" color="#00e0a1" icon="like" void-icon="like-o" @change="handleStar" /></div>
                <em class="val">{{starVal}}星</em>
            </div>
            <div class="item nuxt-cell">
                <label class="lbl flex1">优先在线用户</label>
                <em class="val"><van-switch v-model="firstOnline" size="20px" active-color="#00e0a1" /></em>
            </div>
            <div class="item nuxt-cell">
                <label class="lbl flex1">优先新用户</label>
                <em class="val"><van-switch v-model="firstNewUser" size="20px" active-color="#00e0a1" /></em>
            </div>
            <div class="item nuxt-cell mt-20">
                <div class="mt-30 nuxt__btn nuxt__btn-primary--gradient" style="height:38px;"><i class="iconfont icon-filter"></i> 更新</div>
            </div>
        </div>
    </v-popup>
</template>
 
<script>
    export default {
        // 用于配置应用默认的 meta 标签
        head() {
            return {
                title: `${this.title} - 翻一翻`,
                meta: [
                    {name:'keywords',hid: 'keywords',content:`${this.title} | 翻一翻 | 翻动卡片`},
                    {name:'description',hid:'description',content:`${this.title} | 仿探探卡片翻动`}
                ]
            }
        },
        middleware: 'auth',
        data () {
            return {
                title: 'Nuxt',
                showFilter: false,
                distanceRange: 1,
                distanceVal: '<1km',
                autoExpand: true,
                starVal: 5,
                firstOnline: false,
                firstNewUser: true,
                
                // ...
            }
        },
        methods: {
            /* @@左侧筛选函数 */
            // 范围选择
            handleDistanceRange(val) {
                if(val == 1) {
                    this.distanceVal = '<1km';
                } else if (val == 100) {
                    this.distanceVal = "100km+"
                }else {
                    this.distanceVal = val+'km';
                }
            },
            // 好评度
            handleStar(val) {
                this.starVal = val;
            },
            
            // ...
        },
    }
</script>

仿探探翻牌子

卡片区单独封装了一个组件flipcard,只需传入pages数据就可以。
<flipcard ref="stack" :pages="stackList"></flipcard>
image.png
在四周拖拽卡片会出现不同的斜切视角。

pages数据格式

module.exports = [
    {
        avatar: '/assets/img/avatar02.jpg',
        name: '放荡不羁爱自由',
        sex: 'female',
        age: 23,
        starsign: '天秤座',
        distance: '艺术/健身',
        photos: [...],
        sign: '交个朋友,非诚勿扰'
    },
    
    ...
]

flipcard组件模板

<template>
    <ul class="stack">
        <li class="stack-item" v-for="(item, index) in pages" :key="index" :style="[transformIndex(index),transform(index)]"
            @touchmove.stop.capture="touchmove"
            @touchstart.stop.capture="touchstart"
            @touchend.stop.capture="touchend($event, index)"
            @touchcancel.stop.capture="touchend($event, index)"
            @mousedown.stop.capture.prevent="touchstart"
            @mouseup.stop.capture.prevent="touchend($event, index)"
            @mousemove.stop.capture.prevent="touchmove"
            @mouseout.stop.capture.prevent="touchend($event, index)"
            @webkit-transition-end="onTransitionEnd(index)"
            @transitionend="onTransitionEnd(index)"
        >
            <img :data-original="item.avatar" />
            <div class="stack-info">
                <h2 class="name">{{item.name}}</h2>
                <p class="tags">
                    <span class="sex" :class="item.sex"><i class="iconfont" :class="'icon-'+item.sex"></i> {{item.age}}</span>
                    <span class="xz">{{item.starsign}}</span>
                </p>
                <p class="distance">{{item.distance}}</p>
            </div>
        </li>
    </ul>
</template>
/**
 * @Desc     Vue仿探探|Tinder卡片滑动FlipCard
 * @Time     andy by 2020-10-06
 * @About    Q:282310962  wx:xy190310
 */
<script>
    export default {
        props: {
            pages: {
                type: Array,
                default: {}
            }
        },
        data () {
            return {
                basicdata: {
                    start: {},
                    end: {}
                },
                temporaryData: {
                    isStackClick: true,
                    offsetY: '',
                    poswidth: 0,
                    posheight: 0,
                    lastPosWidth: '',
                    lastPosHeight: '',
                    lastZindex: '',
                    rotate: 0,
                    lastRotate: 0,
                    visible: 3,
                    tracking: false,
                    animation: false,
                    currentPage: 0,
                    opacity: 1,
                    lastOpacity: 0,
                    swipe: false,
                    zIndex: 10
                }
            }
        },
        computed: {
            // 划出面积比例
            offsetRatio () {
                let width = this.$el.offsetWidth
                let height = this.$el.offsetHeight
                let offsetWidth = width - Math.abs(this.temporaryData.poswidth)
                let offsetHeight = height - Math.abs(this.temporaryData.posheight)
                let ratio = 1 - (offsetWidth * offsetHeight) / (width * height) || 0
                return ratio > 1 ? 1 : ratio
            },
            // 划出宽度比例
            offsetWidthRatio () {
                let width = this.$el.offsetWidth
                let offsetWidth = width - Math.abs(this.temporaryData.poswidth)
                let ratio = 1 - offsetWidth / width || 0
                return ratio
            }
        },
        methods: {
            touchstart (e) {
                if (this.temporaryData.tracking) {
                    return
                }
                // 是否为touch
                if (e.type === 'touchstart') {
                    if (e.touches.length > 1) {
                        this.temporaryData.tracking = false
                        return
                    } else {
                        // 记录起始位置
                        this.basicdata.start.t = new Date().getTime()
                        this.basicdata.start.x = e.targetTouches[0].clientX
                        this.basicdata.start.y = e.targetTouches[0].clientY
                        this.basicdata.end.x = e.targetTouches[0].clientX
                        this.basicdata.end.y = e.targetTouches[0].clientY
                        // offsetY在touch事件中没有,只能自己计算
                        this.temporaryData.offsetY = e.targetTouches[0].pageY - this.$el.offsetParent.offsetTop
                    }
                // pc操作
                } else {
                    this.basicdata.start.t = new Date().getTime()
                    this.basicdata.start.x = e.clientX
                    this.basicdata.start.y = e.clientY
                    this.basicdata.end.x = e.clientX
                    this.basicdata.end.y = e.clientY
                    this.temporaryData.offsetY = e.offsetY
                }
                this.temporaryData.isStackClick = true
                this.temporaryData.tracking = true
                this.temporaryData.animation = false
            },
            touchmove (e) {
                this.temporaryData.isStackClick = false
                // 记录滑动位置
                if (this.temporaryData.tracking && !this.temporaryData.animation) {
                    if (e.type === 'touchmove') {
                        e.preventDefault()
                        this.basicdata.end.x = e.targetTouches[0].clientX
                        this.basicdata.end.y = e.targetTouches[0].clientY
                    } else {
                        e.preventDefault()
                        this.basicdata.end.x = e.clientX
                        this.basicdata.end.y = e.clientY
                    }
                    // 计算滑动值
                    this.temporaryData.poswidth = this.basicdata.end.x - this.basicdata.start.x
                    this.temporaryData.posheight = this.basicdata.end.y - this.basicdata.start.y
                    let rotateDirection = this.rotateDirection()
                    let angleRatio = this.angleRatio()
                    this.temporaryData.rotate = rotateDirection * this.offsetWidthRatio * 15 * angleRatio
                }
            },
            touchend (e, index) {
                if(this.temporaryData.isStackClick) {
                    this.$emit('click', index)
                    this.temporaryData.isStackClick = false
                }
                this.temporaryData.isStackClick = true
                this.temporaryData.tracking = false
                this.temporaryData.animation = true
                // 滑动结束,触发判断
                // 判断划出面积是否大于0.4
                if (this.offsetRatio >= 0.4) {
                    // 计算划出后最终位置
                    let ratio = Math.abs(this.temporaryData.posheight / this.temporaryData.poswidth)
                    this.temporaryData.poswidth = this.temporaryData.poswidth >= 0 ? this.temporaryData.poswidth + 200 : this.temporaryData.poswidth - 200
                    this.temporaryData.posheight = this.temporaryData.posheight >= 0 ? Math.abs(this.temporaryData.poswidth * ratio) : -Math.abs(this.temporaryData.poswidth * ratio)
                    this.temporaryData.opacity = 0
                    this.temporaryData.swipe = true
                    this.nextTick()
                    // 不满足条件则滑入
                } else {
                    this.temporaryData.poswidth = 0
                    this.temporaryData.posheight = 0
                    this.temporaryData.swipe = false
                    this.temporaryData.rotate = 0
                }
            },
            nextTick () {
                // 记录最终滑动距离
                this.temporaryData.lastPosWidth = this.temporaryData.poswidth
                this.temporaryData.lastPosHeight = this.temporaryData.posheight
                this.temporaryData.lastRotate = this.temporaryData.rotate
                this.temporaryData.lastZindex = 20
                // 循环currentPage
                this.temporaryData.currentPage = this.temporaryData.currentPage === this.pages.length - 1 ? 0 : this.temporaryData.currentPage + 1
                // currentPage切换,整体dom进行变化,把第一层滑动置最低
                this.$nextTick(() => {
                    this.temporaryData.poswidth = 0
                    this.temporaryData.posheight = 0
                    this.temporaryData.opacity = 1
                    this.temporaryData.rotate = 0
                })
            },
            onTransitionEnd (index) {
                let lastPage = this.temporaryData.currentPage === 0 ? this.pages.length - 1 : this.temporaryData.currentPage - 1
                // dom发生变化正在执行的动画滑动序列已经变为上一层
                if (this.temporaryData.swipe && index === lastPage) {
                    this.temporaryData.animation = true
                    this.temporaryData.lastPosWidth = 0
                    this.temporaryData.lastPosHeight = 0
                    this.temporaryData.lastOpacity = 0
                    this.temporaryData.lastRotate = 0
                    this.temporaryData.swipe = false
                    this.temporaryData.lastZindex = -1
                }
            },
            prev () {
                this.temporaryData.tracking = false
                this.temporaryData.animation = true
                // 计算划出后最终位置
                let width = this.$el.offsetWidth
                this.temporaryData.poswidth = -width
                this.temporaryData.posheight = 0
                this.temporaryData.opacity = 0
                this.temporaryData.rotate = '-3'
                this.temporaryData.swipe = true
                this.nextTick()
            },
            next () {
                this.temporaryData.tracking = false
                this.temporaryData.animation = true
                // 计算划出后最终位置
                let width = this.$el.offsetWidth
                this.temporaryData.poswidth = width
                this.temporaryData.posheight = 0
                this.temporaryData.opacity = 0
                this.temporaryData.rotate = '3'
                this.temporaryData.swipe = true
                this.nextTick()
            },
            rotateDirection () {
                if (this.temporaryData.poswidth <= 0) {
                    return -1
                } else {
                    return 1
                }
            },
            angleRatio () {
                let height = this.$el.offsetHeight
                let offsetY = this.temporaryData.offsetY
                let ratio = -1 * (2 * offsetY / height - 1)
                return ratio || 0
            },
            inStack (index, currentPage) {
                let stack = []
                let visible = this.temporaryData.visible
                let length = this.pages.length
                for (let i = 0; i < visible; i++) {
                    if (currentPage + i < length) {
                        stack.push(currentPage + i)
                    } else {
                        stack.push(currentPage + i - length)
                    }
                }
                return stack.indexOf(index) >= 0
            },
            // 非首页样式切换
            transform (index) {
                let currentPage = this.temporaryData.currentPage
                let length = this.pages.length
                let lastPage = currentPage === 0 ? this.pages.length - 1 : currentPage - 1
                let style = {}
                let visible = this.temporaryData.visible
                if (index === this.temporaryData.currentPage) {
                    return
                }
                if (this.inStack(index, currentPage)) {
                    let perIndex = index - currentPage > 0 ? index - currentPage : index - currentPage + length
                    style['opacity'] = '1'
                    style['transform'] = 'translate3D(0,0,' + -1 * 60 * (perIndex - this.offsetRatio) + 'px' + ')'
                    style['zIndex'] = visible - perIndex
                    if (!this.temporaryData.tracking) {
                        style['transitionTimingFunction'] = 'ease'
                        style['transitionDuration'] = 300 + 'ms'
                    }
                } else if (index === lastPage) {
                    style['transform'] = 'translate3D(' + this.temporaryData.lastPosWidth + 'px' + ',' + this.temporaryData.lastPosHeight + 'px' + ',0px) ' + 'rotate(' + this.temporaryData.lastRotate + 'deg)'
                    style['opacity'] = this.temporaryData.lastOpacity
                    style['zIndex'] = this.temporaryData.lastZindex
                    style['transitionTimingFunction'] = 'ease'
                    style['transitionDuration'] = 300 + 'ms'
                } else {
                    style['zIndex'] = '-1'
                    style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')'
                }
                return style
            },
            // 首页样式切换
            transformIndex (index) {
                if (index === this.temporaryData.currentPage) {
                    let style = {}
                    style['transform'] = 'translate3D(' + this.temporaryData.poswidth + 'px' + ',' + this.temporaryData.posheight + 'px' + ',0px) ' + 'rotate(' + this.temporaryData.rotate + 'deg)'
                    style['opacity'] = this.temporaryData.opacity
                    style['zIndex'] = 10
                    if (this.temporaryData.animation) {
                        style['transitionTimingFunction'] = 'ease'
                        style['transitionDuration'] = (this.temporaryData.animation ? 300 : 0) + 'ms'
                    }
                    return style
                }
            },
        }
    }
</script>

组件支持touchmouse事件,在移动端和PC端均可滑动。

image.png

另外,点击卡片跳转到卡片详细页面。

好了,基于Vue实现探探卡片效果就分享到这里。希望能喜欢~~ ✍

image

查看原文

赞 3 收藏 2 评论 2

xiaoyan2017 发布了文章 · 10月10日

Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏

引言

在手机端项目开发时,很多场景下标签栏TabBar和导航栏NavBar功能必不可少。由于Nuxt项目中需要用到类似咸鱼底部凸起导航效果,只能自己动手造一个自定义导航组件。

image.png
如上图:在项目中实例效果

ok,下面就详细讲解下实现方法。

首先,需要在components目录下新建 headerBar.vuetabBar.vue 页面。

image.png

紧接着,在 plugins 目录下新建 componentsInstall.js 文件并引入即可。

image.png

Nuxt自定义导航条headerBar

<template>
    <div class="header-bar" :class="{'fixed': fixed, 'transparent fixed': transparent}">
        <div class="header-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor, 'color': color, 'z-index': zIndex}">
            <!-- >>返回 -->
            <div class="action hdbar-action__left isback" v-if="back && back!='false'" @click="$router.go(-1)">
                <slot name="backIco" /><slot name="backText" />
            </div>
 
            <!-- >>标题 -->
            <div class="hdbar-title" :class="{'center': center}">
                <slot name="title" />
            </div>
 
            <!-- >>搜索框 -->
            <div class="action hdbar-action__search">
                <slot name="search" />
            </div>
 
            <!-- >>右侧 -->
            <div class="action hdbar-action__right">
                <slot name="right" />
            </div>
        </div>
    </div>
</template>

<script>
/**
 * @Desc     Vue自定义导航条headerBar
 * @Time     andy by 2020-10-06
 * @About    Q:282310962  wx:xy190310
 */
    export default {
        props: {
            // 是否返回
            back: { type: [Boolean, String], default: true },
            // 标题
            title: { type: String, default: '' },
            // 标题颜色
            color: { type: String, default: '#fff' },
            // 背景颜色
            bgcolor: { type: String, default: '#22d59c' },
            // 标题是否居中
            center: { type: [Boolean, String], default: false },
            // 搜索框
            search: { type: [Boolean, String], default: false },
            // 是否固定
            fixed: { type: [Boolean, String], default: false },
            // 背景透明
            transparent: { type: [Boolean, String], default: false },
            // 设置层级
            zIndex: { type: [Number, String], default: '2021' },
        },
        data() {
            return {}
        },
        methods: {},
    }
</script>

image

image

image

<header-bar :back="true" :bgcolor="linear-gradient(to right, #f726ff, #2acfff)" color="#ff0" center transparent>
    <template #backIco><i class="iconfont icon-close"></i></template>
 
    <div slot="title">
    <img data-original="~/assets/img/logo.png" height="14" /> <em>Nuxt</em>
    </div>
 
    <div slot="right" class="ml-20" @click="$toast('搜索~~')"><i class="iconfont icon-search"></i></div>
    <div slot="right" class="ml-20"><i class="iconfont icon-choose"></i></div>
    <div slot="right" class="ml-20"><van-button type="primary" size="mini" @click="saveData">保存</van-button></div>
</header-bar>

image

image

image

<header-bar :back="true" bgcolor="linear-gradient(to right, #6126ff, #ff21ee)" color="#ff0" center>
    <div slot="backIco"><i class="iconfont icon-close"></i></div>
    <div slot="search" class="flex-c flex1">
        <input class="ipt flex1" placeholder="搜索关键字..." />
    </div>
    <div slot="right" class="ml-30"> <i class="iconfont icon-shoucang"></i></div>
    <div slot="right" class="ml-30"> <i class="iconfont icon-female"></i></div>
</header-bar>

Nuxt自定义Tabbar组件

image

<template>
    <div class="tab-bar" :class="{'fixed': fixed}">
        <div class="tab-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor}">
            <div v-for="(item,index) in tabs" :key="index" class="navigator" :class="currentTabIndex == index ? 'on' : ''" @click="switchTabs(index, item)">
                <div class="ico" :class="{'dock': item.dock}">
                    <i v-if="item.dock" class="dock-bg" :style="{'background': item.dockBg ? item.dockBg : activeColor}"></i>
                    <i v-if="item.icon" class="iconfont" :class="item.icon" :style="{'color': (currentTabIndex == index && !item.dock ? activeColor : color), 'font-size': item.iconSize}"></i>
                    <img v-if="item.iconImg" class="iconimg" :data-original="currentTabIndex == index && !item.dock ? item.selectedIconImg : item.iconImg" :style="{'font-size': item.iconSize}" />
                    <em v-if="item.badge" class="nuxt__badge">{{item.badge}}</em>
                    <em v-if="item.dot" class="nuxt__badge-dot"></em>
                </div>
                <div class="txt" :style="{'color': (currentTabIndex == index ? activeColor : color)}">{{item.text}}</div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    props: {
        current: { type: [Number, String], default: 0 },
        // 背景颜色
        bgcolor: { type: String, default: '#fff' },
        // 颜色
        color: { type: String, default: '#999' },
        // 点击后颜色
        activeColor: { type: String, default: '#22d59c' },
        // 是否固定
        fixed: { type: [Boolean, String], default: false },
        // tab选项
        tabs: {
            type: Array,
            default: () => null
        }
    },
    data() {
      return {
          currentTabIndex: this.current
      }
    },
    created() {
        const _pagePath = this.$route.path
        this.tabs.map((val, index) => {
            if(val.pagePath == _pagePath) {
                this.currentTabIndex = index
            }
        })
    },
    methods: {
        switchTabs(index, item) {
            this.currentTabIndex = index
            this.$emit('click', index)
            if(item.pagePath) {
                this.$router.push(item.pagePath)
            }
        }
    },
  }
</script>

image

image

<tab-bar bgcolor="#b6ffff" @click="handleTabbar" :tabs="[
    {
        icon: 'icon-tianjia',
        text: 'Home',
    },
    {
        icon: 'icon-shezhi',
        text: 'Manage',
        badge: 1
    },
    {
        icon: 'icon-male',
        text: 'Ucenter',
        dot: true
    },
    ]"
/>
// tabbar点击事件
handleTabbar(index) {
    this.$toast('tabbar索引值:' + index);
},

另外还支持咸鱼凸起效果,只需配置 dock: true 属性即可。根据项目需要支持自定义多个tab选项。

image

image

<tab-bar bgcolor="#7fa1ff" color="#fff" activeColor="#fb4e30" :tabs="[
    {
        icon: 'icon-face',
        text: 'Face',
        dot: true,
        iconSize: '24px',
    },
    {
        //icon: 'icon-tianjia',
        iconImg: 'https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png?getAvatar=1',
        text: '咸鱼',
        dock: true,
        dockBg: '#fb4e30',
        iconSize: '.64rem',
    },
    {
        icon: 'icon-search',
        text: '搜索',
    },
    ]"
/>

okey,基于Nuxt自定义仿咸鱼导航组件就分享到这里。希望对大家有所帮助!!✍✍

最后附上一个基于Nuxt/Vue自定义弹框组件
https://segmentfault.com/a/1190000027085208

查看原文

赞 6 收藏 6 评论 0

xiaoyan2017 发布了文章 · 10月7日

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框

前言

最近趁着国庆假期一直在捣鼓Nuxt.js项目开发,由于项目中需要多个地方使用到弹窗功能,鉴于网上的一些组件可能不能很好满足项目需求,于是就自己动手开发了个自定义对话框组件Vpopup。
image

介绍

VPopup 轻量级移动端Vue弹窗组件。集中融合了有赞Vant、京东NutUI等Vue组件库中的 Msg信息框、Popup弹层、Dialog对话框、Toast提示框、ActionSheet动作面板框、Notify通知框 等功能。
image

用法

在main.js中引入组件

import Popup from './components/popup'
Vue.use(Popup)

支持标签式和函数式两种方式调用组件。

<!-- 标签式调用 -->
<template>
    <view id="root">
        ...
        
        <!-- VPopup模板 -->
        <v-popup 
            v-model="showDialog" 
            anim="scaleIn" 
            title="标题内容"
            content="弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内!" 
            shadeClose="false" 
            xclose
            :btns="[
                {...},
                {...},
            ]"
        />
    </view>
</template>
<!-- 函数式调用 -->
<script>
    export default {
        ...
        methods: {
            handleShowDialog() {
                let $el = this.$vpopup({
                    title: '标题内容',
                    content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内!',
                    anim: 'scaleIn',
                    shadeClose: false,
                    xclose: true,
                    onClose: () => {
                        console.log('vpopup is closed!')
                    },
                    btns: [
                        {text: '关闭'},
                        {
                            text: '确定',
                            style: 'color:#00e0a1',
                            click: () => {
                                $el.close()
                            }
                        }
                    ]
                });
            }
        }
    }
</script>

这里可以根据项目需求,自行选择调用方式即可。

image

  • Msg信息框

image

image

image

<!-- msg提示框 -->
<v-popup v-model="showMsg" anim="fadeIn" content="msg提示框测试(3s后窗口关闭)" shadeClose="false" time="3" />
<v-popup v-model="showMsgBg" anim="footer" content="自定义背景颜色" shade="false" time="2" 
    popup-style="background:rgba(0,0,0,.6);color:#fff;"
/>

<!-- 询问框 -->
<v-popup v-model="showConfirm" shadeClose="false" title="警告信息" xclose z-index="2001"
    content="<div style='color:#00e0a1;padding:20px 40px;'>确认框(这里是确认框提示信息)</div>"
    :btns="[
        {text: '取消', click: () => showConfirm=false},
        {text: '确定', style: 'color:#e63d23;', click: handleInfo},
    ]"
/>
  • Toast轻提示框

image

image

<!-- Toast轻提示弹窗 -->
<v-popup v-model="showToast" type="toast" icon="loading" time="2" content="加载中..." />
<v-popup v-model="showToast" type="toast" icon="success" shade="false" time="2" content="成功提示" />
<v-popup v-model="showToast" type="toast" icon="fail" shade="false" time="2" content="失败提示" />
  • 微信/android风格弹窗

image

image

<!-- Android风格弹窗 -->
<v-popup v-model="showAndroid1" type="android" shadeClose="false" xclose title="标题内容" z-index="2001"
    content="弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内"
    :btns="[
        {text: '知道了', click: () => showAndroid1=false},
        {text: '确定', style: 'color:#00e0a1;', click: handleInfo},
    ]"
>
</v-popup>
  • ActionSheet动作面板弹窗

image

image

image

<!-- ActionSheet底部菜单 -->
<v-popup v-model="showActionSheet" anim="footer" type="actionsheet" :z-index="1011"
    content="弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内"
    :btns="[
        {text: '拍照', style: 'color:#09f;', disabled: true, click: handleInfo},
        {text: '从手机相册选择', style: 'color:#00e0a1;', click: handleInfo},
        {text: '保存图片', style: 'color:#e63d23;', click: () => null},
        {text: '取消', click: () => showActionSheet=false},
    ]"
/>

soga,这里就不一一贴上示例代码了。如果觉得还不错,那就往下看实现过程吧。

实现方式

参数配置
弹窗支持如下参数自定义配置,大家根据需要自行搭配使用。

@@Props
------------------------------------------
v-model     当前组件是否显示
title       标题
content     内容(支持自定义插槽内容)
type        弹窗类型(toast | footer | actionsheet | actionsheetPicker | android/ios)
popupStyle  自定义弹窗样式
icon        toast图标(loading | success | fail)
shade       是否显示遮罩层
shadeClose  是否点击遮罩时关闭弹窗
opacity     遮罩层透明度
round       是否显示圆角
xclose      是否显示关闭图标
xposition   关闭图标位置(left | right | top | bottom)
xcolor      关闭图标颜色
anim        弹窗动画(scaleIn | fadeIn | footer | fadeInUp | fadeInDown)
position    弹出位置(top | right | bottom | left)
follow      长按/右键弹窗(坐标点)
time        弹窗自动关闭秒数(1、2、3)
zIndex      弹窗层叠(默认8080)
btns        弹窗按钮(参数:text|style|disabled|click)
 
@@$emit
------------------------------------------
open        打开弹出层时触发(@open="xxx")
close       关闭弹出层时触发(@close="xxx")
 
@@Event
------------------------------------------
onOpen      打开弹窗回调
onClose     关闭弹窗回调

弹窗模板popup.vue

<template>
  <div v-show="opened" class="nuxt__popup" :class="{'nuxt__popup-closed': closeCls}" :id="id">
    <div v-if="JSON.parse(shade)" class="nuxt__overlay" @click="shadeClicked" :style="{opacity}"></div>
    <div class="nuxt__wrap">
      <div class="nuxt__wrap-section">
        <div class="nuxt__wrap-child" :class="['anim-'+anim, type&&'popui__'+type, round&&'round', position]" :style="popupStyle">
          <div v-if="title" class="nuxt__wrap-tit" v-html="title"></div>
          <div v-if="type=='toast'&&icon" class="nuxt__toast-icon" :class="['nuxt__toast-'+icon]" v-html="toastIcon[icon]"></div>
          <template v-if="$slots.content"><div class="nuxt__wrap-cnt"><slot name="content" /></div></template>
          <template v-else><div v-if="content" class="nuxt__wrap-cnt" v-html="content"></div></template>
          <slot />
          <div v-if="btns" class="nuxt__wrap-btns">
            <span v-for="(btn,index) in btns" :key="index" class="btn" :style="btn.style" v-html="btn.text"></span>
          </div>
          <span v-if="xclose" class="nuxt__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"></span>
        </div>
      </div>
    </div>
  </div>
</template>
/**
 * @Desc     VueJs自定义弹窗组件VPopup
 * @Time     andy by 2020-10-06
 * @About    Q:282310962  wx:xy190310
 */
<script>
  let $index = 0, $lockCount = 0, $timer = {};
  export default {
    props: {
      ...
    },
    data() {
      return {
        opened: false,
        closeCls: '',
        toastIcon: {
          ...
        }
      }
    },
    watch: {
      value(val) {
        const type = val ? 'open' : 'close';
        this[type]();
      },
    },
    methods: {
      // 打开弹窗
      open() {
        if(this.opened) return;
        this.opened = true;
        this.$emit('open');
        typeof this.onOpen === 'function' && this.onOpen();
        
        if(JSON.parse(this.shade)) {
          if(!$lockCount) {
            document.body.classList.add('nt-overflow-hidden');
          }
          $lockCount++;
        }
        
        // 倒计时关闭
        if(this.time) {
          $index++;
          if($timer[$index] !== null) clearTimeout($timer[$index])
          $timer[$index] = setTimeout(() => {
            this.close();
          }, parseInt(this.time) * 1000);
        }
        
        if(this.follow) {
          this.$nextTick(() => {
            let obj = this.$el.querySelector('.nuxt__wrap-child');
            let oW, oH, winW, winH, pos;
 
            oW = obj.clientWidth;
            oH = obj.clientHeight;
            winW = window.innerWidth;
            winH = window.innerHeight;
            pos = this.getPos(this.follow[0], this.follow[1], oW, oH, winW, winH);
 
            obj.style.left = pos[0] + 'px';
            obj.style.top = pos[1] + 'px';
          });
        }
      },
      // 关闭弹窗
      close() {
        if(!this.opened) return;
        
        this.closeCls = true;
        setTimeout(() => {
          this.opened = false;
          this.closeCls = false;
          if(JSON.parse(this.shade)) {
            $lockCount--;
            if(!$lockCount) {
              document.body.classList.remove('nt-overflow-hidden');
            }
          }
          if(this.time) {
            $index--;
          }
          this.$emit('input', false);
          this.$emit('close');
          typeof this.onClose === 'function' && this.onClose();
        }, 200);
      },
      shadeClicked() {
        if(JSON.parse(this.shadeClose)) {
          this.close();
        }
      },
      btnClicked(e, index) {
        let btn = this.btns[index];
        if(!btn.disabled) {
          typeof btn.click === 'function' && btn.click(e)
        }
      },
      getZIndex() {
        for(var $idx = parseInt(this.zIndex), $el = document.getElementsByTagName('*'), i = 0, len = $el.length; i < len; i++)
          $idx = Math.max($idx, $el[i].style.zIndex)
        return $idx;
      },
      // 获取弹窗坐标点
      getPos(x, y, ow, oh, winW, winH) {
        let l = (x + ow) > winW ? x - ow : x;
        let t = (y + oh) > winH ? y - oh : y;
        return [l, t];
      }
    },
  }
</script>

通过组件传过来的v-model来调用open()和close()方法。

watch: {
    value(val) {
        const type = val ? 'open' : 'close';
        this[type]();
    },
},

组件还支持右键弹窗/长按弹窗自定义插槽内容。

image

image

<v-popup v-model="showComponent" xclose xposition="bottom" :shadeClose="false" content="这里是内容信息"
    :btns="[
        {text: '确认', style: 'color:#f60;', click: () => showComponent=false},
    ]"
    @open="handleOpen" @close="handleClose"
>
    <template #content><b style="color:#00e0a1;">当 content 和 自定义插槽 内容同时存在,只显示插槽内容!!!</b></template>
    <!-- <div slot="content">显示自定义插槽内容!</div> -->
    <div style="padding:30px 15px;">
        <img data-original="https://img.yzcdn.cn/vant/apple-3.jpg" style="width:100%;" @click="handleContextPopup" />
    </div>
</v-popup>

通过Vue.extend扩展构造器来实现函数式调用this.$vpopup({...})

import Vue from 'vue';
import VuePopup from './popup.vue';
 
let PopupConstructor = Vue.extend(VuePopup);
 
let $instance;
 
let VPopup = function(options = {}) {
    // 同一个页面中,id相同的Popup的DOM只会存在一个
    options.id = options.id || 'nuxt-popup-id';
    $instance = new PopupConstructor({
        propsData: options
    });
    $instance.vm = $instance.$mount();
    
    let popupDom = document.querySelector('#' + options.id);
    if(options.id && popupDom) {
        popupDom.parentNode.replaceChild($instance.$el, popupDom);
    } else {
        document.body.appendChild($instance.$el);
    }
 
    Vue.nextTick(() => {
        $instance.value = true;
    })
    
    return $instance;
}
 
VPopup.install = () => {
    Vue.prototype['$vpopup'] = VPopup;
    Vue.component('v-popup', VuePopup);
}
 
export default VPopup;

如上就实现了在Vue的 prototype 上挂载 $vpopup 方法及注册 v-popup 组件。

好了,基于Vue+Nuxt自定义弹窗组件就介绍到这里。目前该组件正在Nuxt项目中使用,到时也会分享出来。希望对大家有所帮助!!💪💪

最后附上基于Uniapp+Vue跨端仿抖音|聊天实例项目
https://segmentfault.com/a/1190000020972307

查看原文

赞 2 收藏 1 评论 0

xiaoyan2017 关注了标签 · 5月14日

android

Android(安卓或安致)是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

简介

  Android一词的本义指“机器人”,同时也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统、中间件、用户界面和应用软件组成。 

  系统架构

  android的系统架构和其操作系统一样,采用了分层的架构。从架构图看,android分为四个层,从高层到低层分别是应用程序层、应用程序框架层、系统运行库层和linux核心层。

  应用程序

  Android会同一系列核心应用程序包一起发布,该应用程序包包括客户端,SMS短消息程序,日历,地图,浏览器,联系人管理程序等。所有的应用程序都是使用JAVA语言编写的。

  应用程序框架

  开发人员也可以完全访问核心应用程序所使用的API框架。该应用程序的架构设计简化了组件的重用;任何一个应用程序都可以发布它的功能块并且任何其它的应用程序都可以使用其所发布的功能块(不过得遵循框架的安全性)。同样,该应用程序重用机制也使用户可以方便的替换程序组件。

  隐藏在每个应用后面的是一系列的服务和系统, 其中包括;

  丰富而又可扩展的视图(Views),可以用来构建应用程序, 它包括列表(lists),网格(grids),文本框(text boxes),按钮(buttons), 甚至可嵌入的web浏览器。

  内容提供器(Content Providers)使得应用程序可以访问另一个应用程序的数据(如联系人数据库), 或者共享它们自己的数据

  资源管理器(Resource Manager)提供 非代码资源的访问,如本地字符串,图形,和布局文件( layout files )。

  通知管理器 (Notification Manager) 使得应用程序可以在状态栏中显示自定义的提示信息。

  活动管理器( Activity Manager) 用来管理应用程序生命周期并提供常用的导航回退功能。

  有关更多的细节和怎样从头写一个应用程序,请参考 如何编写一个 Android 应用程序。

  系统运行库

  Android 包含一些C/C++库,这些库能被Android系统中不同的组件使用。它们通过 Android 应用程序框架为开发者提供服务。以下是一些核心库:

  * 系统 C 库 - 一个从BSD继承来的标准 C 系统函数库( libc ), 它是专门为基于 embedded linux的设备定制的。

  * 媒体库 - 基于PacketVideo OpenCORE;该库支持多种常用的音频、视频格式回放和录制,同时支持静态图像文件。编码格式包括MPEG4, H.264, MP3, AAC, AMR, JPG, PNG 。

  * Surface Manager - 对显示子系统的管理,并且为多个应用程序提 供了2D和3D图层的无缝融合。

  * LibWebCore - 一个最新的web浏览器引擎用,支持Android浏览器和一个可嵌入的web视图。

  应用程序组件

  Android开发四大组件分别是:活动(Activity): 用于表现功能。服务(Service): 后台运行服务,不提供界面呈现。广播接收器(BroadcastReceiver):用于接收广播。内容提供商(Content Provider): 支持在多个应用中存储和读取数据,相当于数据库。

  活动

  Android 中,Activity 是所有程序的根本,所有程序的流程都运行在Activity 之中,Activity可以算是开发者遇到的最频繁,也是Android 当中最基本的模块之一。在Android的程序当中,Activity 一般代表手机屏幕的一屏。如果把手机比作一个浏览器,那么Activity就相当于一个网页。在Activity 当中可以添加一些Button、Check box 等控件。可以看到Activity 概念和网页的概念相当类似。

  一般一个Android 应用是由多个Activity 组成的。这多个Activity 之间可以进行相互跳转,例如,按下一个Button 按钮后,可能会跳转到其他的Activity。和网页跳转稍微有些不一样的是,Activity 之间的跳转有可能返回值,例如,从Activity A 跳转到Activity B,那么当Activity B 运行结束的时候,有可能会给Activity A 一个返回值。这样做在很多时候是相当方便的。

  当打开一个新的屏幕时,之前一个屏幕会被置为暂停状态,并且压入历史堆栈中。用户可以通过回退操作返回到以前打开过的屏幕。我们可以选择性的移除一些没有必要保留的屏幕,因为Android会把每个应用的开始到当前的每个屏幕保存在堆栈中。

  服务

  Service 是android 系统中的一种组件,它跟Activity 的级别差不多,但是他不能自己运行,只能后台运行,并且可以和其他组件进行交互。Service 是没有界面的长生命周期的代码。Service 是一种程序,它可以运行很长时间,但是它却没有用户界面。这么说有点枯燥,来看个例子。打开一个音乐播放器的程序,这个时候若想上网了,那么,我们打开Android 浏览器,这个时候虽然我们已经进入了浏览器这个程序,但是,歌曲播放并没有停止,而是在后台继续一首接着一首的播放。其实这个播放就是由播放音乐的Service进行控制。当然这个播放音乐的Service也可以停止,例如,当播放列表里边的歌曲都结束,或者用户按下了停止音乐播放的快捷键等。service 可以在和多场合的应用中使用,比如播放多媒体的时候用户启动了其他Activity这个时候程序要在后台继续播放,比如检测SD 卡上文件的变化,再或者在后台记录你地理信息位置的改变等等,总之服务嘛,总是藏在后头的。

  开启service有两种方式:

  (1) Context.startService():Service会经历onCreate -> onStart(如果Service还没有运行,则android先调用onCreate()然后调用onStart();如果Service已经运行,则只调用onStart(),所以一个Service的onStart方法可能会重复调用多次 );stopService的时候直接onDestroy,如果是调用者自己直接退出而没有调用stopService的话,Service会一直在后台运行。该Service的调用者再启动起来后可以通过stopService关闭Service。 注意,多次调用Context.startservice()不会嵌套(即使会有相应的onStart()方法被调用),所以无论同一个服务被启动了多少次,一旦调用Context.stopService()或者stopSelf(),他都会被停止。补充说明:传递给startService()的Intent对象会传递给onStart()方法。调用顺序为:onCreate --> onStart(可多次调用) --> onDestroy。

  (2) Context.bindService():Service会经历onCreate() --> onBind(),onBind将返回给客户端一个IBind接口实例,IBind允许客户端回调服务的方法,比如得到Service运行的状态或其他操作。这个时候把调用者(Context,例如Activity)会和Service绑定在一起,Context退出了,Srevice就会调用onUnbind --> onDestroyed相应退出,所谓绑定在一起就共存亡了。[20]

  广播接收器

  在Android 中,Broadcast 是一种广泛运用的在应用程序之间传输信息的机制。而BroadcastReceiver 是对发送出来的Broadcast进行过滤接受并响应的一类组件。可以使用BroadcastReceiver 来让应用对一个外部的事件做出响应。这是非常有意思的,例如,当电话呼入这个外部事件到来的时候,可以利用BroadcastReceiver 进行处理。例如,当下载一个程序成功完成的时候,仍然可以利用BroadcastReceiver 进行处理。BroadcastReceiver不能生成UI,也就是说对于用户来说不是透明的,用户是看不到的。BroadcastReceiver通过NotificationManager 来通知用户这些事情发生了。BroadcastReceiver 既可以在AndroidManifest.xml 中注册,也可以在运行时的代码中使用Context.registerReceiver()进行注册。只要是注册了,当事件来临的时候,即使程序没有启动,系统也在需要的时候启动程序。各种应用还可以通过使用Context.sendBroadcast () 将它们自己的intent broadcasts广播给其他应用程序。

  注册BroadcastReceiver有两种方式:

  (1)在AndroidManifest.xml进行注册。这种方法有一个特点即使你的应用程序已经关闭了,但这个BroadcastReceiver依然会接受广播出来的对象,也就是说无论你这个应用程序时开还是关都属于活动状态都可以接受到广播的事件;

  (2)在代码中注册广播。

  第一种俗称静态注册,第二种俗称动态注册,这两种注册Broadcast Receiver的区别:

  动态注册较静态注册灵活。实验证明:当静态注册一个Broadcast Receiver时,不论应用程序是启动与否。都可以接受对应的广播。

  动态注册的时候,如果不执行unregister Receiver();方法取消注册,跟静态是一样的。但是如果执行该方法,当执行过以后,就不能接受广播了。

  内容提供

  Content Provider 是Android提供的第三方应用数据的访问方案。

  在Android中,对数据的保护是很严密的,除了放在SD卡中的数据,一个应用所持有的数据库、文件等内容,都是不允许其他直接访问的。Andorid当然不会真的把每个应用都做成一座孤岛,它为所有应用都准备了一扇窗,这就是Content Provider。应用想对外提供的数据,可以通过派生Content Provider类, 封装成一枚Content Provider,每个Content Provider都用一个uri作为独立的标识,形如:content://com.xxxxx。所有东西看着像REST的样子,但实际上,它比REST 更为灵活。和REST类似,uri也可以有两种类型,一种是带id的,另一种是列表的,但实现者不需要按照这个模式来做,给你id的uri你也可以返回列表类型的数据,只要调用者明白,就无妨,不用苛求所谓的REST。

  另外,Content Provider不和REST一样只有uri可用,还可以接受Projection,Selection,OrderBy等参数,这样,就可以像数据库那样进行投影,选择和排序。查询到的结果,以Cursor(参见:reference/android/database/Cursor.html )的形式进行返回,调用者可以移动Cursor来访问各列的数据。

  Content Provider屏蔽了内部数据的存储细节,向外提供了上述统一的接口模型,这样的抽象层次,大大简化了上层应用的书写,也对数据的整合提供了更方便的途径。Content Provider内部,常用数据库来实现,Android提供了强大的Sqlite支持,但很多时候,你也可以封装文件或其他混合的数据。

  在Android中,Content Resolver是用来发起Content Provider的定位和访问的。不过它仅提供了同步访问的Content Provider的接口。但通常,Content Provider需要访问的可能是数据库等大数据源,效率上不足够快,会导致调用线程的拥塞。因此Android提供了一个AsyncQueryHandler(参见:reference/android/content/AsyncQueryHandler.html),帮助进行异步访问Content Provider。

  在各大组件中,Service和Content Provider都是那种需要持续访问的。Service如果是一个耗时的场景,往往会提供异步访问的接口,而Content Provider不论效率如何,都提供的是约定的同步访问接口。

软件开发

  Java方面

  Android支持使用Java作为编程语言来开发应用程序,而Android的Java开发方面从接口到功能,都有层出不穷的变化。考虑到Java虚拟机的效率和资源占用,谷歌重新设计了Android的Java,以便能提高效率和减少资源占用,因而与J2ME等不同。其中Activity等同于J2ME的MIDlet,一个 Activity 类(Class)负责创建视窗(Windows),一个活动中的Activity就是在 foreground(前景)模式,背景运行的程序叫做Service。两者之间通过由ServiceConnection和AIDL连结,达到复数程序同时运行效果。如果运行中的 Activity 全部画面被其他 Activity 取代时,该 Activity 便被停止(Stopped),甚至被系统清除(Kill)。

  View等同于J2ME的Displayable,程序人员可以通过 View 类与“XML layout”档将UI放置在视窗上,Android 1.5的版本可以利用 View 打造出所谓的 Widgets,其实Widget只是View的一种,所以可以使用xml来设计layout,HTC的Android Hero手机即含有大量的widget。至于ViewGroup 是各种layout 的基础抽象类(abstract class),ViewGroup之内还可以有ViewGroup。View的构造函数不需要再Activity中调用,但是Displayable的是必须的,在Activity 中,要通过findViewById()来从XML 中取得View,Android的View类的显示很大程度上是从XML中读取的。View 与事件(event)息息相关,两者之间通过Listener 结合在一起,每一个View都可以注册一个event listener,例如:当View要处理用户触碰(touch)的事件时,就要向Android框架注册View.OnClickListener。另外还有BitMap等同于J2ME的Image。   

关注 63479

xiaoyan2017 关注了标签 · 5月14日

flutter

clipboard.png

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter 官网:https://flutter.dev/
Flutter 中文资源:https://flutter-io.cn/
Flutter Github:https://github.com/flutter/fl...

关注 931

xiaoyan2017 发布了文章 · 5月13日

基于 Flutter+Dart 聊天实例 | Flutter 仿微信界面聊天室

1、项目介绍

Flutter是目前比较流行的跨平台开发技术,凭借其出色的性能获得很多前端技术爱好者的关注,比如阿里闲鱼美团腾讯等大公司都有投入相关案例生产使用。
flutter_chatroom项目是基于Flutter+Dart+chewie+photo_view+image_picker等技术开发的跨平台仿微信app聊天界面应用,实现了消息/表情发送、图片预览、长按菜单、红包/小视频/朋友圈等功能。
022360截图20200512003659242.png

2、技术框架

  • 使用技术:Flutter 1.12.13/Dart 2.7.0
  • 视频组件:chewie: ^0.9.7
  • 图片/拍照:image_picker: ^0.6.6+1
  • 图片预览组件:photo_view: ^0.9.2
  • 弹窗组件:showModalBottomSheet/AlertDialog/SnackBar
  • 本地存储:shared_preferences: ^0.5.7+1
  • 字体图标:阿里iconfont字体图标库

001360截图20200512002407906.png

003360截图20200512002631530.png

004360截图20200512002755155.png

005360截图20200512002840849.png

007360截图20200512002934978.png

008360截图20200512003004490.png

009360截图20200512003023266.png

011360截图20200512003108139.png

014360截图20200512003208370.png

016360截图20200512003322336.png

018360截图20200512003422368.png

019360截图20200512003435098.png

021360截图20200512003604679.png

023360截图20200512003901929.png

026360截图20200512004446202.png

025360截图20200512004305675.png

029360截图20200512004708377.png

031360截图20200512005508992.png

鉴于flutter基于dart语言,需要安装Dart Sdk / Flutter Sdk,至于如何搭建开发环境,可以去官网查阅文档资料

https://flutter.cn/

https://flutterchina.club/

https://pub.flutter-io.cn/

https://www.dartcn.com/

使用vscode编辑器,可先安装DartFlutterFlutter widget snippets等扩展插件

3、flutter沉浸式状态栏/底部tabbar

flutter中如何实现顶部全背景沉浸式透明状态栏(去掉状态栏黑色半透明背景),去掉右上角banner,可以去看这篇文章
https://segmentfault.com/a/11...

4、flutter图标组件/IconData自定义封装组件

  • 1、使用系统图标组件: Icon(Icons.search) 
  • 2、使用IconData方式: Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0)

使用第二种方式需要先下载阿里图标库字体文件,然后在pubspec.yaml中引入字体
360截图20200513090806912.png

class GStyle {
    // __ 自定义图标
    static iconfont(int codePoint, {double size = 16.0, Color color}) {
        return Icon(
            IconData(codePoint, fontFamily: 'iconfont', matchTextDirection: true),
            size: size,
            color: color,
        );
    }
}

调用非常简单,可自定义颜色、字体大小;
GStyle.iconfont(0xe635, color: Colors.orange, size: 17.0)

5、flutter实现badge红点/圆点提示

360截图20200513091117720.png
如上图:在flutter中没有圆点提示组件,需要自己封装实现;

class GStyle {
    // 消息红点
    static badge(int count, {Color color = Colors.red, bool isdot = false, double height = 18.0, double width = 18.0}) {
        final _num = count > 99 ? '···' : count;
        return Container(
            alignment: Alignment.center, height: !isdot ? height : height/2, width: !isdot ? width : width/2,
            decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(100.0)),
            child: !isdot ? Text('$_num', style: TextStyle(color: Colors.white, fontSize: 12.0)) : null
        );
    }
}

支持自定义红点大小、颜色,默认数字超过99就...显示;
GStyle.badge(0, isdot:true)
GStyle.badge(13)
GStyle.badge(29, color: Colors.orange, height: 15.0, width: 15.0)

6、flutter长按自定义弹窗

  • 在flutter中如何实现长按,并在长按位置弹出菜单,类似微信消息长按弹窗效果;

360截图20200513091947231.png
通过InkWell组件提供的onTapDown事件获取坐标点实现

InkWell(
    splashColor: Colors.grey[200],
    child: Container(...),
    onTapDown: (TapDownDetails details) {
        _globalPositionX = details.globalPosition.dx;
        _globalPositionY = details.globalPosition.dy;
    },
    onLongPress: () {
        _showPopupMenu(context);
    },
),
// 长按弹窗
double _globalPositionX = 0.0; //长按位置的横坐标
double _globalPositionY = 0.0; //长按位置的纵坐标
void _showPopupMenu(BuildContext context) {
    // 确定点击位置在左侧还是右侧
    bool isLeft = _globalPositionX > MediaQuery.of(context).size.width/2 ? false : true;
    // 确定点击位置在上半屏幕还是下半屏幕
    bool isTop = _globalPositionY > MediaQuery.of(context).size.height/2 ? false : true;

    showDialog(
      context: context,
      builder: (context) {
        return Stack(
          children: <Widget>[
            Positioned(
              top: isTop ? _globalPositionY : _globalPositionY - 200.0,
              left: isLeft ? _globalPositionX : _globalPositionX - 120.0,
              width: 120.0,
              child: Material(
                ...
              ),
            )
          ],
        );
      }
    );
}
  • flutter如何实现去掉AlertDialog弹窗大小限制?

可通过SizedBox和无限制容器UnconstrainedBox组件实现

void _showCardPopup(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return UnconstrainedBox(
          constrainedAxis: Axis.vertical,
          child: SizedBox(
            width: 260,
            child: AlertDialog(
              content: Container(
                ...
              ),
              elevation: 0,
              contentPadding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
            ),
          ),
        );
      }
    );
}

7、flutter登录/注册表单|本地存储

flutter提供了两个文本框组件:TextFieldTextFormField
本文是使用TextField实现,并在文本框后添加清空文本框/密码查看图标

TextField(
  keyboardType: TextInputType.phone,
  controller: TextEditingController.fromValue(TextEditingValue(
    text: formObj['tel'],
    selection: new TextSelection.fromPosition(TextPosition(affinity: TextAffinity.downstream, offset: formObj['tel'].length))
  )),
  decoration: InputDecoration(
    hintText: "请输入手机号",
    isDense: true,
    hintStyle: TextStyle(fontSize: 14.0),
    suffixIcon: Visibility(
      visible: formObj['tel'].isNotEmpty,
      child: InkWell(
        child: GStyle.iconfont(0xe69f, color: Colors.grey, size: 14.0), onTap: () {
          setState(() { formObj['tel'] = ''; });
        }
      ),
    ),
    border: OutlineInputBorder(borderSide: BorderSide.none)
  ),
  onChanged: (val) {
    setState(() { formObj['tel'] = val; });
  },
)

TextField(
  decoration: InputDecoration(
    hintText: "请输入密码",
    isDense: true,
    hintStyle: TextStyle(fontSize: 14.0),
    suffixIcon: InkWell(
      child: Icon(formObj['isObscureText'] ? Icons.visibility_off : Icons.visibility, color: Colors.grey, size: 14.0),
      onTap: () {
        setState(() {
          formObj['isObscureText'] = !formObj['isObscureText'];
        });
      },
    ),
    border: OutlineInputBorder(borderSide: BorderSide.none)
  ),
  obscureText: formObj['isObscureText'],
  onChanged: (val) {
    setState(() { formObj['pwd'] = val; });
  },
)

验证消息提示则是使用flutter提供的SnackBar实现

// SnackBar提示
final _scaffoldkey = new GlobalKey<ScaffoldState>();
void _snackbar(String title, {Color color}) {
    _scaffoldkey.currentState.showSnackBar(SnackBar(
      backgroundColor: color ?? Colors.redAccent,
      content: Text(title),
      duration: Duration(seconds: 1),
    ));
}

另外本地存储使用的是shared\_preferences,至于如何使用可参看
https://pub.flutter-io.cn/packages/shared_preferences

void handleSubmit() async {
    if(formObj['tel'] == '') {
      _snackbar('手机号不能为空');
    }else if(!Util.checkTel(formObj['tel'])) {
      _snackbar('手机号格式有误');
    }else if(formObj['pwd'] == '') {
      _snackbar('密码不能为空');
    }else {
      // ...接口数据

      // 设置存储信息
      final prefs = await SharedPreferences.getInstance();
      prefs.setBool('hasLogin', true);
      prefs.setInt('user', int.parse(formObj['tel']));
      prefs.setString('token', Util.setToken());

      _snackbar('恭喜你,登录成功', color: Colors.greenAccent[400]);
      Timer(Duration(seconds: 2), (){
        Navigator.pushNamedAndRemoveUntil(context, '/tabbarpage', (route) => route == null);
      });
    }
}

8、flutter聊天页面功能

360截图20200513093616798.png

  • 在flutter中如何实现类似上图编辑器功能?通过TextField提供的多行文本框属性maxLines就可实现。
Container(
    margin: GStyle.margin(10.0),
    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(3.0)),
    constraints: BoxConstraints(minHeight: 30.0, maxHeight: 150.0),
    child: TextField(
        maxLines: null,
        keyboardType: TextInputType.multiline,
        decoration: InputDecoration(
          hintStyle: TextStyle(fontSize: 14.0),
          isDense: true,
          contentPadding: EdgeInsets.all(5.0),
          border: OutlineInputBorder(borderSide: BorderSide.none)
        ),
        controller: _textEditingController,
        focusNode: _focusNode,
        onChanged: (val) {
          setState(() {
            editorLastCursor = _textEditingController.selection.baseOffset;
          });
        },
        onTap: () {handleEditorTaped();},
    ),
),
  • flutter实现滚动聊天信息到最底部

通过ListView里controller属性提供的jumpTo方法及_msgController.position.maxScrollExtent

ScrollController _msgController = new ScrollController();
...
ListView(
    controller: _msgController,
    padding: EdgeInsets.all(10.0),
    children: renderMsgTpl(),
)

// 滚动消息至聊天底部
void scrollMsgBottom() {
    timer = Timer(Duration(milliseconds: 100), () => _msgController.jumpTo(_msgController.position.maxScrollExtent));
}

行了,基于flutter/dart开发聊天室实例就介绍到这里,希望能喜欢~~💪💪

最后附上electron桌面端应用实例
electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天
360截图20190807103937042.jpg

查看原文

赞 44 收藏 26 评论 4

xiaoyan2017 发布了文章 · 4月27日

Flutter沉浸式透明状态栏|flutter自定义凸起BottomAppBar导航

前言

如下图:状态栏是指android手机顶部显示手机状态信息的位置。
android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感。
360截图20200427012423830.png

如上图:Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?
360截图20200427022423726.png

360截图20200427022547503.png

首先需要在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态栏颜色修改设置成透明,因为他本身是黑色半透明。
360截图20200427015824935.png

在MainActivity.kt页面新增如下代码

//设置状态栏沉浸式透明(修改flutter状态栏黑色半透明为全透明)
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        window.statusBarColor = 0
    }
}

完整MainActivity.kt代码如下:

package com.example.flutter_app

import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

//引入
import android.os.Build;
import android.os.Bundle;

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }

    //设置状态栏沉浸式透明(修改flutter状态栏黑色半透明为全透明)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.statusBarColor = 0
        }
    }
}

注意:flutter项目默认是使用Kotlin语言

在Google I/O 2017中,Google 宣布 Kotlin 取代 Java 成为 Android 官方开发语言。
Kotlin详情见:https://www.kotlincn.net/

通过 flutter create flutter\_app 命令创建flutter项目时,默认是Kotlin语言模式,如果想要修改成Java语言,则运行如下命令创建项目即可
flutter create -a java flutter\_app


如果是java语言模式下,修改沉浸式状态栏方法和上面同理
MainActivity.java路径:
android\\app\\src\\main\\java\\com\\example\\flutter\_app\\MainActivity.java 
在MainActivity.java页面新增如下代码

package com.example.demo1;

import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

// 引入
import android.os.Build;
import android.os.Bundle;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    GeneratedPluginRegistrant.registerWith(flutterEngine);
  }

  // 设置状态栏沉浸式透明(修改flutter状态栏黑色半透明为全透明)
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      getWindow().setStatusBarColor(0);
    }
  }
}

Flutter实现咸鱼底部导航凸起效果

  • 如下图: BottomNavigationBar 组件仿咸鱼凸起导航栏配置

360截图20200427023646485.png

int _selectedIndex = 0;
// 创建数组引入页面
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];

...

Scaffold(
    body: pglist[_selectedIndex],
    
    // 抽屉菜单
    // drawer: new Drawer(),

    // 普通底部导航栏
    bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,
        type: BottomNavigationBarType.fixed,
        elevation: 5.0,
        unselectedFontSize: 12.0,
        selectedFontSize: 18.0,
        items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.search), title: Text('Find')),
            BottomNavigationBarItem(icon: Icon(null), title: Text('Cart')),
            BottomNavigationBarItem(icon: Icon(Icons.photo_filter), title: Text('Zone')),
            BottomNavigationBarItem(icon: Icon(Icons.face), title: Text('Ucenter')),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
    ),
    
    floatingActionButton: FloatingActionButton(
        backgroundColor: _selectedIndex == 2 ? Colors.red : Colors.grey,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Icon(Icons.add)
            ]
        ),
        onPressed: (){
            setState(() {
                _selectedIndex = 2;
            });
        },
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

void _onItemTapped(int index) {
    setState(() {
        _selectedIndex = index;
    });
}
  • 如下图: BottomAppBar 组件凸起凹陷导航栏配置

360截图20200427024444877.png

int _selectedIndex = 0;
// 创建数组引入页面
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];

...

Scaffold(
    body: pglist[_selectedIndex],
    
    // 抽屉菜单
    // drawer: new Drawer(),

    // 底部凸起凹陷导航栏
    bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
                IconButton(
                    icon: Icon(Icons.home),
                    color: _selectedIndex == 0 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(0);
                    },
                ),
                IconButton(
                    icon: Icon(Icons.search),
                    color: _selectedIndex == 1 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(1);
                    },
                ),
                
                SizedBox(width: 50,),
                
                IconButton(
                    icon: Icon(Icons.photo_filter),
                    color: _selectedIndex == 3 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(3);
                    },
                ),
                IconButton(
                    icon: Icon(Icons.face),
                    color: _selectedIndex == 4 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(4);
                    },
                ),
            ],
        ),
    ),
)

void _onItemTapped(int index) {
    setState(() {
        _selectedIndex = index;
    });
}

基于flutter实现沉浸式状态栏+凸起导航栏就分享到这里,希望能有些帮助。💪💪

最后附上uniapp跨端实例项目
uniapp直播室|仿抖音视频|nvue+uniapp高仿陌陌直播

查看原文

赞 5 收藏 5 评论 0

xiaoyan2017 发布了文章 · 1月9日

electron-vue聊天实例|electron仿微信电脑端界面

项目说明:

electron-vChat聊天是一个基于electron+electron-vue+vue+vuex+Nodejs+vue-router等技术开发的高仿微信pc客户端界面聊天室项目,实现消息发送/表情,图片/视频预览,拖拽上传/粘贴截图发送/微信dll截图,右键菜单、朋友圈/红包/换肤等功能。

预览图:

034360截图20200108115113391.png

技术框架:

  • 运用技术:electron + electron-vue + vue
  • 状态管理:Vuex
  • 地址路由:Vue-router
  • 字体图标:阿里iconfont字体图标库
  • 弹窗插件:wcPop
  • 打包工具:electron-builder
  • 图片预览:vue-photo-preview
  • 视频组件:vue-video-player

001360截图20200108101448499.png

002360截图20200108101513050.png

003360截图20200108101537650.png

005360截图20200108101943394.png

006360截图20200108103216338.png

007360截图20200108103303225.png

如上图:可以自由切换桌面端聊天背景皮肤

009360截图20200108102231769.png

011360截图20200108102556698.png

013360截图20200108103747272.png

015360截图20200108104156775.png

018360截图20200108104532767.png

019360截图20200108105155294.png

020360截图20200108105937133.png

024360截图20200108110609181.png

025360截图20200108110820571.png

027360截图20200108111356238.png

029360截图20200108113415376.png

031360截图20200108114130270.png

Electron 是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。
https://electronjs.org/
至于如何搭建开发环境及使用electron-vue,可自行去查阅官网及搜资料
基于vue语法来构造 electron 应用程序的样板代码。

https://electron.org.cn/vue/i...
https://simulatedgreg.gitbook...

electron主进程:创建及配置

通过electron里的BrowserWindow对象创建和控制浏览器窗口
src目录下有main、renderer两个文件夹,分别是主进程及渲染进程,配置窗口修改src/main/index.js文件即可。


let mainWin
let tray
let forceQuit = false
let logined = false

/**
 * 创建主窗口=============================
 */
function createMainWin() {
    mainWin = new BrowserWindow({
        // 背景颜色
        // backgroundColor: '#ebebeb',
        width: Common.WIN_SIZE_MAIN.width,
        height: Common.WIN_SIZE_MAIN.height,
        title: Common.WIN_TITLE,
        useContentSize: true,
        autoHideMenuBar: true,
        // 无边框窗口
        frame: false,
        resizable: true,
        // 窗口创建的时候是否显示. 默认值为true
        show: false,
        webPreferences: {
            // devTools: false,
            webSecurity: false
        }
    })
    
    mainWin.setMenu(null)
    mainWin.loadURL(Common.WIN_LOAD_URL())
    
    mainWin.once('ready-to-show', () => {
        mainWin.show()
        mainWin.focus()
    })
    
    // 点击关闭最小到托盘判断
    mainWin.on('close', (e) => {
        if(logined && !forceQuit) {
            e.preventDefault()
            mainWin.hide()
        }else {
            mainWin = null
            app.quit()
        }
    })
    
    ...
    apptray.createTray()
}

app.on('ready', createMainWin)

app.on('activate', () => {
    if(mainWin === null) {
        createMainWin()
    }
})

...

electron创建托盘图标、托盘图标闪烁、最小化到托盘、托盘右键
副本--360截图20200108115525683.png

/**
 * 托盘图标事件
 */
let flashTrayTimer = null
let trayIco1 = `${__static}/icon.ico`
let trayIco2 = `${__static}/empty.ico`
let apptray = {
  // 创建托盘图标
  createTray() {
    tray = new Tray(trayIco1)
    const menu = Menu.buildFromTemplate([
      {
        label: '打开主界面',
        icon: `${__static}/tray-ico1.png`,
        click: () => {
          if(mainWin.isMinimized()) mainWin.restore()
          mainWin.show()
          mainWin.focus()
          
          this.flashTray(false)
        }
      },
      {
        label: '关于',
      },
      {
        label: '退出',
        click: () => {
          if(process.platform !== 'darwin') {
            mainWin.show()
            // 清空登录信息
            mainWin.webContents.send('clearLoggedInfo')
            
            forceQuit = true
            mainWin = null
            app.quit()
          }
        }
      },
    ])
    tray.setContextMenu(menu)
    tray.setToolTip('electron-vchat v1.0.0')

    // 托盘点击事件
    tray.on('click', () => {
      if(mainWin.isMinimized()) mainWin.restore()
      mainWin.show()
      mainWin.focus()

      this.flashTray(false)
    })
  },
  // 托盘图标闪烁
  flashTray(flash) {
    let hasIco = false

    if(flash) {
      if(flashTrayTimer) return
      flashTrayTimer = setInterval(() => {
        tray.setImage(hasIco ? trayIco1 : trayIco2)
        hasIco = !hasIco
      }, 500)
    }else {
      if(flashTrayTimer) {
        clearInterval(flashTrayTimer)
        flashTrayTimer = null
      }

      tray.setImage(trayIco1)
    }
  },
  // 销毁托盘图标
  destroyTray() {
    this.flashTray(false)
    tray.destroy()
    tray = null
  }
}

点击窗口关闭,监听close事件,判断是否最小化到托盘

// 点击关闭最小到托盘判断
mainWin.on('close', (e) => {
    if(logined && !forceQuit) {
        e.preventDefault()
        mainWin.hide()
    }else {
        mainWin = null
        app.quit()
    }
})

electron渲染进程:主入口页面配置

/**
 * @Desc   主入口页面JS
 * @about  Q:282310962  wx:xy190310
 */

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

// 引入组件配置
import $components from './components'
Vue.use($components)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios


/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

主窗口页面分为侧边栏+主布局,主布局顶部里含有最大/小化、关闭按钮

<template>
  <div id="app">
    <div class="elv-container" :style="$store.state.winSkin && {'background-image': 'url('+$store.state.winSkin+')'}">
      <div class="elv-wrapper flexbox">
        <!-- //侧边栏 -->
        <side-bar v-if="!$route.meta.hideSideBar" />

        <!-- //主布局 -->
        <div class="elv-mainbx flex1 flexbox flex-col">
          <!-- ...顶部按钮 -->
          <win-bar />
          
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

electron无边框窗口实现拖动、最大/小化、关闭功能

配置frame: false就能实现无边框窗体,拖动窗口功能需另行处理
360截图20200109013431570.png

  • 通过mousedown、mousemove等事件处理
  • 设置需要拖动区css属性 -webkit-app-region

设置css -webkit-app-region: drag; 就能实现拖动窗口
设置-webkit-app-region: drag后,下面的元素不能点击操作,可通过设置需点击元素no-drag即可。

顶部winbar.vue组件

import { app, remote, ipcRenderer } from 'electron'
import { mapState, mapMutations } from 'vuex'

let currentWin = remote.getCurrentWindow()

export default {
    props: {
        title: String,
    },
    data () {
        return {// 是否置顶
            isAlwaysOnTop: false,
            // 窗口是否可以最小化
            isMinimizable: true,
            // 窗口是否可以最大化
            isMaximizable: true,
        }
    },
    computed: {
        ...mapState(['isWinMaxed'])
    },
    mounted() {if(!currentWin.isMinimizable()) {
            this.isMinimizable = false
        }
        if(!currentWin.isMaximizable()) {
            this.isMaximizable = false
        }
        if(this.isWinMaxed && currentWin.isMaximizable()) {
            currentWin.maximize()
        }

        // 监听是否最大化
        currentWin.on('maximize', () => {
            this.SET_WINMAXIMIZE(true)
        })
        currentWin.on('unmaximize', () => {
            this.SET_WINMAXIMIZE(false)
        })
    },
    methods: {
        ...mapMutations(['SET_WINMAXIMIZE']),

        // 置顶窗口
        handleFixTop() {
            this.isAlwaysOnTop = !this.isAlwaysOnTop
            currentWin.setAlwaysOnTop(this.isAlwaysOnTop)
        },

        // 最小化
        handleMin() {
            currentWin.minimize()
        },

        // 最大化
        handleMax() {
            if(!currentWin.isMaximizable()) return
            if(currentWin.isMaximized()) {
                currentWin.unmaximize()
                this.SET_WINMAXIMIZE(false)
            }else {
                currentWin.maximize()
                this.SET_WINMAXIMIZE(true)
            }
        },

        // 关闭
        handleQuit() {
            currentWin.close()
        }
    }
}

electron编辑器光标处插入表情、div可编辑contenteditable="true"双向绑定 、electron截图功能

vue如何实现编辑框contenteditable光标处插入动态表情,这里不多介绍,可以去看之前的一篇分享文章。
electron+vue实现div contenteditable功能|截图

好了,基于electron+vue开发仿微信桌面聊天实例就分享到这里,希望能有点点帮助!!💪💪

最后分享个uniapp+vue实例项目
uniapp即时聊天|vue+uniapp仿微信app聊天实例|uniapp仿微信界面

查看原文

赞 33 收藏 23 评论 7

xiaoyan2017 发布了文章 · 1月7日

electron+vue实现div contenteditable功能|截图

最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能。一般通过input或textarea也能实现,通过插入[笑脸]、(:12 这些标签,展示的时候解析标签就行。
如下图效果:
360截图20200107111730111.png
在网上找到的jq插件实现在textarea光标处插入表情符标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col col-sm-12">
                    <button class="btn btn-success" data-emoj="[笑脸]">[笑脸]</button>
                    <button class="btn btn-success" data-emoj="[奋斗]">[奋斗]</button>
                    <button class="btn btn-success" data-emoj="[:17]">[:17]</button>
                </div>
                <div class="col col-sm-12">
                    <textarea class="form-control" id="content" rows="10"></textarea>
                </div>
            </div>
        </div>
     
        <script data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            (function ($) {
                $.fn.extend({
                    insertEmojAtCaret: function (myValue) {
                        var $t = $(this)[0];
                        if (document.selection) {
                            this.focus();
                            sel = document.selection.createRange();
                            sel.text = myValue;
                            this.focus();
                        } else if ($t.selectionStart || $t.selectionStart == '0') {
                            var startPos = $t.selectionStart;
                            var endPos = $t.selectionEnd;
                            var scrollTop = $t.scrollTop;
                            $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                            this.focus();
                            $t.selectionStart = startPos + myValue.length;
                            $t.selectionEnd = startPos + myValue.length;
                            $t.scrollTop = scrollTop;
                        } else {
                            this.value += myValue;
                            this.focus();
                        }
                    }
                });
            })(jQuery);
                 
            $("button").on("click", function() {
                $("#content").insertEmojAtCaret($(this).attr("data-emoj"));
            });
        </script>
    </body>
</html>

可是这种方法并不是我想要的类似微信编辑框插入表情效果。
如是就想到了div模拟 设置contenteditable="true" 实现富文本编辑器效果,这种方法是可以实现,不过在vue中不能绑定v-model,最后参考一些技术贴实现了这个功能,一顿操作下来采坑不少,于是就做一些分享记录吧。
360截图20200107160057637.png

vue中通过给div添加contenteditable=true属性实现富文本功能

360截图20200107100855597.png

实现方式:
单独声明一个vue组件,chatInput.vue,通过监听数据变化并返回父组件。

1、父组件添加v-model

<template>
    ...
    <chatInput ref="chatInput" v-model="editorText" @focusFn="handleEditorFocus" @blurFn="handleEditorBlur" />
</template>

import chatInput from './chatInput'

export default {
    data () {
        return {
            editorText: '',
            
            ...
        }
    },
    components: {
        chatInput,
    },
    ...
}

2、v-model中传入的值在子组件prop中获取

export default {
    props: {
        value: { type: String, default: '' }
    },
    data () {
        return {
            editorText: this.value,
            ...
        }
    },
    watch: {
        value() {
            ...
        }
    },
}

3、通过监听获取到的prop值,并将该值赋值给子组件中的v-html参数,双向绑定就ok了。

chatInput.vue组件

<!-- vue实现contenteditable功能 -->

<template>
    <div 
        ref="editor"
        class="editor"
        contenteditable="true"
        v-html="editorText"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur">
    </div>
</template>

<script>
    export default {
        props: {
            value: { type: String, default: '' }
        },
        data () {
            return {
                editorText: this.value,
                isChange: true,
            }
        },
        watch: {
            value() {
                if(this.isChange) {
                    this.editorText = this.value
                }
            }
        },
        methods: {
            handleInput() {
                this.$emit('input', this.$el.innerHTML)
            },
            // 清空编辑器
            handleClear() {
                this.$refs.editor.innerHTML = ''
                this.$refs.editor.focus()
            },
            
            // 获取焦点
            handleFocus() {
                this.isChange = false
                this.$emit('focusFn')
            },
            // 失去焦点
            handleBlur() {
                this.isChange = true
                this.$emit('blurFn')
            },
            

            /**
             * 光标处插入内容
             * @param html 需要插入的内容
             */
            insertHtmlAtCaret(html) {
                let sel, range;
                if(!this.$refs.editor.childNodes.length) {
                    this.$refs.editor.focus()
                }
                if (window.getSelection) {
                    // IE9 and non-IE
                    sel = window.getSelection();

                    if (sel.getRangeAt && sel.rangeCount) {
                        range = sel.getRangeAt(0);
                        range.deleteContents();
                        let el = document.createElement("div");
                        el.appendChild(html)
                        var frag = document.createDocumentFragment(), node, lastNode;
                        while ((node = el.firstChild)) {
                            lastNode = frag.appendChild(node);
                        }
                        range.insertNode(frag);
                        if (lastNode) {
                            range = range.cloneRange();
                            range.setStartAfter(lastNode);
                            range.collapse(true);
                            sel.removeAllRanges();
                            sel.addRange(range);
                        }
                    }
                } else if (document.selection && document.selection.type != "Control") {
                    // IE < 9
                    document.selection.createRange().pasteHTML(html);
                }
                
                this.handleInput()
            }
        }
    }
</script>

<style>

</style>

组件功能已经亲测,直接一次性拿走使用。

以下是一些参考:

1、vue官方描叙,自定义组件的v-model:
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,v-model的值将会传入子组件中的prop
https://cn.vuejs.org/v2/guide/components-custom-events.html#自定义组件的-v-model

2、vue中div可编辑光标处插入内容
https://blog.csdn.net/weixin_...

https://blog.csdn.net/qq_3106...

360截图20200107101051427.png

360截图20200107101115114.png

electron+vue中实现截图功能

主要使用的是微信截图dll,通过node执行即可

screenShot() {
    return new Promise((resolve) => {
        const { execFile } = require('child_process')
        var screenWin = execFile('./static/PrintScr.exe')
        screenWin.on('exit', function(code) {
            let pngs = require('electron').clipboard.readImage().toPNG()
            let imgData = new Buffer.from(pngs, 'base64')
            let imgs = 'data:image/png;base64,' + btoa(new Uint8Array(imgData).reduce((data, byte) => data + String.fromCharCode(byte), ''))
            resolve(imgs)
        })
    })
},
查看原文

赞 6 收藏 2 评论 0

认证与成就

  • 获得 134 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-07-20
个人主页被 1.6k 人浏览