
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月份我发了三条帖子全部石沉大海,不出意外这条也是。那么我想问下社区的存在到底有什么意义。

uni-app自由拖动按钮
uni-app自由拖动按钮
插件预览图
使用教程
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自由拖动按钮
插件预览图
使用教程
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是支持在手机或平板上编写代码的编辑器,可以在线运行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是支持在手机或平板上编写代码的编辑器,可以在线运行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 样式变形的处理办法
使用 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 等参数 详情

制作自定义基座打包失败
失败日志:https://service.dcloud.net.cn/build/errorLog/edbbb990-0f5a-11eb-810a-1bdd8e587e9e
第二次失败日志:https://service.dcloud.net.cn/build/errorLog/bce51220-0f5b-11eb-accd-e14cc357f5c1
使用HBuilder X2.8.13打包成功
使用HBuilder X2.9.3打包失败
失败日志:https://service.dcloud.net.cn/build/errorLog/edbbb990-0f5a-11eb-810a-1bdd8e587e9e
第二次失败日志:https://service.dcloud.net.cn/build/errorLog/bce51220-0f5b-11eb-accd-e14cc357f5c1
使用HBuilder X2.8.13打包成功
使用HBuilder X2.9.3打包失败
收起阅读 »
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
});
}
收起阅读 »