pdfh5.js

canvasPlot.js 一个canvas绘制矩形的插件，自由拖动缩放

Thu, 03 Mar 2022 10:00:58 +0800

canvasPlot

canvasplot.js canvas绘制矩形，拖动缩放，删除。

在线示例

https://www.gjtool.cn/canvasplot/index.html

快速使用（有两种方式）

一、script标签引入方式

<div id="demo" style="width:500px;height:500px;"></div>

3.引入js

<script src="canvasPlot.min.js" type="text/javascript" charset="utf-8"></script>

4.实例化

var canvasPlot = new CanvasPlot({
parentNode: document.querySelector("#demo"),
width: 500,
height: 500,
imagePath: '3.jpg'
});

二、npm安装方式

1.安装

npm install canvasplot

2.使用

<template>
  <div id="app">
<div id="demo" style="width:500px;height:500px;"></div>
  </div>
</template>
<script>
import CanvasPlot from "canvasplot";
export default {
    name: 'App',
data() {
  return {
  };
},
mounted() {
var canvasPlot = new CanvasPlot({
parentNode: document.querySelector("#demo"),
width: 500,
height: 500,
imagePath: '3.jpg'
});

canvasPlot.addRect({
x: 212,
y: 119,
w: 50,
h: 50
});
canvasPlot.addRect({
x: 280,
y: 126,
w: 60,
h: 30
});
canvasPlot.drawRectBegin();
canvasPlot.on("drawFinish",function(){
//somecode
})
}
}
</script>

options配置项参数列表

参数名称	类型	取值	是否必须	作用
parentNode	HTMLelement	-	√	canvasPlot的父元素
width	Number	-	-	canvasPlot的宽，不填默认跟随父元素宽度
height	Number	-	-	canvasPlot的高，不填默认跟随父元素高度
imagePath	String	-	-	canvasPlot的图片路径
showMenu	Boolean	-	-	是否显示右键菜单
rectBgColor	String	-	-	rect矩形内部填充颜色，不填默认中间透明

methods 方法列表

方法名	传参	传参取值	作用
addRect	Object	{x:10,y:10,w:40,h:40}	手动添加矩形
delPlot	Object	plot	删除plot，不传参默认删除所有plot
drawRectBegin	-	-	开始绘制矩形
drawRectFinish	-	-	结束绘制矩形
setCanvasDragZoom	Boolean	true/false	设置允许拖动缩放
getPlotCaches	-	-	获取绘制的plot数据缓存
getSelection	-	-	获取当前选中的plot
getOffset	-	-	获取当前canvas偏移值，放大比例{scale:1,x:0,y:0}
setOffset	Object	{scale:1,x:0,y:0}	设置当前canvas偏移值，放大比例
getData	-	-	获取canvasPlot的默认绘制plot数据,偏移值和缩放比例。{offset:{scale:1,x:0,y:0},data:[]}
setData	Object	{offset:{scale:1,x:0,y:0},data:[]}	canvasPlot的默认绘制plot数据,偏移值和缩放比例（可以用来回显上次的数据
screenshot	String	jpg/png等图片格式	当前canvas截图，返回base64
downLoad	String	jpg/png等图片格式	当前canvas截图，下载下来成为图片文件
on	(String, Function, Boolean)	String：监听的事件名，Function：监听的事件回调, Boolean: 为true时，不可与同类型的事件共存，当前事件函数会覆盖前面同类型的事件	on方法监听所有事件，所有类型事件默认可以同时存在多个，触发事件时会同时执行
off	(String, Function)	String：要卸载的事件名，Function：要卸载的事件函数	off方卸载on监听的所有事件，第一个参数为true时，卸载所有on监听的事件。第二个参数为空时，卸载第一个参数的同类型的所有事件

on方法监听所有事件-事件名列表

事件名	作用
drawFinish	监听plot绘制完成
dragMoveFinish	监听背景图拖拽完成
dragPlotMove	监听plot拖拽完成
drawing	监听plot绘制中
drawMove	监听plot绘制中（四角边沿拖拽绘制）
select	监听plot选择事件
zoom	监听缩放事件
dblclick	监听plot双击事件
rightClick	监听plot右键事件

vue-layer修复版vl-layer，一款好用的vue弹窗组件，layui-layer弹窗风格

Mon, 07 Dec 2020 15:18:44 +0800

vue-layer修复版vl-layer，一款好用的vue弹窗组件，layui-layer弹窗风格

起初使用vue-layer，但是奈何bug太多，作者又没有时间修复，所以只能自己动手修改源码，添加自己想要的功能，修改了图标，索性发布到npm上，这样也能帮到其他想用vue-layer的同学。
vl-layer github地址
vl-layer gitee地址
原版vue-layer github地址

更新信息

2021.06.18 更新：新增parentDom属性，弹窗的父元素，弹窗创建后会append到父元素

快速使用

npm install vl-layer

main.js里

import Vue from 'vue';
import layer from 'vl-layer'
import 'vl-layer/vl-layer.css';

Vue.prototype.$layer = layer(Vue);

vue文件里

<template>
  <div id="app">
  </div>
</template>
<script>
  import world from "@/components/HelloWorld.vue"
  export default {
    name: 'App',
components:{
  world
},
data() {
  return {

  };
},
mounted() {
//iframe层并不是真的用了html标签iframe,实质上还是用的div,只是iframe层可以引用自定义组件、页面
let layerId = this.$layer.iframe({
   title:"提示",
   content:{
     content:world, //组件
     parent:this, //vue实例 传入实例 弹窗组件内才能获取laydata
     data:{
 a:"这是父组件传值", //父组件向弹窗子组件传值
 b:{},
 c:function(){}
 } 
   },
   canmove:false,  //true可以拖动 false不能拖动 
   //弹窗成功 id弹窗的id
   success:id=>{
     console.log("success",id)
   },
   //弹窗关闭/取消
   end:()=>{
     console.log("end")
   },
   //弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止    
  // beforeClose:(id,close)=>{
  //   console.log("beforeClose",id)
  //   setTimeout(()=>{
 //      close(id)
 //    },2000)
 //    return false
 //  },
  //还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原
  maxminiCallback:(id,state)=>{
console.log('maxminiCallback', id,state);
  },
  //最小化回调 id弹窗的id
  miniCallback: id => {
console.log('miniCallback', id);
  },
  //最大化回调 id弹窗的id
  maxCallback: id => {
console.log('maxCallback', id);
  }
 })
}
  }
</script>

<style>
</style>

HelloWorld.vue

<template>
  <div calss="HelloWorld"></div>
</template>
<script>
  export default {
    name: 'HelloWorld',
props:{
//本弹窗的id
layerid:{
type:String,
default:""
},
//父组件的data
lydata:{
type:Object,
default:()=>{
return {}
}
},
//父组件传值
a:{
type:String,
default:""
},
b:{
type:Object,
default:{}
},
c:{
type:Function,
default:()=>{}
}
},
data() {
  return {

  };
},
mounted() {

}
  }
</script>

<style>
</style>

Attribut

-（注意1：信息框，页面层,iframe层,加载层,tips层下各种具体配置参数会有差别，可以看后面各自的配置）

-（注意2：iframe层并不是真的用了html标签iframe,实质上还是用的div,只是iframe层可以引用自定义组件、页面）

 {
   type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
   title: '信息',
   content: '', //文本，标签，iframe层可以传递vue组件对象
   area: 'auto',//['400px','300px'] 
   offset: 'auto',//[20,10] "rightTop" "rightBottom" "leftTop" "leftBottom" {left:0,top:0}  {left:0,bottom:0}  {right:0,bottom:0} {right:0,top:0}
   icon: -1,
   btn: '确定',//[‘确定’，‘取消’]
   time: 0,
   shade: true,//是否显示遮罩
   yes: ()=>{},//确定回调
   cancel: ()=>{},//取消，右上角x关闭按钮回调
   tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
   tipsMore: false,//是否允许多个tips
   shadeClose: true,//点击遮罩是否关闭
   maxmin: true,//开启最大化最小化
   minBtnOnly:true, //默认false 在  maxmin: true前提下，开启minBtnOnly表示只显示最小化按钮
   scrollbar: true, //是否允许浏览器出现滚动条:默认是允许
   resize: false ,//是否允许拉伸，默认是不允许
   parentDom: HTMLdiv,//html DOM元素，弹窗所在的父元素
   resizeOptions:{
   icon:true , //是否显示右下角图标 默认显示 false隐藏
   dom:true, //是否开启右下角拉伸 
   right:false, //是否开启右边界拉伸 
   bottom:false //是否开启底部边界拉伸 
   },
   //新增参数
   canmove:false,  //true可以拖动 false不能拖动
 //弹窗成功 id弹窗的id
 success:id=>{
   console.log("success",id)
 },
 //弹窗关闭/取消
 end:()=>{
   console.log("end")
 },
//还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原
maxminiCallback:(id,state)=>{
console.log('maxminiCallback', id,state);
},
//最小化回调 id弹窗的id
miniCallback: id => {
console.log('miniCallback', id);
},
//最大化回调 id弹窗的id
maxCallback: id => {
console.log('maxCallback', id);
},
//弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止
  beforeClose:(id,close)=>{
console.log("beforeClose",id)
setTimeout(()=>{
  close(id)
},2000)
return false
  }
 }

Method

 this.$layer.alert(content, [options, yes]);
 // options和yes可以省略， 如果您不愿意写options，则可以直接写确定按钮的函数，即yes
 // content 可以为html
 //yes如果是个function，这会自动添加参数layerid，
 (layerid)=>{
   this.$layer.close(layerid);
 }

 this.$layer.confirm(content, [options, yes, cancel]);
  // options，yes和cancel可以省略， 如果您不愿意写options，则可以直接写确定按钮的函数，即yes，或者覆盖默认的cancel方法。PS：yes和cancel方法不能互换
  //content 可以为html
   //yes,cancel如果是个function，这会自动添加参数layerid，
 (layerid)=>{
   this.$layer.close(layerid);
 }

 this.$layer.loading(option);
  // options ={time:3}，3秒自动关闭
  //options = {content:'请等待'} //可传入文字

 this.$layer.msg(content, [options, end]);
 // options和end可以省略， 如果您不愿意写options，则可以直接写时间到期的回调即可，即end方法
 // 默认msg的关闭时间为1.5秒
 // content 可以为html

 this.$layer.prompt(options, yes);
 //特殊参数: value 要回显的值
 //formType: 1text,2password,3textarea

this.$layer.tips(content, follow, options);
//content 可以为html
//follow对css选择器，用来定位目标

this.$layer.iframe({
  content: {
    content: componentName, //传递的组件对象
    parent: this,//当前的vue对象
    data:{}//props
  },
  area:['800px','600px'],
  title: 'title'，
  cancel:()=>{//关闭事件
     alert('关闭iframe');
  }
});
// data参数可认为是componentName的props，同时 该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接用来关闭该层
// options参数直接写到json里即可，比如title

this.$layer.close(layerid);
this.$layer.closeAll(type); // type:'loading' 'alert' 'confirm' 'msg' 'prompt' 'iframe'
//弹窗最大化
this.$layer.full(layerid);
//弹窗最小化
this.$layer.min(layerid);
//还原弹窗
this.$layer.restore(layerid);
//弹窗是否可以拖动 true可以 false不能
this.$layer.canmove(layerid,true)

uniapp实战项目开源，搜索观看影视漫画

Thu, 02 Jul 2020 10:00:21 +0800

h5uniapp

h5uniapp 基于uniapp开发的hybrid APP。可以打包成安卓APP、苹果APP、微信小程序、H5

h5uniapp项目GitHub地址

h5uniapp微信小程序二维码

克隆本项目后，添加到HbuilderX编辑器，就可以真机调试，打包运行了。可以打包成安卓APP、苹果APP、微信小程序、H5。
如果有需要影视接口的，可以加群询问，Q群：651601340

h5uniapp在线预览（建议使用谷歌浏览器F12手机模式打开预览）

h5uniapp在线预览

h5uniapp安卓APP下载

h5uniapp安卓APP下载

pdfh5博客主页

打赏赞助作者：

javascript封装animate的过程

Mon, 25 May 2020 17:32:47 +0800

首先，我们需要先封装一个css方法，用以获取元素的样式。

//elem    元素    attr    元素的属性名
function css(elem,attr){
        return elem.currentStyle ? elem.currentStyle[attr]  :   window.getComputedStyle(elem)[attr];
}

然后，我们想要一个元素的width动起来，
怎么做？给它一个定时器，每隔一段时间改变它的width值，到了想要的值时就清除定时器。如果还想改变别的样式值呢？那么就给这个定时器封装成函数方法，把里面要改变的变成变量，需要用的时候，调用它，传入想改变的样式名就行了。

此时就有了这样的方法：

//elem 元素  attr  属性名  value 属性的改变值
function animate(elem,attr,value){
        var timer = setInterval(function(){
                //设置变量start存储元素要改变的样式的初值
                var start = parseInt( css(elem,attr) ),
                       
                //设置变量speed样式改变的速度
                var speed = (value-start)/10;
                //当speed负值或者正值时需要给它取整，以免出现start永远不能等于value的情况
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                start += speed;
                if(start == value){
                        clearInterval(timer);
                }else{
                         elem.style[attr] = start + 'px';
                   }
            },13)
}

但是，这样的方法不能实现opacity的改变
那么就有了这样的方法：

function animate(elem,attr,value){
        var timer = setInterval(function(){
                //设置变量end存储元素要改变的样式的最终值
                var start = 0, end = 0;
                if(attr ==  'opacity'){
                     //Math.round防止无限小数兼容ie
                    start = Math.round( parseFloat( css(elem,attr) )*100 );
                    end = value*100; 
                }else{
                        start = parseInt( css(elem,attr) );
                        end = value; 
                    }
                var speed = (end-start)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                start += speed;
                if(start == end){
                        clearInterval(timer);
                }else{
                        if(attr == 'opacity'){
                                elem.style.opacity = start/100;
                                 //兼容IE 
                                elem.style.filter='alpha(opacity='+start+')';                          
                         }else{
                                elem.style[attr] = start + 'px';
                             }
                 }
            },13)
}

这样的方法，只是在元素本身被设置过属性情况下，那如果元素没有设置这个你想要改变的属性呢？
我们先来看下，当元素没有设置属性值的时候，CSS方法获取的是什么。
比如，获取一个left，css(div,’left’)，有的浏览器会返回0px，但是有的浏览器会返回一个undefined或者auto或者其他他非数字的值；同样，关于opacity这个属性，其他浏览器会返回1，但是IE浏览器会返回一个undefined。

一般HTML+CSS布局的时候，大家通常会这样写透明度：filter:alpha(opacity=100)；opacity:1;
因为IE浏览器的透明度是filter:alpha(opacity=100)；这样的写法就是为了兼容IE的。

知道了原理，那么，这个animate就可以这样写了：

function animate(elem,attr,value){
        var timer = setInterval(function(){
               var start = 0, end = 0;
                if(attr ==  'opacity'){
                    //兼容IE  当没有设置fliter时，默认100；
                    if(!css(elem,attr)){
                           start = 100;
                      }else{
                              start = Math.round( parseFloat( css(elem,attr) )*100 );
                        }
                   end = value*100; 
                }else{
                        //兼容ie 没有设置attr时，默认0（不加parseInt，IE会报错）
                        if(!parseInt(css(elem,attr))){
                            start = 0; 
                        }else{
                               start = parseInt( css(elem,attr) );
                           }
                        end = value; 
                    }
                var speed = (end-start)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                start += speed;
                if(start == end){
                        clearInterval(timer);
                }else{
                        if(attr == 'opacity'){
                                elem.style.opacity = start/100;
                                 //兼容IE 
                                elem.style.filter='alpha(opacity='+start+')';                          
                         }else{
                                elem.style[attr] = start + 'px';
                             }
                 }
            },13)
}

好了，元素单个的属性运动方法已经完毕。
那想要多个属性同时运动呢？
我们可以把attr和对应的value用对象存起来，比如这样 {width:100,height:100,opacity:1}。然后遍历这个对象，依次改变对象里的属性对应的值，也就是改变了元素的属性值。对象遍历我们用for in 方法。
比如，

        var json = {width:100,height:100,opacity:1};
           for(var i in json){
                console.log(i)
            }

你会发现得到的是width,height,opacity这些字符串。那么json[i]就代表了json对象里的属性值。
还有，前面的方法，在实际运用中会出现BUG。因为可能会出现，上一次运动还没完，用户又开始运动，即开了多个定时器的情况。这样就会出现问题。
通常做法是在开始运动前就清除定时器，这样就不会出现问题。
我们的前面的方法里直接在定时器前面写clearInterval(timer)是不行的，会出错 timer is not defined 。
那么我们可以这样，把元素看成一个对象，把timer设置成元素的一个属性，即elem.timer。
所以，

function animate(elem,json){
        clearInterval(elem.timer);
        elem.timer = setInterval(function(){
                //遍历json，依次改变每个属性的属性值
               for(var attr in json){
                       var start = 0, end = 0;
                        if(attr ==  'opacity'){
                          //兼容IE 当没有设置fliter时，默认100；
                            if( !css(elem,attr) ){
                                   start = 100;
                              }else{
                                   //Math.round防止出现无限小数
                                  start = Math.round( parseFloat( css(elem,attr) )*100 );
                              }
                              end = parseFloat(json[attr])*100; 
                        }else{
                                 //兼容ie 没有设置attr时，默认0（不加parseInt，IE会报错）
                              if(!parseInt(css(elem,attr))){
                                start = 0; 
                            }else{
                                   start = parseInt( css(elem,attr) );
                              }
                               end =  parseInt(json[attr]); 
                        }
                    var speed = (end-start)/10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    start += speed;
                    if(start == end){
                            clearInterval(elem.timer);
                     }else{
                                if(attr == 'opacity'){
                                elem.style.opacity = start/100;
                                 //兼容IE 
                                elem.style.filter='alpha(opacity='+start+')';                          
                        }else{
                                elem.style[attr] = start + 'px';
                             }           
                } 
        },13)
}

这样貌似写完了，其实还没完，这样写会有BUG，会出现只实现了第一个属性的运动，而其他属性的运动没有到达你想要的最终值。因为方法里是这样判定的，当start end的时候，判定运动终止，但是，现在不止有一个start和end，第一个属性的startend完成了，但是后面的属性的start==end并没有完成。
所以，我们可以用布尔值来做判定条件。

 function animate(elem,json){
        clearInterval(elem.timer);
        elem.timer = setInterval(function(){
                //运动终止条件
                var flag = true;
                //遍历json，依次改变每个属性的属性值
               for(var attr in json){
                       var start = 0, end = 0;
                        if(attr ==  'opacity'){
                        //兼容IE 当没有设置fliter时，默认100；
                            if( !css(elem,attr) ){
                                   start = 100;
                              }else{
                                   //Math.round防止出现无限小数
                                  start = Math.round( parseFloat( css(elem,attr) )*100 );
                              }
                              end = parseFloat(json[attr])*100; 
                        }else{
                               //兼容ie 没有设置attr时，默认0（不加parseInt，IE会报错）
                              if(!parseInt(css(elem,attr))){
                                start = 0; 
                            }else{
                                   start = parseInt( css(elem,attr) );
                              }
                               end =  parseInt(json[attr]); 
                        }
                    var speed = (end-start)/10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    start += speed;
                    //当start != end时，flag = false;，运动继续
                    if(start != end){
                            flag = false;
                     }
                      if(attr == 'opacity'){
                           elem.style.opacity = start/100;
                           //兼容IE 
                            elem.style.filter='alpha(opacity='+start+')';                          
                        }else{
                                elem.style[attr] = start + 'px';
                             }           
                } 
                 //当所有的start == end时，flag = true;，运动停止
                if(flag){
                         clearInterval(elem.timer);
                 }
                 
        },13)
}

如果想把animate做成链式运动方法，很简单，只要多加个参数fn,在最后判定运动完成时回调函数就行。改变运动的快慢也很简单，只要再加个参数time。

所以最终版：

function animate(elem,json,time,fn){
        clearInterval(elem.timer);
        elem.timer = setInterval(function(){
                //运动终止条件
                var flag = true;
                //遍历json，依次改变每个属性的属性值
               for(var attr in json){
                       var start = 0, end = 0;
                        if(attr ==  'opacity'){
                        //兼容IE 当没有设置fliter时，默认100；
                            if( !css(elem,attr) ){
                                   start = 100;
                              }else{
                                   //Math.round防止出现无限小数
                                  start = Math.round( parseFloat( css(elem,attr) )*100 );
                              }
                              end = parseFloat(json[attr])*100; 
                        }else{
                            //兼容ie 没有设置attr时，默认0
                              if( !parseInt(css(elem,attr)) ){
                                start = 0; 
                            }else{
                                   //parseInt防止json对象里属性值带px
                                   start = parseInt( css(elem,attr) );
                              }
                               end =  parseInt(json[attr]); 
                        }
                        //如果有time实参传入，就执行speed = (end-start)/ time ，否则speed = (end-start)/10；
                        var speed = (end-start)/( time || 10 );
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        start += speed;
                        //当start != end时，flag = false;，运动继续
                        if(start != end){
                            flag = false;
                         }
                          if(attr == 'opacity'){
                           elem.style.opacity = start/100;
                           //兼容IE 
                            elem.style.filter='alpha(opacity='+start+')';                          
                          }else{
                                elem.style[attr] = start + 'px';
                            }           
                } 
                 //当所有的start == end时，flag = true;，运动停止
                if(flag){
                         clearInterval(elem.timer);
                       //运动终止时，如果有函数实参传入就执行回调函数
                        fn & fn(); 
                 }
                 
        },13)
}

uniapp画原生图片圆形按钮

Tue, 05 May 2020 10:24:00 +0800

//创建锁屏图片
let button1 = new plus.nativeObj.Bitmap('bmp1');
//图片加载完毕
button1.load('static/suo1.png', () => {
    //创建view
    this.suo1 = new plus.nativeObj.View('suo1', { top: this.screenWidth / 2 - 32 + 'px', left: '40px', height: '54px', width: '54px', backgroundColor: 'transparent' });
    //圆形半透明背景
    this.suo1.drawRect({ color: 'rgba(0,0,0,0.2)', radius: '27px' }, { top: '0px', left: '0px', width: '100%', height: '100%' });
    //画锁图片
    this.suo1.drawBitmap(button1, { top: '0px', left: '0px', width: '100%', height: '100%' }, { top: 'auto', left: 'auto', width: '50%', height: '50%' });
    this.suo1.hide('auto', 0);
    this.suo1.addEventListener(
        'click',
        () => {
    
        },
        false
    );
});

uniapp内使用nvue做原生标题

Fri, 17 Apr 2020 10:22:06 +0800

nvue页面只能使用vue的生命周期，uniapp生命周期api支持部分，css样式只支持flex，很多css样式不支持

<template>
    <div class="controls-top" ref="controlsTop">
        <div class="title"><text class="text">{{title}}</text></div>
        <div class="fanhui" @tap="back"><text class="ios-icon"></text></div>
        <div class="top-right1">
            <div class="power-view">
                <div class="power-box">
                    <div class="power-header"></div>
                    <div class="power-body"><div class="power-level" :style="{ width: `${16 * level}px`, backgroundColor: '#fff' }"></div></div>
                </div>
            </div>
        </div>
        <div class="top-right2">
            <text class="ios-sm-title">{{nowTime}}</text>
        </div>
    </div>
</template>

<script>
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
export default {
    data() {
        return {
            level:0,
            nowTime:"00:00",
            title:'',
            timer:null,
            platform:null
        }
    },
    beforeCreate() {
        // #ifdef APP-PLUS-NVUE
        var domModule = weex.requireModule('dom');
        domModule.addRule('fontFace', {
            fontFamily: 'texticons',
            src: "url('../../../static/text-icon.ttf')"
        });
        // #endif
    },
    created(){
        uni.getSystemInfo({
            success: (e) => {
                // #ifndef MP
                this.platform = e.platform
                // #endif
            }
        })
    },
    mounted() {
        this.getLevel()
        this.timer = setInterval(()=>{
            this.nowTime = this.getNowTime()
        },1000)
        uni.$on("videoTitileShow",()=>{
            this.nowTime = this.getNowTime()
            this.animateControls(0,this.$refs.controlsTop)
        })
        uni.$on("videoTitileHide",()=>{
            this.animateControls(-40,this.$refs.controlsTop)
        })
        uni.$on("videoTitileChange",(title)=>{
            this.title = title
        })
    },
    destroyed() {
        uni.$off("videoTitileShow")
        uni.$off("videoTitileHide")
        uni.$off("videoTitileChange")
        clearInterval(this.timer)
    },
    methods: {
        getLevel(){
            let promise = new Promise((resolve,reject)=>{
                //#ifdef APP-PLUS-NVUE
                if(this.platform == 'android'){
                    //注意，安卓需要配置下manifest.json文件，打开后，进入模块权限配置，在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS
                    var main = plus.android.runtimeMainActivity();  
                    var Intent = plus.android.importClass('android.content.Intent');  
                    var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
                            onReceive: function(context, intent) {  
                            var action = intent.getAction();  
                            if (action == Intent.ACTION_BATTERY_CHANGED) {  
                                let level   = intent.getIntExtra("level", 0); //电量  
                                var voltage = intent.getIntExtra("voltage", 0); //电池电压  
                                var temperature = intent.getIntExtra("temperature", 0); //电池温度  
                                resolve(level/100)
                            }  
                         }  
                     });  
                    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
                    var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);  
                    main.registerReceiver(recevier, filter);
                }else if(this.platform == 'ios'){
                    var UIDevice = plus.ios.import("UIDevice");
                    var dev = UIDevice.currentDevice();  
                    if (!dev.isBatteryMonitoringEnabled()) {  
                        dev.setBatteryMonitoringEnabled(true);  
                    }  
                    let level =dev.batteryLevel();  
                
                    resolve(level)
                }
                //#endif
                //#ifdef MP-WEIXIN
                wx.getBatteryInfo({
                    success: function(e) {
                        resolve(e.level)
                    }
                })
                //#endif
            })
            promise.then(res=>{
                this.level = res
            })
        },
        getNowTime(){
            var now = new Date();
            var hh = now.getHours();            //时
            if(hh<10) hh = "0" + hh;
            var mm = now.getMinutes();          //分
            if(mm<10) mm = "0" + mm;  
            return `${hh}:${mm}`; 
        },
        back(){
            this.animateControls(-40,this.$refs.controlsTop)
            uni.$emit("exitFullscreen")
        },
        animateControls(distance,el){
            animation.transition(el, {
                styles: {
                    transform: `translate(0px, ${distance}px)`,
                },
                duration: 350, //ms
                timingFunction: 'ease',
                delay: 0 //ms
                }, () => {
                
                }
            )
        }
    }
};
</script>

<style>
.controls-top {
    /* width: 750upx; */
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    position: relative;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    height: 40px;
    transform: translateY(-40px);
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0 40px 0 40px;
}
.ios-icon {
    font-size: 18px;
    color: #fff;
    font-family: texticons;
}
.title {
    /* width: 750upx; */
    height: 40px;
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    position: absolute;
    left: 40px;
    right: 80px;
    top: 0px;
    justify-content: center;
    text-align: left;
    align-items: flex-start;
    /* background-color: #007aff; */
    padding: 0 10px 0 10px;
}
.text {
    color: #fff;
    font-size: 14px;
}
.fanhui {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
}
.top-right1 {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: 14px;
    right: 2px;
    width: 40px;
}
.top-right2 {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: 12px;
    right:38px;
    width: 40px;
}
.power-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
}
.power-box {
    flex-direction: row;
    align-items: center;
}
.power-header {
    height: 4px;
    width: 2px;
    background-color: #fff;
}
.power-body {
    height: 9px;
    width: 20px;
    border-width: 1px;
    border-color: #fff;
    padding: 1px;
    flex-direction: row;
    justify-content: flex-end;
}
.power-level {
    height: 5px;
}
.ios-sm-title{
    font-size: 10px;
    color: #fff;
}
</style>

pages.josn配置nvue

vue页面里获取nvue组件，使用

this.videoTitleNvue = uni.getSubNVueById('title');
this.videoTitleNvue.setStyle({
    top: 44 + uni.getSystemInfoSync().statusBarHeight + 'px',
    left: '0px',
    width: '100%',
    height: '40px'
});
this.videoTitleNvue.show('auto', 0, function() {
    // 打开后进行一些操作...
    //
});
```uniapp 内使用 nvue 做原生标题

uniapp安卓应用输入法软键盘弹起窗口顶起变形解决办法

Wed, 25 Mar 2020 10:23:43 +0800

"app-plus": {
    "softinputMode": "adjustResize"
}

softinputMode：软键盘弹起模式，有两个值：

adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度
adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住

softinputMode默认值为adjustPan。

uniapp安卓应用，输入法软键盘弹起的时候，默认是窗口顶起，页面遭受挤压。这个在登录注册等业务场景下没有问题，但是在论坛聊天业务下就不行了。

这个时候需要在pages.json配置下，在你需要配置的页面下配置”app-plus”：{“softinputMode”: “adjustResize”}

还有几个相关的常用：

input组件 @focus事件，可以获取到当前弹起的输入法软键盘高度：

methods:{
    focus(e){  
     let height = e.detail.height  
    }
}

获取当前窗体高度

onLoad() {  
          let screenHeight = uni.getSystemInfoSync().windowHeight;  
        }

获取当前屏幕状态栏高度

onLoad() {  
          let statusHeight= uni.getSystemInfoSync().statusBarHeight;  
        }

uniapp系统通知权限判断android6.0和IOS

Fri, 21 Feb 2020 10:21:24 +0800

android6.0+

var main = plus.android.runtimeMainActivity();  
var pkName = main.getPackageName();  
var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");  
var packageNames = NotificationManagerCompat.from(main);  
console.log(JSON.stringify(packageNames));  
if (packageNames.areNotificationsEnabled()) {  
    console.log('已开启通知权限');  
}else{  
    uni.showModal({  
        title: '提示',  
        content: '请先打开APP通知权限',  
        showCancel: false,  
        success: function (res) {  
            if (res.confirm) {  
                var Intent = plus.android.importClass('android.content.Intent');  
                var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');//可设置表中所有Action字段  
                intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);  
                main.startActivity(intent);  
            }  
        }  
    });  
}

IOS

var UIApplication = plus.ios.import("UIApplication");  
var app = UIApplication.sharedApplication();  
var enabledTypes  = 0;  
if (app.currentUserNotificationSettings) {  
    var settings = app.currentUserNotificationSettings();  
    enabledTypes = settings.plusGetAttribute("types");  
} else {  
    //针对低版本ios系统  
    enabledTypes = app.enabledRemoteNotificationTypes();  
}  
plus.ios.deleteObject(app);  
if ( 0 == enabledTypes ) {  
    uni.showModal({  
        title: '提示',  
        content: '请先打开APP通知权限',  
        showCancel: false,  
        success: function (res) {  
            if (res.confirm) {  
                var UIApplication = plus.ios.import("UIApplication");  
                var NSURL = plus.ios.import("NSURL");  
                var setting = NSURL.URLWithString("app-settings:");  
                var application = UIApplication.sharedApplication();  
                application.openURL(setting);  
                plus.ios.deleteObject(setting);  
                plus.ios.deleteObject(application);  
            }  
        }  
    });  
}

uniapp安卓离线打包配置官方插件原生插件

Fri, 24 Jan 2020 10:19:44 +0800

参考文档：

最好先看看我之前的一篇，打下基础：

uniapp、5+app 安卓离线打包（多图，慎入）

1、先下好官方5+SDK

2、文件对应作用

3、打开Anadroid Studio导入uniapp示例工程

4、点击Project和Anadroid可以切换目录视图

5、这三个红框，是插件关键文件，后面主要改的就是它们

6、首先删除无用依赖，这个是示例的一个插件，我们不需要

7、按下图所示，修改appid，appid在hbuilderX的项目工程文件里，manifest.json源码视图里可以拿到

用hbuilderX把工程生成离线文件，然后替换上图的www文件夹（删除替换）

8、修改包名，格式是xxx.xxx.xxx例如com.test.test

按上图所示，修改两个文件的包名，修改完毕，点击下图所示红框部分

9、查看项目工程所需权限，在Anadroid Studio配置对应权限

打开权限excel表格查看，按需修改

按需复制sdk

填写对应的插件appid，key等

在AndroidManifest.xml文件里配置权限
jar包，arr包放到libs文件夹
开放给js层的方法名，在dcloud_properties.xml文件里配置

10、原生插件，官方插件，打开hbuilderX，查看工程目录nativeplugins里安卓部分

jar包，arr包放到libs文件夹
android文件夹下的packge.json,红框部分直接复制到 dcloud_uniplugins.json

11、下载官方公用测试版签名

https://ask.dcloud.net.cn/article/36522

12、填写签名，自动打包签名。

发布正式版的时候，就新建一个release，自己生成一个新签名。然后按下面步骤添加，打包正式版自动签名

完成以上步骤后，点击ok等它跑完，就可以打包的时候自动签名了
参考文档：https://blog.csdn.net/bxllove/article/details/79742480

13、自定义第三方原生插件待续……

uniapp动态修改原生标题栏按钮webview样式等

Fri, 15 Nov 2019 10:18:23 +0800

// #ifdef APP-PLUS
var currentWebview = this.$mp.page.$getAppWebview();
var tn = currentWebview.getStyle().titleNView;
tn.buttons[1].text = this.cancelFlag ? "完成":"编辑";
currentWebview.setStyle({
titleNView: tn
});
// #endif

原生view的样式参考http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewStyles

this.currentWebview = this.$mp.page.$getAppWebview();
this.titleNView = this.currentWebview.getTitleNView();
let currentWebview = plus.webview.currentWebview(); //获取当前页面的webview对象
this.currentWebview = currentWebview;
// this.webview = currentWebview.children()[0];
this.webview = plus.webview.create('/hybrid/html/index.html?app=true', 'custom-webview', {
top: 0 ,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
cachemode:"cacheElseNetwork",//只要存在缓存（即使过期）数据则使用，否则从网络获取
hardwareAccelerated:true,//开启硬件加速
kernel:"WKWebview",//使用WKWebview内核
popGesture:"none"
});
this.currentWebview.append(this.webview);

let currentWebview = plus.webview.currentWebview(); //获取当前页面的webview对象
this.currentWebview = currentWebview;
// this.webview = currentWebview.children()[0];
this.webview = plus.webview.create('/hybrid/html/index.html?app=true', 'custom-webview', {
top: 0 ,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
cachemode:"cacheElseNetwork",//只要存在缓存（即使过期）数据则使用，否则从网络获取
hardwareAccelerated:true,//开启硬件加速
kernel:"WKWebview",//使用WKWebview内核
popGesture:"none"
});
this.currentWebview.append(this.webview);