uni-app

Websocket直播间聊天室教程

爷,独闯天下 提交于 2020-04-22 14:26:55
最近两年直播那个火啊,真的是无法形容!经常有朋友问起,我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢? 今天小编就手把手的教你用GoEasy做一个聊天室,当然也可以用于直播间内的互动。全套源码已经开源,git地址: https://gitee.com/goeasy-io/GoEasyDemo-Live-Chatroom.git 本教程主要目的是为大家介绍实现思路,为了确保本教程能帮助到使用不同前端技术的朋友,采用了HTML + JQuery的方式,后续还会推出Uniapp(vue/nvue)和小程序版本,大家可以持续关注。 我们这次要实现的聊天室,有两个界面,分别是: 登录界面 聊天室界面 登录 对于登录界面,我们期望: 用户可以输入自己的昵称 用户可以选择自己喜欢的头像 用户可以选择进入不同的聊天室(直播间) 实现步骤 登录界面的实现,不用多说,因为真的是So Easy! 一个简单的界面,只包含三个简单的逻辑: 验证是否输入昵称 验证是否选择一个头像 根据选择进入相应的聊天室 下边重点讲一下聊天室的实现。 聊天室(直播间) 当我们进入一个聊天室后,我们期望: 用户能看到当前有多少用户在线,这个数字能够实时的更新 用户能看到当前在线用户们的头像,而且能够实时的更新 如果有用户进入或离开聊天室 a. 聊天室会有“XXX进来了"或"XXX离开了"的提示 b.

uniapp安卓ios百度人脸识别、活体检测、人脸采集APP原生插件

自闭症网瘾萝莉.ら 提交于 2020-04-22 03:49:15
<font color=red>插件亮点</font> <font color=red>1 支持安卓平板(横竖屏均可),苹果的iPad。2 颜色图片均可更换。</font> 特别提醒 此插件包含 android 端和 iOS 端,考虑到有些同学只做其中一个端的 app,特意分为 2 个插件,减小安装包体积。 android 端请点击这里 。 iOS 端请点击这里 。 <u>1、前言</u> 最近在使用 uniapp 开发项目,有刷脸实名认证的需求,最终使用百度人脸识别实现了需求。自己做了个 APP 原生插件,给大家介绍下用法。本插件主要功能是通过动作检测活体,采集人脸返回。其他功能需要自主实现,如刷脸登录,实名认证等。 <u>2、包名及签名证书准备</u> 包名安卓和 iOS 可填写一样的:com.longyoung.baidudemo(一般用反域名,如我的域名:www.longyong.com)。<font color=red>注意:uniapp 打包或者打基座要用这个包名。</font>申请百度授权文件,需要用到安卓签名证书的 md5,如果你们公司有原生开发团队,问他们要即可。没有的话,自己生成一个签名证书并获取它的 md5, 点击查看方法 。<font color=red>注意:uniapp 打包或者打基座要用这个签名证书。</font> <u>3、百度官方资料准备</u>

微信小程序工程化探索之webpack实战

霸气de小男生 提交于 2020-04-21 05:15:05
前言 微信小程序因为其便捷的使用方式,以极快的速度传播开来吸引了大量的使用者。市场需求急剧增加的情况下,每家互联网企业都想一尝甜头,因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能。但小程序开发当中总有一些不便一直让开发者诟病不已,主要表现在: 初期缺乏方便的npm包管理机制(现阶段确实可以使用npm包,但是操作确实不便) 不能使用预编译语言处理样式 无法通过脚本命令切换不同的开发环境,需手动修改对应环境所需配置(常规项目至少具备开发与生产环境) 无法将规范检查工具结合到项目工程中(诸如EsLint、StyleLint的使用) 有了不少的问题之后,我开始思考如何将现代的工程化技术与小程序相结合。初期在社区中查阅资料时,许多前辈都基于gulp去做了不少实践,对于小程序这种多页应用来说gulp的流式工作方式似乎更加方便。在实际的实践过后,我不太满意应用gulp这一方案,所以我转向了对webpack的实践探索。我认为选择webpack作为工程化的支持,尽管它相对gulp更难实现,但在未来的发展中一定会有非凡的效果, 实践 我们先不考虑预编译、规范等等较为复杂的问题,我们的第一个目标是如何应用webpack将源代码文件夹下的文件输出到目标文件夹当中,接下来我们就一步步来创建这个工程项目: /* 创建项目 */ $ mkdir wxmp-base $ cd ./wxmp-base

uni-app中 document 替换实现

假装没事ソ 提交于 2020-04-20 03:01:17
目标:实现一个 点击目标区域展示对应内容 因为手机端没有 document对象,那只能通过绑定class配合三目运算符实现。实现 <view class="dream_data_li" v-for="(item,index) of list" :key="index"> <label class="name">梦到:  {{item.title}}</label> <label class="value">{{item.desc}}<label class="more" @click="fun_show_more(item)">更多...</label></label> <view :id="'ID'+item.id" class="desc" v-bind:class="[(sel_ID==item.id) ? 'showdesc' : '']"> {{item.all}} </view> </view> <style> .dream_data_li>.desc { /* margin-left: 120px; */ display: none; font-size: 14px; padding-right: 10px; background-color: #cdffc1; padding: 5px; box-shadow: 10px 10px 10px #cacaca;

使用uni-app获取微信小程序openid--Java后端实现

本小妞迷上赌 提交于 2020-04-14 23:45:05
【推荐阅读】微服务还能火多久?>>> 前言 这个是纯前端(uniapp)获取openid的: https://my.oschina.net/u/4284277/blog/3168782 但是这个有一个问题就是小程序正式上线后无法拿到openid,所以更新了下面这个后端(Java)获取的,希望对你有帮助。 一、 介绍openid 微信开发时, 用户使用小程序需要授权, 这时就要用到openid进行绑定这个用户。 openid是微信用户在公众号appid下的唯一用户标识(appid不同,则获取到的openid就不同),可用于永久标记一个用户,同时也是微信JSAPI支付的必传参数。 1. 为什么要使用openid呢? openid是指这个用户在某一个小程序中授权后的唯一标识(比如你的身份证) 2. 如果不使用会带来什么问题呢? 第一次授权时将用户数据保存到数据库, 然后用户把缓存清理了, 第二次授权的时候我们就无法知道这个用户是否授权过。用户就会重新保存一份新的数据进数据库。这是不符合正常逻辑的,因为如果该用户买过东西,再次授权,东西都看不到了,会像新的号一样。当然了, 有的设计是有自己的记录方式的,比如需要注册登录。 3. openid如何获取? 需要用到wx指定的接口 二、 实现 1. uniapp //漫路h uni.login({ success: res => { /

uni-app引入字体图标

人走茶凉 提交于 2020-04-09 19:09:26
我的项目引入的是阿里巴巴的图标库。修改 iconfont.css : 修改该文件夹中的内容,删除红色部分,只留下 “data” 开头的路径 删完之后,剩下这样的 注意:路径最后只剩下一个,这行代码的结尾一定是 “ ; ” 还有src:不要落下 以上 css 文件配置完毕,在需要用到的xxx.vue 文件中引入,如下所示 : 这样就可以了。 其中 class 中的属性引用,可以参考下载下来的图标文件中的 demo_index.html 文件,查看源代码得知该图标引用的什么样式,写上即可。 来源: oschina 链接: https://my.oschina.net/u/4280959/blog/3226644

Websocket IM聊天教程-教你用GoEasy快速实现IM聊天

一个人想着一个人 提交于 2020-04-06 12:58:19
本文会持续在OSChina码云上更新,最新版本请访问 https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat 经常有朋友问起GoEasy如何实现IM,今天就手把手的带大家从头到尾用GoEasy实现一个完整IM聊天。 今日的前端技术发展可谓百家争鸣,为了确保本文能帮助到使用任何技术栈的前端工程师,Demo的源码实现上选择了最简单的HTML+JQuery的方式,所以,不论您是准备用Uniapp开发移动APP,还是准备写个小程序,不论你喜欢用React还是VUE,还是React-native或ionic, 或者您直接用原生Javascript和Typescript,都是可以轻松理解,全套代码开源在OSCHINA码云( https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat )上了,下载后不需要搭建任何环境,直接用浏览器打开,就可以用来聊天了。 作为一名程序员,在编码之前,首先要做的当然是架构设计!什么?确认不是装逼?当然,别忘了星爷的那句话:我是一名程序员!没有思想的程序 员 ,跟咸鱼有什么区别呢? 咳咳咳,正文开始: 首先我们代码层将整个功能分为四层: 华丽的展示层(index.html):你们负责功能优雅强大,我负责貌美如花。展示层其实就是纯静态的html,显示界面,高端点说,就是负责人机交互的。

uni-app自定义组件:2、修改日期选择器

﹥>﹥吖頭↗ 提交于 2020-04-06 03:50:49
原因: picker 从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 因为样式差别较大。所以不能偷懒,只好改改。。。 组件 <template> <view v-if="show_picker"> <view class="pre_mark" @click="pre_close"></view> <view class="pre_picker"> <view class="pre_picker_header"> <label class="left" @click="pre_cancel">取消</label> <label class="right" @click="pre_ok">确定</label> </view> <picker-view class="pre_picker_content" :indicator-style="indicatorStyle" :value="value" @change="bindChange"> <picker-view-column> <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view> </picker-view-column>

Uniapp使用GoEasy实现websocket实时通讯

寵の児 提交于 2020-03-24 10:44:58
3 月,跳不动了?>>> Uniapp作为近来最火的移动端开发技术,一套代码,可以打包成Android/iOS app和各种平台的小程序,可谓是没有最方便只有更方便。 GoEasy上架DCloud Uniapp插件市场已经有一个多月了,收到很多Uniapp开发人员的赞扬和好评,小编在此隔着屏幕向大家鞠躬,小编和GoEasy团队会继续努力,持续为Uniapp开发者提供最简单且优雅的API,稳定高速可靠的即时通讯服务。 这段时间,也收到了很多朋友的一些问题?比如: 1、GoEasy和Uniapp websocket API有什么区别和优势? Uniapp官方的websocket API主要是用来与您的websocket服务通讯,所以使用Uniapp websocket的前提是,首先要搭建好您自己的websocket服务,然后与之通讯。这是一个纯技术的API,在建立网络连接后,还有很多的工作需要自己来完成,比如: 需要自己实现心跳机制,来维护网络连接,来判断客户端的网络连接状态; 需要自己实现断网自动重连; 需要自己维护消息列表,确保遇到断网重连后,消息能够补发; 需要自己维护一个客户端列表; ... 等等很多细致而繁杂的工作,比如websocket的安全机制和性能优化; 除此之外服务端也有很多工作需要自己完成,有兴趣自己搭建websocket的话,可以参考这篇技术分享《

在uniapp里发起axios请求的坑

北城以北 提交于 2020-03-07 13:27:47
现象。测试时:浏览器里模拟正常,微信开发者工具和手机调试都不正常。显示的请求没有发出去!!! 坑啊。。。。。。。。。。 /* eslint-disable no-unused-vars */ import axios from 'axios'; import mybase from './base64.js'; let baseURL; if (process.env.NODE_ENV == 'development') { baseURL = 'https://sxrhkjweb.top/my_mode.asmx' } else { baseURL = '/xxx' } const $http = axios.create({ baseURL, }); // create 是axios自带的方法 export const get = (url, params) => { params = params || {}; return new Promise((resolve, reject) => { // axiso 自带 get 和 post 方法 $http.get(url, { params, }).then(res => { if (res.data.status === 0) { resolve(res.data); } else { console.log(res