憧憬点滴记忆 https://www.licoy.cn Licoy's Blog关注互联网及软件IT技术的个人博客 Fri, 20 Sep 2019 11:09:53 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.0.6 关于在travis-ci以及appveyor条件构建遇到的坑 https://www.licoy.cn/3385.html https://www.licoy.cn/3385.html#comments Sat, 14 Sep 2019 03:16:34 +0000 https://www.licoy.cn/?p=3385 前言

在上篇《基于Electron-Vue开发了一款美图搜罗器》文章中有提到过关于在自动化构建的方面花费了很长的时间,实际上这是一个相对比较头痛的问题,之前每次commit到github之后,travis-ci以及appveyor都会进行build,不过有时候我们就是修改了与业务无关的东西,比如readme之类的,不需要重新build,这个时候我们就需要使用条件构建,这里最好的办法就是通过推送tag来进行触发构建。
关于在travis-ci以及appveyor条件构建遇到的坑

travis-ci

关于在travis-ci中,我在官方的文档中并没有找到关于通过tag来进行触发构建的说明,可以或许会有遗漏,后面在官方github仓库的issue中发现了有人曾经提出来过,具体可以参考:https://github.com/travis-ci/travis-ci/issues/6893,于是参考着改了之后我的.travis.yml就是如下所示:

osx_image: xcode8.3
sudo: required
dist: trusty
language: c
matrix:
  include:
  - os: osx
if: tag IS present # 这里是添加的之后的部分
cache:
  directories:
  - node_modules
  - "$HOME/.electron"
  - "$HOME/.cache"
addons:
  apt:
    packages:
    - libgnome-keyring-dev
    - icnsutils
    #- xvfb
before_install:
- mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
  "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
  | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
- if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
install:
#- export DISPLAY=':99.0'
#- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
- nvm install 10
- curl -o- -L https://yarnpkg.com/install.sh | bash
- source ~/.bashrc
- npm install -g xvfb-maybe
- yarn
script:
#- xvfb-maybe node_modules/.bin/karma start test/unit/karma.conf.js
#- yarn run pack && xvfb-maybe node_modules/.bin/mocha test/e2e
- npm run release
branches:
  only:
  - master

appveyor

appveyor的可以参考官方的https://www.appveyor.com/docs/appveyor-yml/中可以看出,在appveyor.yml中添加skip_non_tags: true即可使用tag来触发构建,于是改了之后我的appveyor.yml为:

# Commented sections below can be used to run tests on the CI server
# https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing
version: 0.1.{build}

branches:
  only:
    - master

skip_non_tags: true

image: Visual Studio 2017
platform:
  - x64

cache:
  - node_modules
  - '%APPDATA%\npm-cache'
  - '%USERPROFILE%\.electron'
  - '%USERPROFILE%\AppData\Local\Yarn\cache'

init:
  - git config --global core.autocrlf input

install:
  - ps: Install-Product node 8 x64
  - git reset --hard HEAD
  - npm install
  - node --version

build_script:
  - npm run release

test: off

当上面的配置好了之后,我以为到此我就可以愉快的使用git push --tags来触发构建了,但是实际情况并不是那么如意,当我试过多次之后并没有触发构建,而是像一只死鱼一般寂静 :sad:
后来终于看到一篇文章《更简单地用Travis自动发布GitHub Releases》中提到:

要注意,如果此前设置过CI的分支限制,tags: true不会生效。 因为,对Travis来说,Tag也算是一种branch。

branches:
  only:
    - master

去掉以上代码块,否则自动发布将不会执行。

于是乎,我将travis-ci以及appveyor配置文件中的相关配置移除,再执行了一次git push --tags,果不其然,成功了!
关于在travis-ci以及appveyor条件构建遇到的坑

后记

关于持续构建是对于现在的软件编译发布必要的东西,它可以减少大量的重复性的工作而减少我们的工作量,所以未来我会将线上可以进行自动化构建服务全部都完成此操作,加油! :smile:

]]>
https://www.licoy.cn/3385.html/feed/ 3
基于Electron-Vue开发了一款图片采集器 https://www.licoy.cn/3376.html https://www.licoy.cn/3376.html#comments Thu, 12 Sep 2019 23:49:06 +0000 https://www.licoy.cn/?p=3376

前言

最近有在学习Electron,于是就想着做个什么东西,刚好看到吾爱破解论坛上有人发出了图片采集器,不过很遗憾只支持Windows,这适用人群就大大的打了折扣,灵机一动,自己动手丰衣足食,于是就诞生了这一款软件:pic-gather(原girls-reptile)
基于Electron-Vue开发了一款图片采集器

开源地址

Github:https://github.com/Licoy/pic-gather

Gitee:https://gitee.com/licoy/pic-gather

使用截图

macOS

基于Electron-Vue开发了一款图片采集器
基于Electron-Vue开发了一款图片采集器

Windows

基于Electron-Vue开发了一款图片采集器
基于Electron-Vue开发了一款图片采集器

使用说明

此项目仅供学习交流使用,请勿使用于商业及非法用途,若违反使用条例请自行承担相关后果。

资源说明

本程序所有资源均来自于互联网,若侵犯到您的权利,请到GitHub或Gitee仓库提交issue我们将核对完成第一时间删除相关内容。

后记

本次开发中可以说是一波三折,开发还是很快的,就是基于Travis-ci以及AppVeyor的自动化构建总是失败,导致花费了大量的时间,开发中参考了PicGO的作者写的相关Electron文章,写的都还是很清楚,可以说是很受益,大家点此查看相关文章,另外就是本软件若对您还是有帮助的话,记得点个小小的Star :grin:

]]>
https://www.licoy.cn/3376.html/feed/ 4
Docker开启RabbitMQ延时消息队列 https://www.licoy.cn/3361.html https://www.licoy.cn/3361.html#comments Wed, 07 Aug 2019 06:48:54 +0000 https://www.licoy.cn/?p=3361

前言

经常在开发中会遇到一些不需要同步执行的业务,那我们就需要用到消息队列来进行异步执行,但是对于某些业务就还需要用到延时的功能,比如订单支付超时关闭,那么这个时候我们就需要开启消息队列的延时功能,当然也有朋友说有其他的解决办法,例如:数据库轮训以及线程休眠,但是这些相对于延时消息队列来说,都显得比较逊色。
Docker开启RabbitMQ延时消息队列

正文

安装Docker

docker的安装就不用多说了,在Centos下就一行命令搞定(其他的系统版本请自行查阅):

yum update -y && yum install -y docker && service docker start

拉取RabbitMQ镜像并启动

docker pull rabbitmq:management

docker run -d --hostname my-rabbit --name rabbit -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=123456 -p 15672:15672 -p 5672:5672 -p 25672:25672 -p 61613:61613 -p 1883:1883 rabbitmq:management

上述命令中的RABBITMQ_DEFAULT_USER为默认用户,RABBITMQ_DEFAULT_PASS为默认密码,请自行修改即可

安装延时插件

首先先到rabbitmq官网下载自己rabbitmq对应版本的延时插件rabbitmq_delayed_message_exchange到服务端,我的是3.7.x,所以执行:

wget https://dl.bintray.com/rabbitmq/community-plugins/3.7.x/rabbitmq_delayed_message_exchange/rabbitmq_delayed_message_exchange-20171201-3.7.x.zip

下载完成之后我们将zip文件进行解压,然后我们执行docker ps查看自己的rabbitmq的容器ID:

[root@121 download]# docker ps
CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS              PORTS                                                                                                                                                         NAMES
c5e3d04e3141        rabbitmq:management   "docker-entrypoint..."   7 days ago          Up 7 days           4369/tcp, 0.0.0.0:1883->1883/tcp, 5671/tcp, 0.0.0.0:5672->5672/tcp, 0.0.0.0:15672->15672/tcp, 0.0.0.0:25672->25672/tcp, 0.0.0.0:61613->61613/tcp, 15671/tcp   rabbit

接着我们将插件拷贝到容器的插件目录下:

docker cp rabbitmq_delayed_message_exchange-20171201-3.7.x.ez c5e3d04e3141:/plugins
# c5e3d04e3141是自己的容器ID

然后我们进入到容器的bash中:

sudo docker exec -it c5e3d04e3141 /bin/bash

进入到plugins目录查看是否有rabbitmq_delayed_message_exchange-20171201-3.7.x.ez文件,有的话就说明成功拷贝到rabbitmq的插件目录了,接着我们就执行最后一步,开启插件:

root@my-rabbit:/plugins# rabbitmq-plugins enable rabbitmq_delayed_message_exchange
Enabling plugins on node rabbit@my-rabbit:
rabbitmq_delayed_message_exchange
The following plugins have been configured:
  rabbitmq_delayed_message_exchange
  rabbitmq_management
  rabbitmq_management_agent
  rabbitmq_web_dispatch
Applying plugin configuration to rabbit@my-rabbit...
The following plugins have been enabled:
  rabbitmq_delayed_message_exchange

started 1 plugins.

执行rabbitmq-plugins enable rabbitmq_delayed_message_exchange在log最后出现started 1 plugins.,就说明开启成功,退出rabbitmq的bash之后执行docker restart rabbit重启rabbitmq就可以使用延时消息队列来处理业务了。

后记

在以前的业务中我都是用的文章开头说的稍显逊色的做法来处理这种业务,但是这种方法显然是不可靠的,当然以前我不用消息队列的原因就是听着这个名字就觉得很难,后来真正用上了之后发现很好上手的,所以不能再事情未开始之前就给自己下了死刑,加油! :smile:

]]>
https://www.licoy.cn/3361.html/feed/ 12
憧憬点滴记忆联合华为云新手专享3500元福利红包发放 https://www.licoy.cn/3340.html https://www.licoy.cn/3340.html#comments Sat, 27 Jul 2019 03:28:38 +0000 https://www.licoy.cn/?p=3340

前言

在5G时代已经到来的今天,所有的服务都是基于云端控制,对于站长们而言更希望能够拥有性价比高的服务器,对于国内几大云服务器厂商之一华为云与憧憬点滴记忆联合推出新手专享3500元的福利红包,可以全场产品通用,速速看过来吧~
憧憬点滴记忆联合华为云新手专享3500元福利红包发放

详情

最新优惠

学生云服务器1h2G一年只需要99元,24岁以下还免认证,点我进入查看活动详情及购买

领取方式

点击「华为云新手专享红包」即可进入到活动详情页,注册登录账号即可领取,然后就可以开开心心的去够买自己心仪的云服务~

使用方式

1.去官网首页或活动导航栏选择需求商品进行选购
憧憬点滴记忆联合华为云新手专享3500元福利红包发放
2.在结算界面点击使用代金券,即可享受满减优惠,完成购买
憧憬点滴记忆联合华为云新手专享3500元福利红包发放

憧憬点滴记忆联合华为云新手专享3500元福利红包发放

产品评测

it之家:https://www.ithome.com/0/431/894.htm

中国日报网:https://baijiahao.baidu.com/s?id=1638481243441507914&wfr=spider&for=pc

产品帮助

华为云产品使用帮助:点我进入

]]>
https://www.licoy.cn/3340.html/feed/ 14
基于Vue+iView设计开发自适应管理后台UI https://www.licoy.cn/3316.html https://www.licoy.cn/3316.html#comments Mon, 15 Jul 2019 06:09:33 +0000 https://www.licoy.cn/?p=3316

前言

这段时日在项目中有个需求,后台管理站点是需要PC端与移动端自适应,对于以往的惯例是直接在素材网找Bootstrap的后台管理模板,然后再进行嵌套开发,但是由于Bootstrap的后台管理模板一般都是基于jQuery的,需要异步加载数据这就要直接做大量的DOM操作,这一点对于我现在的开发模式是比较排斥的,由于我现在的管理后台全部都是Vue+iView的,所有就去看了看iView可能支持自适应不,果不其然,官方是给出了自适应栅格布局的方案,这让我内心一阵窃喜 :grin: (以前没太注意看这个布局底部还有这个东西~)

正文

首先我们看到在iView的栅格 Grid中预设六个响应尺寸,分别是:xssmmdlgxlxxl,由于我设计的后台管理的菜单在992px下菜单就展示不太友好,需要变换方式,所以一般只设置到lg这一层尺寸就可以了,然后在其主内容布局中也要用栅格自适应来进行开发,这样才能够保证移动端和PC端的样式兼容,不然容易产生页面错位。

特别需要值得注意的一点是,引入了iView之后,body的style样式会莫名其妙的出现一个overflow:hidden,这样会导致我们移动端无法进行滑动,所以我们只需要在样式表中添加如下样式即可:

body{
    overflow: auto !important;
}

大致的设计开发就是这样的,其实官方也是参考Bootstrap的,只要有一些自适应开发基础的小伙伴就可以完全快速上手,以下是我自己设计的一套后台管理模板,欢迎大家给我提供更多的建议!

PC端

基于Vue+iView设计开发自适应管理后台UI

移动端

基于Vue+iView设计开发自适应管理后台UI

项目地址

Github:https://github.com/Licoy/visamt

后记

非专业前端,还请大佬多指教指教,谢谢! :mrgreen:

]]>
https://www.licoy.cn/3316.html/feed/ 2
首款宝塔插件「域名解析助手」已发布 https://www.licoy.cn/3308.html https://www.licoy.cn/3308.html#comments Mon, 29 Apr 2019 12:00:51 +0000 https://www.licoy.cn/?p=3308

前言

前段时间在使用宝塔的时候,将版本更新至最新版之后原本的「软件管理」变成了「软件商店」,于是乎带着好奇心点进去发现多出了一个「第三方应用」,才知道原来宝塔推出了开发者平台,官方还有激励机制,于是乎就着手开始写了第一款插件,也就是今天的主角「域名解析助手」。
首款宝塔插件「域名解析助手」已发布

介绍

「域名解析助手」是一个什么东西呢?顾名思义肯定是与域名解析相关的,其实「域名解析助手」是一个超融合的域名解析集合,目前支持Aliyun/DnsPod/CloudFlare的域名解析,可以直接在宝塔后台配置好相关DNS商的API密钥参数,直接在宝塔进行域名解析的增删改查,从此再也不用登录多家管理平台去一一管理了~ :smile:

安装方法

登入最新版宝塔,打开「软件商店」-「第三方应用」选择「域名解析助手」购买即可,月付仅需3.99元,是不是便宜到家了 :grin:

API密钥获取

阿里云

https://ak-console.aliyun.com/index#/accesskey

DnsPod

https://www.dnspod.cn/User/Security

CloudFlare

登录CloudFlare之后点击头像进入「My Profile」,下滑到最底端「API Keys」中的「Global API Key」就是密钥参数

售后支持

在购买插件之后您可以选择加入售后QQ群:515497983,第一时间获得最方便快捷的售后服务支持!

]]>
https://www.licoy.cn/3308.html/feed/ 14
微信小程序+Java获取用户授权手机号码 https://www.licoy.cn/3298.html https://www.licoy.cn/3298.html#comments Fri, 29 Mar 2019 02:52:02 +0000 https://www.licoy.cn/?p=3298

前言

小程序内可以直接通过授权获取用户微信号绑定的手机号码或用户添加的其他手机号码,这样可以使得小程序在进行账户的身份可控上又提高了一步,那么应该如何来获取手机号码呢?这篇文章就和大家一起来研究一下。
微信小程序+Java获取用户授权手机号码

前提

值得注意的是,如果您要获取手机号码首先要满足如下要求:

注意:目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。 - 微信开发平台

正文

获取授权信息

首先,我们需要使用button组件,其open-type的值要设置为getPhoneNumber,可参考button · 小程序,然后绑定bindgetphonenumber的回调函数,在用户点击按钮,弹起的授权框允许授权之后回调函数内会返回一个event的对象,在其对象的detail下分别存在两个值(可参考《获取手机号 · 小程序》):

参数 类型 说明
encryptedData String 包括敏感数据在内的完整用户信息的加密数据
iv String 加密算法的初始向量

接下来我们要模拟一次登录,调用wx.login,然后再授权成功的回调中获取授权code值,接着将上述的encryptedDataiv一并传送至服务端,接下来就开始进行服务端解密过程。

服务端解密

服务端接收到encryptedDataivcode值之后,进行微信授权登录一次,接口可参考:《code2Session · 小程序》,然后我们需要获取返回值中的session_key字段,即为会话秘钥。

在微信《开放数据校验与解密 · 小程序》中提供了多种编程语言的示例代码,但是就是没有Java的,不知道是不是微信团队从来不写Java :evil: ,于是我们就自己实现了一个WXBizDataCrypt,具体实现如下:

public class WXBizDataCrypt {

    private String appid;

    private String sessionKey;

    public WXBizDataCrypt(String appid, String sessionKey)
    {
        this.appid = appid;
        this.sessionKey = sessionKey;
    }

    public JSONObject decryptData(String encryptedData, String iv) throws Exception{
        byte[] dataByte = Base64.decodeBase64(encryptedData);
        // 加密秘钥
        byte[] keyByte = Base64.decodeBase64(this.sessionKey);
        // 偏移量
        byte[] ivByte = Base64.decodeBase64(iv);
        try {
            // 如果密钥不足16位,那么就补足.  这个if 中的内容很重要
            int base = 16;
            if (keyByte.length % base != 0) {
                int groups = keyByte.length / base + (keyByte.length % base != 0 ? 1 : 0);
                byte[] temp = new byte[groups * base];
                Arrays.fill(temp, (byte) 0);
                System.arraycopy(keyByte, 0, temp, 0, keyByte.length);
                keyByte = temp;
            }
            // 初始化
            // 初始化
            Security.addProvider(new BouncyCastleProvider());
            Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
            SecretKeySpec spec = new SecretKeySpec(keyByte, "AES");
            AlgorithmParameters parameters = AlgorithmParameters.getInstance("AES");
            parameters.init(new IvParameterSpec(ivByte));
            cipher.init(Cipher.DECRYPT_MODE, spec, parameters);// 初始化
            byte[] resultByte = cipher.doFinal(dataByte);
            if (null != resultByte && resultByte.length > 0) {
                String result = new String(resultByte, "UTF-8");
                return JSONObject.parseObject(result);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

}

上述代码中并没有实现签名效验的相关业务,可自行实现

首先我们需要创建WXBizDataCrypt的实体,传入小程序的appid与我们获取的session_key,然后再调用decryptData方法传入encryptedDataiv即可进行解密,如果返回的值为NULL或抛出异常则为解密失败,解密成功之后可以获取返回对象的countryCode以及purePhoneNumber组成完整的含区号的手机号码。

后记

在微信开放的相关开放接口中,对于用户的隐私数据这一块处理都是需要效验解密的,当然这一点也是为了数据安全,不过不得不吐槽有时候官方的文档真的是写的让人摸不着头脑,比如微信支付中的timestamptimeStamp :arrow:

]]>
https://www.licoy.cn/3298.html/feed/ 10
PHP7在Linux下开启配置使用MongoDB https://www.licoy.cn/3288.html https://www.licoy.cn/3288.html#comments Tue, 12 Mar 2019 08:42:52 +0000 https://www.licoy.cn/?p=3288 前言

近段时间在项目中有需求用到了MogonDB,实际项目是采用的Java,但是为了方便快速的实现Demo,我就采用了PHP7.1来进行实现,由于官方的PHP没有MongoDB的依赖包,所以我们需要手动来进行编译安装开启MongoDB。

PHP7在Linux下开启配置使用MongoDB

正文

首先我们需要先下载MongoDB的依赖包,依赖包大家可以到https://pecl.php.net/package/mongodb上进行查找,这里我们使用1.5.3的版本进行操作。

wget https://pecl.php.net/get/mongodb-1.5.3.tgz # 下载依赖包
tar -zxvf mongodb-1.5.3.tgz # 解压依赖包
cd mongodb-1.5.3

上面我们已经完成了依赖包的下载与解压,接下来我们再进行侦测环境以及生成配置文件和编译安装。

phpize
./configure --with-php-config=/usr/bin/php7/php-config
make && make install # 编译并安装

到这一步我们就已经完成了MongoDB的依赖包的编译安装,接下来我们再php.ini中引入重载配置即可。

extension=mongo.so # 将此配置添加到php.ini中即可

尾记

其实使用PHP的来完成一些快速开发还是挺快的,在一定的情况下不用多余的操作就可以保证其开发及运行效率,SO...我再考虑以后要不要多多使用PHP了,拜了个拜。

]]>
https://www.licoy.cn/3288.html/feed/ 12
随谈之我的二零一八年 https://www.licoy.cn/3275.html https://www.licoy.cn/3275.html#comments Sat, 02 Feb 2019 12:51:12 +0000 https://www.licoy.cn/?p=3275 引言

“半盏屠苏犹未举,灯前小草写桃符”

今日是戊戌年(2019年)的腊月廿八,距离新春的到来也不过两日之久,个人也在次祝各位来访朋友新春快乐!
随谈之我的二零一八年

之初愿

在去年距今日两日之矣,我总结了过去的2017年,那是的我还算是一个初出茅庐的小子吧,对于整个社会的所闻所问都相知甚少,所以才会有了当时的一系列莽撞的行为以及令自己不那么愉快的后果,但“塞翁失马,焉知非福”,我也从中深刻的得到很多的阅历,才能够使得18年变得更加丰富。

之经验

先谈谈工作吧,18年的年初我跳槽去了一家医疗公司,当然我的职业还是不变,依旧是“扫(cheng)地(xu)僧(yuan)”,相对于现在所在的公司,算得上是我的工作中相对较好的一家公司,毕竟我也没工作的那么久。

在这一年中,我利于自己的充裕的休闲时间,开源了几款自己所作的框架以及插件,其中包括“watchdog-framework”、“wepy-com-loadings”、“encrypt-body-spring-boot-starter”等各类别的小东西,这些大家可以到我的GiteeGithub主页看见,至于为什么说是小东西呢?因为本身也不是让人眼前一亮的东西,所以就是小东西喽。

之随缘

在我这个20出头的年龄,相信对于同龄人的你能够感同身受的一点就是“迷茫”,我们亦然不知道到底所想的什么,规划的两三四五年的计划却迟迟没有按照它的脚步迈去,反而愈来愈背道而驰,不过一切也不都是那么不如意,生活往往在你快要失去信心的时候给你一点苗头,让你看到这个世界未曾像想象中的那么美好,但是也没有想象中的那么残酷,凡事都要经过自己内心的千锤百炼方可看到下一束黎明。

之未来

19年又是崭新的一个年头,决不能荒废,举个栗子:

  • 强身健体,每周至少三次打卡
  • 阅读20本书籍,包括但不限于心理学/文学/专业技术性的书籍
  • 入手一台Macbook Pro 15寸
  • 入手一台单反相机
  • 坚持提高英语水平
  • 结识更多志同道合的朋友
  • 继续自己的事业,有期望两年赚到人生的第一桶金
  • more...

尾记

因为是随谈,所以并没有写的过多,另外夜已深,我相信你会来看我的文章,晚安。

]]>
https://www.licoy.cn/3275.html/feed/ 21
微信小程序基于Wepy开发全局消息通知 https://www.licoy.cn/3266.html https://www.licoy.cn/3266.html#comments Tue, 25 Dec 2018 13:11:35 +0000 https://www.licoy.cn/?p=3266 前言

时光荏苒,今天上到博客看着断更了的11月的博客,总感觉少了点什么,这么久没有写文章,无疑有一种断枝残柳的感觉;

博主最近一直在搞IM方面的业务,当然客户端主要是微信小程序,相信这个时候你一定有这个想法一闪而过:“微信本身都是一个即时沟通软件了,这么做不是多此一举吗?”,其原因在于如果两个用户不加好友那么就无法进行微信对话的,而小程序不同,只要用户访问进来我就可以与他发起对话,这样做主要是为了促进更进一步的沟通。
微信小程序基于Wepy开发全局消息通知

正文

首先我们需要进行WebSocket的会话连接,相关开发文档可以查阅微信官方(点我查看),这里我就不做基本的连接重连等相关Socket机制讲解,我们主要说说在小程序进行全局的消息监听与通知的一个思路与实现。

在这里我的思路是这样的:Socket连接对象放入到小程序App的全局Global数据中,当进入到页面的时候,引入封装好的mixins,然后进行通知的事件注册,然后引入相关通知的组件,就可以实现全局消息通知的这样一个需求,实际上是很简单的。

比如,我们先在mixins内封装一些基本方法:

//获取websocket连接
ws(){
    return wepy.$instance.global.ws;
}

下面是一个通知调用的方法,每个项目的业务逻辑不同,可做适当的调整

/**
 * 系统通知
 * @param {String} content 通知消息内容
 * @param {String} from 触发者名称
 * @param {String} go 点击跳转至
 * @param {String} type 通知类型
 * @param {Integer} showtime 显示时长
 */
wsNotify(content,from,go,type='chat',showtime=5){
    if(this.wsData.wsTipsTimeoutEvent!=null){
        clearTimeout(this.wsData.wsTipsTimeoutEvent)
    }
    let times = showtime * 1000;
    let timeoutCall = setTimeout(()=>{
        this.wsData.tipShow = false;
        this.wsData.wsTipsTimeoutEvent = null;
        this.$apply();
    },times);
    this.wsData = {
        tipShow:true,tipData:content,type:type,from:from,wsTipsTimeoutEvent:timeoutCall,go:go
    }
    wx.vibrateLong({}) //振动
    this.$apply()
}

这里我分享一个我封装的通知弹窗组件

<template>
    <view class="ws-notify {{ws.tipShow ? 'ws-notify-show':''}}">
        <view class='ws-notify-body'>
            <van-row>
                <van-col @tap="goDetail" span='3'><i class='iconfont ico'>&#xe759;</i></van-col>
                <van-col @tap="goDetail" span='20'>
                    <view>{{ws.from}}</view>
                    <view>{{ws.tipData}}</view>
                </van-col>
                <van-col span='1' @tap="close"><i class='iconfont ico-close'>&#xe624;</i></van-col>
            </van-row>
        </view>
    </view>
</template>
<script>
import wepy from 'wepy';
export default class WsNotify extends wepy.component {
    props = {
        ws:{
            type:Object,
            twoWay: true
        }
    }
    methods = {
        close(){
            this.ws.tipShow = false;
            clearTimeout(this.ws.wsTipsTimeoutEvent);
            this.ws.wsTipsTimeoutEvent = null;
        },
        goDetail(){
            wx.navigateTo({
                url:this.ws.go
            })
        }
    }
}
</script>
<style lang="less">
.ws-notify{
    position:fixed;
    top:20rpx;
    z-index:99999;
    width:100%;
    opacity: 0;
	-webkit-transform: translateZ(0) translateY(-100%);
    transition: all .4s ease-in-out;
    align-items: baseline;
    .ws-notify-body{
        min-height: 70rpx;
        width:90%;
        border-radius: 15rpx;
        background-color: #fff;
        color:#495060;
        border:1rpx solid #495060;
        font-size: 26rpx;
        margin:0 auto;
        padding:20rpx;
        line-height: 40rpx;
        i.ico,i.ico-close{
            color:#495060;
            font-size: 60rpx;
            line-height: 80rpx;
        }
        i.ico-close{
            font-size: 30rpx;
        }
    }
    &.ws-notify-show{
        -webkit-transform:translateZ(0) translateY(0);
        opacity:1;
    }
}
</style>

这里上面就是一些核心的基本功能,再进入一个小程序页面的时候,引入对应的组件并调用,然后在onShow的方法内进行事件监听注册,例如新消息的cmd为11,则为:

<wsNotify :ws.sync="wsData" @close.user="wsOnCloseNotify"/>

this.ws().listen('11',(res)=>{
    this.wsNotify('您有一条新的聊天信息,点我查看!',res.extras.username, 
    '/pages/cards/chat?id='+res.from)
})

到这一步,基本的功能就已经实现了,本文主要是讲解一个思路,其实现方法请根据项目的业务进行调整。

后记

2018年还剩下最后一周不到的时间,在这里提前恭祝大家新年快乐!

]]>
https://www.licoy.cn/3266.html/feed/ 15