HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app中蓝牙开发

研究了一个星期的蓝牙下发和上传协议类似68 12 AA AA AA AA AA AA AA 01 90 4F 10 00 00 00 00 00 00 00 00 00 01 00 00 00 00 00 00 00 00 11 16给硬件设备,并且接收蓝牙设备上传的回应数据

如果需要的可以扣扣联系我,没时间写文档。后边会补上,希望可以帮上像我当时那么无助的你

继续阅读 »

研究了一个星期的蓝牙下发和上传协议类似68 12 AA AA AA AA AA AA AA 01 90 4F 10 00 00 00 00 00 00 00 00 00 01 00 00 00 00 00 00 00 00 11 16给硬件设备,并且接收蓝牙设备上传的回应数据

如果需要的可以扣扣联系我,没时间写文档。后边会补上,希望可以帮上像我当时那么无助的你

收起阅读 »

请问能否单个问题付费咨询

关于官方云打包闪退的问题,没有一个官方愿意来协助处理。
我想咨询下怎么可以联系到官方人员?
从8月份我发了三条帖子全部石沉大海,不出意外这条也是。那么我想问下社区的存在到底有什么意义。

关于官方云打包闪退的问题,没有一个官方愿意来协助处理。
我想咨询下怎么可以联系到官方人员?
从8月份我发了三条帖子全部石沉大海,不出意外这条也是。那么我想问下社区的存在到底有什么意义。

微信组件,H5跳转小程序和APP的wx-open-launch-weapp,该组件报错没用注解错误原因

uniapp

踩坑之后发现其实不是组件问题,是真机和开发工具问题,微信还没在开发工具做兼容,毕竟这个组件还比较新,所以开发工具会报错,真机就不会,只是样式会乱,所以需要把样式写在里面。其实你使用v-html和直接使用组件都是一样的效果的,都可以,我是使用vue开发的,所以也是适用uniapp的,

继续阅读 »

踩坑之后发现其实不是组件问题,是真机和开发工具问题,微信还没在开发工具做兼容,毕竟这个组件还比较新,所以开发工具会报错,真机就不会,只是样式会乱,所以需要把样式写在里面。其实你使用v-html和直接使用组件都是一样的效果的,都可以,我是使用vue开发的,所以也是适用uniapp的,

收起阅读 »

uni-app自由拖动按钮

uniapp模板

uni-app自由拖动按钮

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下uni-drag-button目录拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <uni-drag-button></uni-drag-button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            };  
        }  
    }  
</script>  

<style lang="less">  

</style>  
兼容性

uni-app项目中使用都兼容

继续阅读 »

uni-app自由拖动按钮

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下uni-drag-button目录拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <uni-drag-button></uni-drag-button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            };  
        }  
    }  
</script>  

<style lang="less">  

</style>  
兼容性

uni-app项目中使用都兼容

收起阅读 »

HBX中uniapp项目 使用微信小程序云开发,不使用uniCloud。

开始看了一下uniCloud 的使用,文档倒是很全。但要使用其扩展的client-DB服务,闲麻烦。想直接用微信小程序云开发的话,按下面步骤做就好了!

步骤

1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config
打开终端运行 npm 安装版本
npm install copy-webpack-plugin@5.0.0

2、创建你自己云函数目录文件。我设置的:
wxcloud/cloudfunctions

3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝(后续你可用创建函数文件就会拷贝了)。 以下是我目前的配置:
const CopyWebpackPlugin = require("copy-webpack-plugin")
const path = require("path")

module.exports = {
// 配置路径别名
configureWebpack: {
devServer: {
disableHostCheck: true
},

    // 配置支持 微信小程序的 云开发  
    plugins: [  
        new CopyWebpackPlugin([{  
            from: path.join(__dirname, 'wxcloud/cloudfunctions'),  
            to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env  
                .UNI_PLATFORM, 'wxcloud/cloudfunctions'),  
        }, ]),  
    ]  
}  

}

4、按照微信云开发 我的第一个云函数 创建你的hbx中的云函数文件
包含3个文件:config.json、index.js、package.json 。文件具体内容 你可以在微信开发工具里面 右键自己创建一个云函数 看看微信生成的文件内容。

5、HBX写好云函数后(3个文件都需要),编译项目,文件会拷贝到微信开发工具。然后,在微信开发工具里面右键同步你的小程序云函数。前提是你创建了和绑定了云环境。
最后,HBX 里面可以写调用云函数,执行测试就好了!
//初始化你的云环境
wx.cloud.init({
// 小程序云环境ID
env: '****',
traceUser: true
})

 // 测试云函数调用  
  wx.cloud.callFunction({  
        // 云函数名称  
    name: 'test',  
   // 传给云函数的参数  
   data: {},  
   success: function(res) {  
    console.log(res);   
    },  
   fail: console.error  
});  

运行结果,
{errMsg: "cloud.callFunction:ok", result: {…}, requestID: "a3fce32a-0f80-11eb-87f2-5254001c5def"}

总结:配置了一个编译时拷贝云函数目录到微信开发目录而已; 其他云开发环境设置等在微信小程序云开发里设置就完事儿了。代码编写可以在HBX 里面完成。

继续阅读 »

开始看了一下uniCloud 的使用,文档倒是很全。但要使用其扩展的client-DB服务,闲麻烦。想直接用微信小程序云开发的话,按下面步骤做就好了!

步骤

1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config
打开终端运行 npm 安装版本
npm install copy-webpack-plugin@5.0.0

2、创建你自己云函数目录文件。我设置的:
wxcloud/cloudfunctions

3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝(后续你可用创建函数文件就会拷贝了)。 以下是我目前的配置:
const CopyWebpackPlugin = require("copy-webpack-plugin")
const path = require("path")

module.exports = {
// 配置路径别名
configureWebpack: {
devServer: {
disableHostCheck: true
},

    // 配置支持 微信小程序的 云开发  
    plugins: [  
        new CopyWebpackPlugin([{  
            from: path.join(__dirname, 'wxcloud/cloudfunctions'),  
            to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env  
                .UNI_PLATFORM, 'wxcloud/cloudfunctions'),  
        }, ]),  
    ]  
}  

}

4、按照微信云开发 我的第一个云函数 创建你的hbx中的云函数文件
包含3个文件:config.json、index.js、package.json 。文件具体内容 你可以在微信开发工具里面 右键自己创建一个云函数 看看微信生成的文件内容。

5、HBX写好云函数后(3个文件都需要),编译项目,文件会拷贝到微信开发工具。然后,在微信开发工具里面右键同步你的小程序云函数。前提是你创建了和绑定了云环境。
最后,HBX 里面可以写调用云函数,执行测试就好了!
//初始化你的云环境
wx.cloud.init({
// 小程序云环境ID
env: '****',
traceUser: true
})

 // 测试云函数调用  
  wx.cloud.callFunction({  
        // 云函数名称  
    name: 'test',  
   // 传给云函数的参数  
   data: {},  
   success: function(res) {  
    console.log(res);   
    },  
   fail: console.error  
});  

运行结果,
{errMsg: "cloud.callFunction:ok", result: {…}, requestID: "a3fce32a-0f80-11eb-87f2-5254001c5def"}

总结:配置了一个编译时拷贝云函数目录到微信开发目录而已; 其他云开发环境设置等在微信小程序云开发里设置就完事儿了。代码编写可以在HBX 里面完成。

收起阅读 »

自学编程应该去哪里?

自学编程首先 JSRUN

JSRUN 是一个强大功能的在线编辑器,更是一个编程学习网站

jsrun 强大的学习网站,更是强大的编辑器

JSRUN是支持在手机或平板上编写代码的编辑器,可以在线运行Node.js、PHP、Java、C语言、C++、Python、Go语言、Kotlin、Rust、Dart、R语言、C#、Ruby、objc、F#、VB.NET、Swift、clojure、Groovy、Lua、Pascal、Perl、Shell、Erlang、Scala、Haskell、Nim、Lisp、OCaml、Racket 30种编程语言。

同时也有以上三十多种编程语言全套教程,更有十多种开发框架教程,JSRUN  为大家提供了免费学习编程的机会

JSRUN配置高性能服务器来运行代码,希望能和闪电一样快速。同时JSRUN支持vue.js/angular.js的在线运行编辑器 、手机端js编辑器 js在线运行工具, 支持babel进行ES6开发 。

JSRUN拥有功能强大的HTML在线运行编辑器、JS在线运行编辑器、CSS在线运行编辑器 , 目前已经有3万多工程师在JSRUN留下了优秀的开源代码,他们的分享是您前端开发和学习的宝藏, 可以免费保存、分享js源码,提供Embed服务 , 独创的实时多屏预览开发,JSRUN成倍提高开发调试效率,比jsfiddle/codepen更强大。

继续阅读 »

自学编程首先 JSRUN

JSRUN 是一个强大功能的在线编辑器,更是一个编程学习网站

jsrun 强大的学习网站,更是强大的编辑器

JSRUN是支持在手机或平板上编写代码的编辑器,可以在线运行Node.js、PHP、Java、C语言、C++、Python、Go语言、Kotlin、Rust、Dart、R语言、C#、Ruby、objc、F#、VB.NET、Swift、clojure、Groovy、Lua、Pascal、Perl、Shell、Erlang、Scala、Haskell、Nim、Lisp、OCaml、Racket 30种编程语言。

同时也有以上三十多种编程语言全套教程,更有十多种开发框架教程,JSRUN  为大家提供了免费学习编程的机会

JSRUN配置高性能服务器来运行代码,希望能和闪电一样快速。同时JSRUN支持vue.js/angular.js的在线运行编辑器 、手机端js编辑器 js在线运行工具, 支持babel进行ES6开发 。

JSRUN拥有功能强大的HTML在线运行编辑器、JS在线运行编辑器、CSS在线运行编辑器 , 目前已经有3万多工程师在JSRUN留下了优秀的开源代码,他们的分享是您前端开发和学习的宝藏, 可以免费保存、分享js源码,提供Embed服务 , 独创的实时多屏预览开发,JSRUN成倍提高开发调试效率,比jsfiddle/codepen更强大。

收起阅读 »

更新 HBuilderX 2.9.0+ 后 rpx(upx)、rem 样式变形的处理办法

uni_app

使用 rem 的部分变形

HBuilderX 2.9.0+ 相关更新:调整根字体大小为系统默认大小与微信小程序平台一致

调整后 rem 默认大小不再为 窗口宽度/20,改为了浏览器(webview)默认的字体大小,一般为 16px

对于历史项目如需不改动代码保持原来的样式可以参考如下操作:

App

编辑 __uniappview.html 文件(路径:/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/uni-app-plus/template/v3/__uniappview.html)

<!DOCTYPE html>  
<html lang="zh-CN">  

  <head>  
    <meta charset="UTF-8" />  
    <script>  
      var __UniViewStartTime__ = Date.now();  
      document.addEventListener('DOMContentLoaded', function() {  
          document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
      })  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title>View</title>  
    <link rel="stylesheet" href="view.css" />  
  </head>  

  <body>  
    <div id="app"></div>  
    <script src="__uniappes6.js"></script>  
    <script src="view.umd.min.js"></script>  
    <script src="app-view.js"></script>  
  </body>  

</html>

H5

项目内增加 template.h5.html 文件,并配置在 manifest.json -> h5 内 `"template" : "template.h5.html"

<!DOCTYPE html>  
<html lang="zh-CN">  

    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <title>  
            <%= htmlWebpackPlugin.options.title %>  
        </title>  
        <script>  
            document.addEventListener('DOMContentLoaded', function() {  
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
            })  
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))  
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
        </script>  
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />  
    </head>  

    <body>  
        <noscript>  
            <strong>Please enable JavaScript to continue.</strong>  
        </noscript>  
        <div id="app"></div>  
        <!-- built files will be auto injected -->  
    </body>  

</html>

使用 rpx(upx) 的部分变形

HBuilderX 2.9.0+ 还新增了 rpx(upx) 的范围配置,如因 rpx(upx) 在宽屏的处理问题异常,可以设置 rpxCalcMaxDeviceWidth 为 99999,具体参考:

  • 【重要】App平台、H5平台 新增 rpx(upx) 配置,默认限定了 rpx(upx) 生效的最大屏幕宽度为 px。可在 pages.json -> globalStyle 配置 rpxCalcMaxDeviceWidth、rpxCalcBaseDeviceWidth、rpxCalcIncludeWidth 等参数 详情
继续阅读 »

使用 rem 的部分变形

HBuilderX 2.9.0+ 相关更新:调整根字体大小为系统默认大小与微信小程序平台一致

调整后 rem 默认大小不再为 窗口宽度/20,改为了浏览器(webview)默认的字体大小,一般为 16px

对于历史项目如需不改动代码保持原来的样式可以参考如下操作:

App

编辑 __uniappview.html 文件(路径:/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/uni-app-plus/template/v3/__uniappview.html)

<!DOCTYPE html>  
<html lang="zh-CN">  

  <head>  
    <meta charset="UTF-8" />  
    <script>  
      var __UniViewStartTime__ = Date.now();  
      document.addEventListener('DOMContentLoaded', function() {  
          document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
      })  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title>View</title>  
    <link rel="stylesheet" href="view.css" />  
  </head>  

  <body>  
    <div id="app"></div>  
    <script src="__uniappes6.js"></script>  
    <script src="view.umd.min.js"></script>  
    <script src="app-view.js"></script>  
  </body>  

</html>

H5

项目内增加 template.h5.html 文件,并配置在 manifest.json -> h5 内 `"template" : "template.h5.html"

<!DOCTYPE html>  
<html lang="zh-CN">  

    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <title>  
            <%= htmlWebpackPlugin.options.title %>  
        </title>  
        <script>  
            document.addEventListener('DOMContentLoaded', function() {  
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
            })  
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))  
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
        </script>  
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />  
    </head>  

    <body>  
        <noscript>  
            <strong>Please enable JavaScript to continue.</strong>  
        </noscript>  
        <div id="app"></div>  
        <!-- built files will be auto injected -->  
    </body>  

</html>

使用 rpx(upx) 的部分变形

HBuilderX 2.9.0+ 还新增了 rpx(upx) 的范围配置,如因 rpx(upx) 在宽屏的处理问题异常,可以设置 rpxCalcMaxDeviceWidth 为 99999,具体参考:

  • 【重要】App平台、H5平台 新增 rpx(upx) 配置,默认限定了 rpx(upx) 生效的最大屏幕宽度为 px。可在 pages.json -> globalStyle 配置 rpxCalcMaxDeviceWidth、rpxCalcBaseDeviceWidth、rpxCalcIncludeWidth 等参数 详情
收起阅读 »

5+App Android、iOS 截屏任意区域(解决iOS机型下clip-top无效bug )

Android机型,截图正常
iOS机型,bitmap.save时,clip的top参数无效,但在plus.webview.currentWebview().draw时,是有效的。
源码示例 https://blog.csdn.net/qq285679784/article/details/109001187

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  
        <div>  
            <img src="http://p1.bqimg.com/567571/cedca293f269ba11.jpg" width="100%" />  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script src="js/drawScreen.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            mui.plusReady(function() {  

                // 截屏图片比例 5:4  
                let descWidth = document.body.clientWidth;  
                let descHeight = descWidth / (5 / 4);  

                var options = {  
                    successCB: function(e) {  
                        console.log(JSON.stringify(e))  
                    },  
                    errorCB: function(e) {  
                        console.log(JSON.stringify(e))  
                    },  
                    quality: 80,  
                    clip: {  
                        top: '20px',  
                        left: '0px',  
                        width: descWidth,  
                        height: descHeight  
                    }  
                }  

                drawScreen(options);  
            });  
        </script>  
    </body>  
</html>  

/*     drawScreen.js  
    参数说明:  
    参数名     类型         说明                               默认值         是否必选  
    successCB |  Function  | 成功回调函数                 |               |   Y  
    errorCB   |  Function  | 失败,回调函数                    |   Function    |     
    fileName  |  String    | 文件名,不需后缀名              |   当前时间戳   |     
    imgID     |  String    | 原生图片ID                     |   当前时间戳   |     
    overwrite |  Boolean   | 是否覆盖                       |   true        |     
    format    |  String    | 保存的格式                      |   PNG         |     
    quality   |  Number    | 保存质量,1-100,1最低,100最高   |   50          |     
    clip      |  Object    | 指定截屏区域                 |   {top:’0px’,left:’0px’,width:’100%’,height:’100%’}     
*/  

var drawScreen = function(options) {  
    options = {  
        successCB: options.successCB || function() {},  
        errorCB: options.errorCB || function() {},  
        fileName: options.fileName || Date.parse(new Date()),  
        imgID: options.imgID || String(Date.parse(new Date())),  
        overwrite: options.overwrite || true,  
        format: options.format || 'jpg',  
        quality: options.quality || 50,  
        clip: options.clip || {  
            top: '0px',  
            left: '0px',  
            width: '100%',  
            height: '100%'  
        }  
    }  
    var self = plus.webview.currentWebview();  
    var bitmap = new plus.nativeObj.Bitmap(options.imgID);  

    //绘制截图  
    self.draw(bitmap, function() {  
        // 保存Bitmap图片  
        bitmap.save('_doc/' + options.fileName + '.' + options.format, {  
            overwrite: options.overwrite,  
            format: options.format,  
            quality: options.quality,  
            clip: options.clip  //iOS机型,bitmap.save时,clip的top参数无效,但在self.draw时,是有效的。  
        }, function(i) {  
            //销毁Bitmap图片  
            bitmap.clear();  
            options.successCB({  
                success: 'success',  
                details: i.target  
            });  
        }, function(e) {  
            bitmap.clear();  
            options.errorCB({  
                error: '图片保存失败',  
                details: e  
            });  
        });  

    }, function(e) {  
        options.errorCB({  
            error: '截屏绘制失败',  
            details: e  
        });  
    },{  
        clip: options.clip //绘制截图时,设置clip,解决iOS机型下clip-top无效bug  
    });  
}
继续阅读 »

Android机型,截图正常
iOS机型,bitmap.save时,clip的top参数无效,但在plus.webview.currentWebview().draw时,是有效的。
源码示例 https://blog.csdn.net/qq285679784/article/details/109001187

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  
        <div>  
            <img src="http://p1.bqimg.com/567571/cedca293f269ba11.jpg" width="100%" />  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script src="js/drawScreen.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            mui.plusReady(function() {  

                // 截屏图片比例 5:4  
                let descWidth = document.body.clientWidth;  
                let descHeight = descWidth / (5 / 4);  

                var options = {  
                    successCB: function(e) {  
                        console.log(JSON.stringify(e))  
                    },  
                    errorCB: function(e) {  
                        console.log(JSON.stringify(e))  
                    },  
                    quality: 80,  
                    clip: {  
                        top: '20px',  
                        left: '0px',  
                        width: descWidth,  
                        height: descHeight  
                    }  
                }  

                drawScreen(options);  
            });  
        </script>  
    </body>  
</html>  

/*     drawScreen.js  
    参数说明:  
    参数名     类型         说明                               默认值         是否必选  
    successCB |  Function  | 成功回调函数                 |               |   Y  
    errorCB   |  Function  | 失败,回调函数                    |   Function    |     
    fileName  |  String    | 文件名,不需后缀名              |   当前时间戳   |     
    imgID     |  String    | 原生图片ID                     |   当前时间戳   |     
    overwrite |  Boolean   | 是否覆盖                       |   true        |     
    format    |  String    | 保存的格式                      |   PNG         |     
    quality   |  Number    | 保存质量,1-100,1最低,100最高   |   50          |     
    clip      |  Object    | 指定截屏区域                 |   {top:’0px’,left:’0px’,width:’100%’,height:’100%’}     
*/  

var drawScreen = function(options) {  
    options = {  
        successCB: options.successCB || function() {},  
        errorCB: options.errorCB || function() {},  
        fileName: options.fileName || Date.parse(new Date()),  
        imgID: options.imgID || String(Date.parse(new Date())),  
        overwrite: options.overwrite || true,  
        format: options.format || 'jpg',  
        quality: options.quality || 50,  
        clip: options.clip || {  
            top: '0px',  
            left: '0px',  
            width: '100%',  
            height: '100%'  
        }  
    }  
    var self = plus.webview.currentWebview();  
    var bitmap = new plus.nativeObj.Bitmap(options.imgID);  

    //绘制截图  
    self.draw(bitmap, function() {  
        // 保存Bitmap图片  
        bitmap.save('_doc/' + options.fileName + '.' + options.format, {  
            overwrite: options.overwrite,  
            format: options.format,  
            quality: options.quality,  
            clip: options.clip  //iOS机型,bitmap.save时,clip的top参数无效,但在self.draw时,是有效的。  
        }, function(i) {  
            //销毁Bitmap图片  
            bitmap.clear();  
            options.successCB({  
                success: 'success',  
                details: i.target  
            });  
        }, function(e) {  
            bitmap.clear();  
            options.errorCB({  
                error: '图片保存失败',  
                details: e  
            });  
        });  

    }, function(e) {  
        options.errorCB({  
            error: '截屏绘制失败',  
            details: e  
        });  
    },{  
        clip: options.clip //绘制截图时,设置clip,解决iOS机型下clip-top无效bug  
    });  
}
收起阅读 »

原来火绒是内鬼

今天把万年不更新的Hbuilder更到了Hbuilder X,原来现在图标都绿了,更完后内置语法插件下载不下来,设置里装插件也装不了,提示网络没连接,最后把火绒关了再打开就可以了。

今天把万年不更新的Hbuilder更到了Hbuilder X,原来现在图标都绿了,更完后内置语法插件下载不下来,设置里装插件也装不了,提示网络没连接,最后把火绒关了再打开就可以了。