每次光标靠进方法或者组件开始的位置，ide就打开提示，很多时候，我们需要复制一块代码的时候，就被这个东东档住了，可不可以改进一下啊，这体验真不太好

一、背景

因为工作需要，要在Chrome、Firefox等高版本浏览器中播放海康威视、大华等摄像头，由于目前摄像头大多都是通过 RTSP 协议传输视频流的，即使是HTML5标准的Video也并未对RTSP流播放提供原生支持，从而导致如何在当前主流的浏览器中实现低延迟、低成本播放多路RTSP成为了一个重大技术难题。
小编对目前市场上的所有方案进行了测试，发现市面上行大部分方案都是转码转流方案，需要服务器不停的转码转流，不仅延迟高，能达到几秒甚至几分钟，播放高清视频或者H.265格式视频容易卡顿，同时多路播放效果也差，有的比如WebAssembly甚至本地录像抓图功能都不能实现，很难用于商业。

二、方案

想比较之下猿大师VLC播放程序是性价比最高的一个方案，通过猿大师的内嵌网页技术，底层调用VLC的ActiveX控件，可以实现在网页中内嵌播放多路RTSP的实时视频流，不用服务器转码转流，可以做到低延迟（300毫秒），支持H.264和H.265格式，兼容主流浏览器的老版本和最新版本。下面小编用图文为大家介绍下体验步骤：
第一步：
下载猿大师中间件，同样我们也给不想安装的程序的同学准备了免安装的猿大师绿色版，下载地址： 下载解压缩后运行：InstallWrl.bat 启动即可。

第二步：

下载安装VLC桌面版播放器，你也可以直接下载免安装的绿色版VLC播放器，解压缩到软件安装目录》Plugins》VLCwebPlayer目录里面。
下载地址：
64位：http://download.videolan.org/pub/videolan/vlc/3.0.16/win64/vlc-3.0.16-win64.7z
32位：http://download.videolan.org/pub/videolan/vlc/3.0.16/win32/vlc-3.0.16-win32.7z

第三步：

启动猿大师后会有如下弹窗，包含UID等信息，请截图发给猿大师客服开通试用授权。

第四步：

打开猿大师VLC播放程序在线体验网试用：以全页面显示为例，体验网址：http://test.yuanmaster.com/vlcwebfull.html
首先点击连接，右侧会显示连接成功，如果没有成功，请确认本机83端口是否被占用，如果被占用。然后再把真实RTSP地址替换到下面蓝色区域，然后点击发送即可。

猿大师官网：http://www.yuanmaster.com
猿大师与VLC原生播放器延迟对比：https://www.bilibili.com/video/BV1Sr4y117v8/
猿大师与大华官方网页延迟对比：https://www.bilibili.com/video/BV1ff4y1j7qg/
猿大师与海康威视官方网页延迟对比：https://www.bilibili.com/video/BV1mr4y127oX

三、总结

一个好的技术实施方案，首先是要满足客户的刚性需求，其次是尽量降低采购、开发、实施及维护的总成本，再次是需要有良好的兼容性和稳定性，最后需尽量确保技术方案不能因为浏览器的升级而失效，能够实现公司自主可控的要求就更好了。猿大师的VLC网页播放程序提供了这样一个稳定可靠、兼容性好、低延迟又可同时稳定播放多路RTSP的低成本半开源技术方案，无疑是当前安防行业在网页端播放RTSP流的最佳选择。

手机号码都效验通过了，一直这样子，这是啥问题

以 onReachBottomDistance 为例，我都是使用默认值的，直到某次没有触发，才想着去设置；然后发现不知道在哪来设置，因为这个值是可以全局配置，也可以只配置某一个页面；

终于把 pages.json 又复习一遍；

全局配置放在 globalStyle 下；页面级配置放在 style下；

在它们下面都可以检索到 onReachBottomDistance

附，style和globalStyle的相对位置，如下：

            {  
                "path": "theMy/user/editContact",  
                "style": {  
                    "navigationBarTitleText": ""  
                }  
            }  
        ]  
    }],  
    "globalStyle": {  
        "pageOrientation": "portrait",  
        "navigationBarTextStyle": "black",  
        "navigationBarBackgroundColor": "#FFFFFF",  
        "backgroundColor": "#FFFFFF",  
        "backgroundColorTop": "#FFFFFF",  
        "backgroundColorBottom": "#FFFFFF"  
    },

unipush 前后来回踩坑研究了一个月, 推送图标总结如下:

1. 云打包推送图标配置: (写此文档是使用hbuilderx 3.2.12)

手动修改manifest.json文件中的 app-plus节点 --> distribute节点 --> sdkConfigs节点(旧版本的hbuilder,此节点可能是plugins) --> push节点

"sdkConfigs": { // 第三方sdk配置    
    "push": { //push 模块  
        "unipush": { // unipush参数配置  
            "icons": { // 推送图片配置    
                "push": { // push图标 (通知的右侧的大logo图标)   
                    "ldpi" : "unpackage/res/icons/48x48.png",  
                    "mdpi" : "unpackage/res/icons/48x48.png",  
                    "hdpi" : "unpackage/res/icons/72x72.png",  
                    "xhdpi" : "unpackage/res/icons/96x96.png",  
                    "xxhdpi" : "unpackage/res/icons/144x144.png",  
                    "xxxhdpi" : "unpackage/res/icons/192x192.png"  
                },    
                "small": { // push_small小图标 (顶部通知栏的小logo图标, 通知的左上角小logo图标)    
                    "ldpi" : "unpackage/res/push/18x18.png",  
                    "mdpi" : "unpackage/res/push/24x24.png",  
                    "hdpi" : "unpackage/res/push/36x36.png",  
                    "xhdpi" : "unpackage/res/push/48x48.png",  
                    "xxhdpi" : "unpackage/res/push/72x72.png"  
                }  
            }    
        }    
    }    
}

2. 图标设计要求:

push图标 (通知的右侧的大logo图标):

无什么特殊设计要求, 可直接使用hbuilder中 "App图标配置" 中生成的对应尺寸的应用图标,即如上所示, 使用"unpackage/res/icons"中的图标;

push_small小图标 (顶部通知栏的小logo图标, 通知的左上角小logo图标):

设计要求是特殊的, 特别需要注意以下两点:

• 必须是透明的底;
• 内部形状颜色为白色最佳; (是其他颜色也可以, 但好像最终也会转成,通知栏显示白色, 通知左上角图标灰色)

最终效果具体参考下面官方截图展示的"内部三角形加感叹号"的图标设计;

(看论坛里, 很多小伙伴,包括我,都遇到了通知栏图标呈现一整个白色块, 通知左上角小图标一整块灰色块, 个中原因: 就是小图标设计时, 底色不是透明的)

3. 离线打包的推送图标配置

• 当drawable-XXXXX文件夹中只有 push.png 图片时, 打包后, 通知的右侧的大logo图标, 顶部通知栏的小logo图标, 通知的左上角小logo图标都使用此push.png图标. 此时, push图标的设计, 底色必须是透明, 否则将会遇到 "通知栏图标呈现一整个白色块, 通知左上角小图标一整块灰色块" 的问题.
• 当drawable-XXXXX文件夹中增加有 push_small.png 图片时, 打包后, 顶部通知栏的小logo图标, 通知的左上角小logo图标就会使用此 push_small.png 图标.
  
  

使用微信接口生成sheme路径（https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html），然后使用plus.runtime.openURL("weixin://dl/business/?t=xid5O4zsPiv")启动

又是一年“双十一”，

全民都在买买买。

当然，程序员们也没落下，

格子衫、双肩包、机械键盘、生发套餐......

程序员的购物车也是满满当当图片

图片
作为广大开发者的好伙伴，

这个“双十一”，

个推也为大家带来了一波超强福利！

30天消息推送VIP服务，免费送

智能手环、激光键盘、防脱大礼包，免费领

开发神器和潮流好物，等你抱回家！

快来参与吧

下载附件看吧

http.js

function http(url, method='get', data){
uni.showLoading({mask:true});
return new Promise((resolve, reject) => {
uni.request({
url:'http://aichat.jucd.cn/api/'+ url,
method: method,
header:{
token:uni.getStorageSync('token'),
},
success: (res) => {
resolve(res);
},
fail:(res) => {
uni.showModal({
content: '网络联接失败',
showCancel: false
});
reject(err)
},
complete: (res) => {
uni.hideLoading();
}
})
})

return url + getApp().globalData.apiroot  + uni.getStorageSync('token');  

}
export default http;

main.js
import http from './common/http.js'
app.config.globalProperties.$http = http;

页面调用

getApp().$http('get/base').then(res => {
this.http_val = res;
console.log(res.statusCode)
})

额，我应该算是HbuilderX老用户了，从开始学习html用notepad，第一个IDEA就是HbuilderX，后来又尝试过各种软件(nodepad++, idea, webstorm, vscode, subline...)，只有一个原因，HbuilderX图标太丑、控制台太丑，特别是接触到VScode这种还有插件辅助的插件，没有对比就没有伤害嘛，所以有点更那啥了，但是我用其他软件就发现，其他软件的写代码实在难写，我双击标签也不能选中所有包括子类的标签，双击不能选中行，以及SB vscode的多行注释蠢得一笔等等，所以我始终用不惯其他软件，在我心中HbuilderX是中用不中看，VSCODE是中看不中用，有n次用Hbuilderx敲代码正爽，然后看界面，这图标、控制台、没插件....，很不是滋味。因为我是前端嘛，对美有一种追求，尤其是看到被我美化后的VSCODE。我想我应该会慢慢习惯VSCODE吧

1.tabBar list数量设置为偶数添加 把需要突出跳转的tabbar页添加进去

2. app.vue onLaunch下添加监听中间突出事件
   //监听tabbar中间按钮
   uni.onTabBarMidButtonTap((e) => {
   console.log(11111);
   uni.switchTab({
   url: '跳转地址', //如果tabBar list没有设置是挑战不了的 所以设置一个
   });
   })

3. 隐藏多余的tabBar （骚操作）
   app.vue onLaunch 下添加
   uni.setTabBarItem({
   index: 2,//要隐藏的tabBar
   visible:false
   })
   uni.setTabBarItem({
   index: 3,//要隐藏的tabBar
   visible:false
   })

如果进行App项目的开发并且需要处理消息推送的业务,可以使用uniPush来实现.
一.准备基础
1.申请dcloud开发者并且认证即可.这是登录/注册链接: dcloud开发者中心

2. 申请厂商开发者账号,如果小米,华为等.
   说明:
   dcloud开发者中心提供uniPush应用配置,厂商推送设置,这里边你可以提供cid以及厂商推送配置进行调试App的消息推送,还有另外一点是厂商推送的提供是为了保证App离线时你的消息推送和透传消息可以正常到达App.

更多具体指南可以访问: uniPush使用指南

二.dcloud开发者中心
1.请确保你的App应用已存在或者新增一个,配置应用的AppID要相同,项目上的AppID和开发者中心-应用列表的AppID是同一个的,切勿搞混.查看项目的AppID可以在根目录的【manifest.json】-基础配置中查看.在dcloud开发者中心则是【我创建的应用】中查看，找到项目应用后点击【应用名称】进入应用界面.

2. 配置uniPush,在uniPush-配置管理中填写配置,你的App包名需要和打包时的包名一致.例如云打包时填写的【Android包名】是io.dcloud.hbuilder,那么你的uniPush包名也是一样.
3. 厂商推送配置.华为开发者联盟
   你可以根据你的调试机型去申请相应的厂商开发者账号,在申请认证通过后返回dcloud开发者中心配置厂商推送设置即可.下面以【华为开发者联盟】厂商为例：
   a.注册账户并认证
   b.前往【管理中心】-【开发服务-PUSH】中添加项目，如图：
   
   
   
   然后在项目中增加应用，填写应用信息，包名也需要和项目的包名一致，不可乱填，如图：

推送厂商设置主要是为了处理App离线通知而设置的，不然当用户没有活跃在App的时候是无法收到消息推送和透传消息的，请注意。还有就是各厂商推送的需要可能会不太一样，比如有些厂商推送离线消息需要上架到应用市场才可以。

三、测试推送消息和透传消息
在此之前我们需要获得clientID（cid），可以使用一下代码：
// #ifdef APP-PLUS
const clientInfo = plus.push.getClientInfo();
// #endif

这里会返回，id，token，clientid，AppID，AppKey，其中clientID就是我们需要的东西，假如启动App后该方法不返回任何数据，可以使用settimeout延迟一点时间再获取也可以。

监听消息推送和透传消息可以使用如下代码：
plus.push.addEventListener("click", (msg) => {
this.log({'type': 'click', 'data': JSON.stringify(msg)})
})
plus.push.addEventListener("receive", (msg) => {
this.log({'type': 'receive', 'data': JSON.stringify(msg)})
})

不同的是click事件可以响应消息推送和透传消息，只要在通知栏可以看得到的消息，点击后都可以响应。而对于receive事件来说仅是接受透传消息，你在发送透传消息的时候请使用【非标准格式】消息体即可进入receive事件中。
具体说明可见，uni-app使用unipush推送问题汇总

有了cid后，我们可以dcloud开发者中心-uniPush的【创建推送】中测试消息推送和透传消息功能，填入相应的信息即可然后点击【预览】即可。

需要注意的是，获取cid不可使用【基座调试】，需要云打包后把安装包安装到手机上进行调试测试，在这里获取到的cid才是可以使用的。

一些可以帮助的链接：
Unipush常见问题
UniPush使用指南