经常有朋友问起，如何在IM即时通讯中实现发送图片、视频、语音和表情？ 为此，小编特意写了一个vue版本的Demo，实现了图片视频文件和表情的的发送，参考这个Demo源代码，相信你就可以轻松的用Uniapp和小程序完成类似的功能。 [图片] 本文的Demo全套的源码已经开源在码云上，供大家clone或者下载：https://gitee.com/goeasy-io/GoEasyDemo-vue-AudioPictureVideo 一、图片/视频/语音发送 对于语音、视频和图片的发送，您如果有注意的话，在使用QQ或者微信的时候，当有朋友发送图片和视频给您时，收到后，需要等一会儿才能显示出来。就是因为在发送的时候，只发送了文件的路径，您收到后，需要加载才能显示出来。因为当前主流的IM包括微信，QQ等对于图片和视频的发送，通常的做法都是： 上传文件到文件服务器 推送文件路径 收到文件路径 加载文件 并不会通过网络直接传送源文件，因为对于大文件的传输，会影响消息的即时性。 对于文件的上传，您可以选择直接上传到您自己的服务器，也可以选择上传到各种云服务的对象存储服务，也就是OSS上。 参考源码: [代码]DemoService.prototype.sendFileMessage = function (type,content) { let uploadResult = restapi.uploadFile(content); let message = new Message(type, uploadResult.url); uploadResult.promise.then(() => { this.publish(message); },() => { var error = new Message(MessageType.TEXT, "文件上传失败."); this.messages.unshift(error) }); return uploadResult.promise; }; [代码] 云服务的OSS具有更好的稳定性和高可用性，上传的速度也有保证，另外也可以和CDN配合，所以我们建议用GoEasy配合OSS服务来实现图片和视频的发送。 在本文的源码里，选择了使用阿里云的OSS作为文件上传服务器，您也可以切换为您自己实现的文件上传服务器，或者选择其他云服务的OSS，原理都是一样的。 二、发送表情 表情的发送也是非常简单的，只是对于一些第一次实现表情发送的同学来说，需要一个思路而已。 细心点的朋友，肯定有发现，当我们在QQ上聊天的时候，我们输入一个反斜杠+“cy”， 就像这样：/cy ，QQ就会立即显示为一个呲牙的表情，就像下图一样： [图片] 哈哈哈，相信你已经心里已经明白了十之八九了，对吧？ 没错，表情在发送的过程中其实就是发一个像“/cy”这样定义好的的字符串，在对方收到后“翻译”成表情而已。 那为什么不直接发图片，而要进行这么复杂的“翻译”呢？ 因为字符串比图片更小，发送的速度更快，用户体验更好。一个系统中的用户成千上万，用字符串可以节约大量的带宽，节约系统资源。 原理讲明白了，我们就开始干活儿吧： 第一步、定义表情 定义一个key value的对象，key作为表情标签，value则为每个表情标签对应的图片： [代码]let expressions = { "[risus]": './images/risus.png', "[kiss]": './images/kiss.png', "[cry]": './images/cry.png', "[die]": './images/die.png', "[anger]": './images/anger.png', } [代码] 然后画一个表情选择的界面： [图片] 第二步、选择表情 为每个图片的onclick事件中传入这个表情的字符串标签，当用户点击的时候，将表情的标签写入输入框，就成为了一个普通的字符串。在发送的时候，发送的其实就是这个表情的标签，也就是一个字符串。 [代码]<div class="goeasy-expression"> <div :class="[appearanceClass, 'goeasy-appearance']" @click="show = true">{{text}}</div> <div class="expression-container" v-show="show"> <div class="expression-icon-content"> <div class="expression-icon__item" v-for="expression in list" :key="expression.id" @click="selectExpression(expression)"> <img :src="expressions[expression.tag]"> </div> </div> <div class="close-expression" @click="show = false"></div> </div> </div> [代码] 第三步、收到表情和展示表情 当对方收到一个字符串后，跟第一步定义的key-value列表去匹配，如果能找到对应的表情，就在页面上展示对应的表情图片，如果找不到，就是一个普通的文本信息。 原理讲清楚了后，具体实现是不是很简单了？ 参考我们提供的Demo源代码，相信你很快就能掌握实现方法。 Demo源码：https://gitee.com/goeasy-io/GoEasyDemo-vue-AudioPictureVideo GoEasy系列教程： 搭建websocket消息推送服务，必须要考虑的几个问题 websocket IM聊天教程-教你用GoEasy快速实现IM聊天 Websocket直播间聊天室教程-GoEasy快速实现聊天室 微信小程序使用GoEasy实现websocket实时通讯 Uniapp使用GoEasy实现websocket实时通讯 IM聊天教程:发送图片/视频/语音/表情

可能已经有不少静态网站的教程了，但这次拎包哥带来最核心的东西，花最少的时间，有最大的享受！ 跟着我走，半小时内收获（白嫖）自己的免费网址！ 1.登录腾讯云 - 云产品 - 云开发cloudbase [图片] 2.点击新建环境 - 创建 - 按量计费 - 开启免费资源 因为只能有一个免费环境，所以千万不要先开通免费的包年包月环境（预付费）环境。 如果真的手残开通了，又没有怎么用这个免费的包年包月的话，可以选择注销（7天隔离期过后可以注销环境），再开通。[图片] 3.点击你新建的环境 - 静态网站托管 - 开通静态网站托管 [图片] 4.静态网站托管 - 上传文件 - 上传你的index.html文件 [图片] 5.静态网站托管 - 基础配置 - 默认域名 点击这个网址，你就会看到你刚上传的index.html里的内容。 不用漫长的3个月备案，你已经有一条属于自己的专属域名。虽然下行速度仅100KB/S， 但对于开放平台里的第三方平台的官网演示（官方，只有你才会看的）和平时自己的HTML XJB玩玩已经差不多ok了。 [图片] 6.这些都是基础中的基础，后面的大家慢慢玩我就不写了，因为不能即抄即用真的没人点赞。 是不是很阔以？ [图片] =================end===================

在开发过程中，有时候需要监听小程序的页面某些生命周期，并进行相应的处理，如果只是单个页面处理还好操作，涉及到多个页面需要同样的操作，就会需要写重复代码，我们可以通过监听页面的生命周期来进行相应统一的操作。 1.创建一个js文件 写入如下代码 (function() { function d(t, a) { if (t[a]) { var s = t[a]; t[a] = function(b) { d2(this, a, b); if (a == "onShareAppMessage") { //需要注意的是 如果是分享的方法 直接调用return来进行分享 return s.call(this, b); } else { s.call(this, b); } } } else { if (a != "onShareAppMessage") { // 如页面未设置分享 不添加分享方法 t[a] = function(b) { d2(this, a); } } } } function d2(page, a, b) { //这里可以处理我们实际的业务 if (a == "onShow") { } else if (a == "onLoad") { } else if (a == "onHide") { } else if (a == "onReachBottom") { } else if (a == "onPullDownRefresh") { } else if (a == "onShareAppMessage") { } } var J = Page; Page = function(t) { d(t, "onShow"); d(t, "onHide"); d(t, "onLoad"); d(t, "onReachBottom"); d(t, "onPullDownRefresh"); d(t, "onShareAppMessage"); J(t) } })() 2.在app.js引入此文件即可 无需其他操作 当然 App.js的生命周期监听同理 写的不好 大家见谅 如果你觉得有用 麻烦点个赞

背景介绍 最近有不少朋友咨询我在线答题小程序的数据库集合设计，现专门写文整理下，该小程序目前包含以下十个集合 数据库设计 admin 该集合主要用于指定管理员openid，对于部分openid开放创建试卷以及数据报表导入、导出等功能 category 该集合主要用于设置题目分类，也就是所谓的题库信息，比如语文、数学、英语 depts 该集合主要面向企业用户，维护企业部门信息词典 favor 该集合用于设置题目收藏记录信息 history 该集合主要用于用于记录考试时间、考试得分，考生信息 mediatype 该集合作为素材字典定义，比如文本、图片 notes 该集合主要用于记录错题记录 profiles 该集合主要用于记录用户信息，比如openid、昵称、头像以及个人相关信息 question 该集合主要用于题目信息，题目的结构本文不做介绍 questype 该集合用于维护题目类型字典，比如单选、多选、判断、填空、简答 [图片] 该小程序题目组织为一级结构，也就是所谓的一级分类，类别下面直接是题目信息，不存在二级分类 后续计划 后面会写两篇文章，第一篇文章介绍二级分类的在线答题小程序，第二篇文章为会员邀请制在线答题小程序的数据库设计 在线答题小程序邀请码设计? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/0004ec55980978dce7f99896153413 备注 后面我有时间慢慢维护，这个文章 扫码体验 [图片]

引言：基于第三方Nodemailer可以实现使用云函数来发送邮件。在开发过程中使用发送邮件，一般使用场景是用来用户注册账号，更改密码等其它验证。 1.开发准备1.1邮箱已注册成功的QQ邮箱、网易邮箱等； 1.2Nodemailer功能零依赖性的单个模块–由于没有死角，因此代码易于审核高度重视安全性，没有人喜欢RCE漏洞Unicode支持使用任何字符，包括表情符号💪Windows支持 –您可以使用安装npm在Windows上，与其他模块一样，没有编译的依赖项。从Azure或Windows盒子免费使用它使用HTML内容以及纯文本替代加 附件 到消息嵌入式的 HTML内容的图像附件–您的设计不会被阻塞使用TLS / STARTTLS的安全电子邮件传递不同 运输方式 除了内置 SMTP支持与签署消息 DKIM自订 插件支持 用于处理消息桑 OAuth2 认证方式代理人 用于SMTP连接ES6代码 –由于var的提升，不再有意外的内存泄漏自动生成来自的电子邮件测试帐户电子邮件Nodemailer技术文档：https://nodemailer.com/about/ 2.开启SMTP服务，获取邮箱授权码授权码在发送邮件时需要使用，以下为QQ邮箱和网易邮箱获取授权码的详细步骤，授权码的具体使用会在代码模块详细介绍； 2.1获取QQ邮箱授权码登录QQ邮箱网页版，按照以下步骤获取授权码： 1.在首页找到设置     [图片] 2.选择账户 [图片] 3.在账户页面向下滚动找到此选项，点击开启服务 [图片] 4.在弹出页面，按照步骤发送信息 [图片] 5.发送成功后即可获得授权码：xxxxxxxxxxxxxx 2.2.获取网易邮箱授权码登录网易邮箱网页版，按照以下步骤获取授权码： 1.在首页找到设置，在下拉框选择POP3/SMTP/IMAP [图片] 2.在此页面点击开启     [图片] 3.在弹出页面，按照步骤发送信息        [图片] 4.发送成功后即可获得授权码：xxxxxxxxxxxxxxx 3.使用小程序云函数发送邮件3.1配置依赖 在微信开发者工具中，新建一个云函数sendEmail，在云函数的package.json配置nodemailer最新版本的依赖，并右键云函数目录选择在终端中打开输入命令npm install安装依赖 "dependencies": {   "nodemailer": "latest" } 3.2编写代码以网易邮箱为例，在index.js里编写以下代码，在开发使用过程中根据自己的情况更改参数即可，如： @parameter host：SMTP服务器地址；@parameter port：端口号，通常为465，587，994，不同的邮件客户端端口号可能不一样；@parameter auth user：邮箱账号，填写已开启SMTP服务的邮箱地址即可； pass：邮箱密码，不同的邮件系统可能机制不一样，QQ邮箱和网易邮箱为邮箱授权码； @parameter message from：填写发件邮箱地址； to：填写收件方的邮箱地址； nodemailer支持发送text文字内容、html网页内容以及附件的形式；const cloud = require('wx-server-sdk') cloud.init({     env: cloud.DYNAMIC_CURRENT_ENV, }) exports.main = async (event, context) => {   const nodemailer = require("nodemailer");   let sendEmail = nodemailer.createTransport({        host: "smtp.163.com", //SMTP服务器地址        port: 465, //端口号，通常为465，587，994，不同的邮件客户端端口号可能不一样        secure: true, //如果端口是465，就为true;如果是其它就填false        auth: {             user: "xxxxxxxx@163.com",  //邮箱账号，填写已开启SMTP服务的邮箱地址即可             pass: "xxxxxxxxx"   //邮箱密码，不同的邮件系统可能机制不一样，QQ邮箱和网易邮箱为邮箱授权码    }   });       let message = {          from: 'xxxxxxxx@163.com',   //填写发件邮箱地址          to: 'xxxxxxx@qq.com',  //填写收件方的邮箱地址        subject: '这是我发送的第一封邮件',           text: 'Hello world?',  //text纯文字         html: '<b>Hello world?</b>', //html代码   };      let res = await sendEmail.sendMail(message);     return res; } 3.3云函数的简单调用云函数编写完成，并右键云函数目录选择上传并部署所有文件，待部署完成即可使用 wxml页面代码： <button bindtap="sendEmail">点击发送邮件</button> js调用云函数： sendEmail({     wx.cloud.callFunction({       name:"sendEmail",     }).then(res => {       console.log("邮件发送成功",res)     }).catch(err => {       console.log("邮件发送失败",err)     })   }, 成功执行，可在收件邮箱中查看到邮件： [图片] 4.云函数发送邮箱的扩展本文主要介绍使用云函数来发送邮件的功能，虽然文中代码以网易邮箱为例，但在自己使用过程中可以灵活的改变参数以达到自己的需求。 且在实际开发过程中，可根据自己的需求来控制发送邮件的过程和流程，如果有什么不懂的问题可以查看官方文档，也可以私信本人（微信：ZW190308）

民宿小程序开发系列一 谈谈开发的波折 经过半年的闭关开发，民宿小程序正式对外发布上线，我谈下做这个小程序的感受 第一点：由于我之前对酒店旅游民宿这种产品缺乏相关的业务经验，小程序主体逻辑结构几经改版，依次经过以下几种设计方案 1、酒店=>套餐 2、酒店=>套餐=>房间 3、酒店=>房间=>套餐 最后终于定下来了， 接近半年时间，我的周末是跟合伙人在星巴克度过的，蹭网蹭糖，我喜欢吃星巴克的颗粒包装的糖，撕开就往嘴里抿的那种，到了夏天，特别是午后四五点钟，抬头望天空，虽然阳光很刺眼，但是星巴克的空调不受控制的温度放的很低，每次去都要带上母后给我手工缝制的厚棉袄，才能熬过去这种冷气 第二点，关于支付，我也算摸着石头过河，也是中间做过一次大的迭代优化，这个在我的文章单独写过 小程序支付逻辑梳理? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000ae8b299c828acfe6a2607c5b813 1 由于采用了小程序云开发，所以没有一个业务后台，对合伙人来说非常不方便，所以云开发CMS一推出，我便是第一批用户， 现在整个云开发CMS后台都已配置完成，遇到了几个问题，但是总体能满足日常运营需要 云开发内容管理系统CMS使用初体验二? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000064ba07cd28cceb6ab908e52013 后面会出该系列的第二篇文章，具体讲解，民宿小程序 数据库业务设计，算是给这段时间的一个总结，因为整个小程序业务非常重，整体都是由我一人完成，没有文档的话，基本就是那种写完代码就忘，每次都要看代码会议的状态，累~~~ 2 3