浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2021, August 12, 11:53 AM
uniapp支持编译成APP，同时支持IOS和Android，但这两个平台上面的行为有些不太一致。比如openDocument。
正常情况下，
1、我们如果是本地文件（PDF，现在只读PDF）。可以先利用plus.io.convertLocalFileSystemURL进行一次处理（记得只能存放在static目录下），static目录非常重要。，这时候可以获取相对于系统的全路径，然后用openDocument就可以打开了。
2、如果是网络文件，那就得先用uni.downloadFile来先下载，然后success(res){}，res.url就是下载后的临时文件（依稀是这样，网上有很多例子，不多说）。然后再调用openDocument打开即可。
3、网络文件，也可以采用pdf.js来打开，这个就是mozilla提供的。他有提供两个版本，针对旧浏览器和现代浏览器的。如果没有什么特别要求，用现代浏览器的即可（这种pdfjs的方法，需要在webview里打开，可以参考uniapp的webview）。
--综上，看起来好象处理起来没那么复杂，然而问题来了，IOS这些都没问题，1、2、3的处理方法都OK。但安卓就不行了。1和2 在处理的时候，openDocument会直接调用系统，问你用哪个APP打开，一旦打开，就跳出你当前的APP了，这个就有点烦人，所以在android上几乎是只能采用第3种方式
默认mozilla提供的viewer.html的文件，非常复杂，因为他顶部的工具栏很多，如果没有时间定下心来研究或者处理，那一堆工具栏就显得有点多余，毕竟，我们是在手机上、PAD上打开，不需要那些工具栏，这时候就推荐一款基于pdfjs的一个微型库。居然还用了jquery的库的：https://github.com/gjTool/pdfh5，用法很简单，他本身也有test的demo，但有几个还是要注意一下，比如一些默认值的设置，默认点击会放大，而且默认是canvas渲染。官方的意思是：
XML/HTML代码
- pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
-
- 注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。
-
- svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案
-
- canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf
但问题是，如果pdf本来就是图片，而且宽度 很大，这个渲染非常耗时间。。。卡出翔来。如果你只是普通的PDF，那就直接用svg吧。几乎秒开。打开的速度依据你的网络下载PDF的速度而定。
--至此，问题几乎全部解决。
Javascript | 评论:0
| 阅读:6886
Submitted by gouki on 2021, May 29, 4:50 PM
如题，一句话的配置
实在是因为好几次用PM2管理的时候，添加了却忘了save，等到因更新重启或者有其他操作的时候，发现还得找到指定的目录运行再save。现在记得这个，安装完后就运行一下。后面就轻松了
Javascript | 评论:0
| 阅读:5896
Submitted by gouki on 2021, April 12, 8:18 PM
也不知道怎么分类，就放在js分类下了。
有时候，为了防止一小部分人喜欢手工CP，于是可以通过一些简单的办法让他们无法选择网页上的内容，也就变相的无法复制了。
偷懒的方法就是直接改CSS：
CSS代码
- * {
-
- -moz-user-select: none;
- -o-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
稍复杂一点。在body里加入：<body οncοntextmenu="return false;" onselectstart="return false">
嗯。用JS的话：
JavaScript代码
- document.οncοntextmenu=function(){return false;};
- document.onselectstart=function(){return false;};
简单粗暴，却能解决大部分的问题。但作为一个技术勃客，我还是不屑这么做，但确确实实有部分网站需要这样处理。但仍然是属于防君子不防小人
Javascript | 评论:0
| 阅读:6435
Submitted by gouki on 2021, April 5, 8:29 PM
在运行项目的时候，报错，说是不支持当前15.x的版本，请使用10,12,14的版本。于是yarn global add n，安装了这个简单的切换版本库。然后运行sudo n 14，自动安装了14.x的版本。
然而死活版本切换不过去。发现原来的node是在homebrew下安装的，于是选择卸载node，homebrew uninstall node，再运行sudo n 14，版本切换成功
n 和 nvm都是node下面多版本的管理工具。但n工具 确实比较简单：n +版本号，会自动下载指定版本。如果直接运行n，可以选择和切换当前的版本。当然这个是全局的，不能在指定的目录下指定node版本。如果临时用的时候，可以用n use 版本号来处理。
Javascript | 评论:0
| 阅读:6864
Submitted by gouki on 2021, January 7, 5:41 PM
事先申明，因为我是只在微信小程序下进行开发，所以下述内容都是基于微信小程序的。官方有定义教你怎么自定义TabBar，https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html，那么在uni-app里怎么处理呢？dCloud也有提及：【微信小程序自定义tabbar：微信提供一直基于webview自定义tabBar的方案。该功能体验不佳，不太推荐使用。如果要使用，参考微信文档，项目根创建 custom-tab-bar 目录，注意里边的代码是 wxml,wxss，不是 vue，uni-app编译器会直接拷贝该目录到微信小程序中】参考：https://uniapp.dcloud.io/collocation/pages?id=tabbar
OK，回到开始，我们一步一步来
1、参考【https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html】，在uniapp的目录下创建custom-tab-bar目录，创建：index.js/json/wxml/wxss文件（如果要偷懒，可以直接用官网上的示例工程打开，将文件复制过来即可）
2、配置pages.json，在原有的配置中增加：custom:true，当有这个值的时候。小程序将不会生成标准的tabbar。即使增加了这个KEY，原来配置中的list也不能去掉，毕竟，switchTab就是从tabbar.list中来进行判断的
3、打开工程，你会发现tabbar已经存在于每一个页面了。但这里会带来另一个问题，即：uni.hideTabbar()无效了（这个后面再说。。。）
4、官方例子中用了this.getTabbar。这个方法在UniApp是无法使用的，但可以曲线救国：this.$mp.page.getTabbar，将原来的判断全部改成这样就可以按照官方示例进行使用了。
5、如果在运行过程中，发现tabbar一直在闪烁，那么看一下你icon，是不是81px。我之前放的32px\48px的icon，都会导致tab切换的时候闪烁。换成81后就好了。
Javascript | 评论:1
| 阅读:13764
