关于mui扫描二维码不能扫反码的解决方案
可以使用拍照+jsQR.js实现将反码、正码二维码拍照解析。只是会有点慢，但至少可以解析出数据。
jsQR.js下载地址：https://github.com/cozmo/jsQR/tree/master/dist
本篇文章代码案例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.sizes {
width: 100%;
height: 420px;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">扫码</h1>
</header>
<div class="mui-content">
<canvas id="canvas1" class="sizes"></canvas>
<!--<img class="sizes" id="imgs" />-->
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/apps.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jsqr/jsQR.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var getQrCodeValueNum = 0;
mui.init();
if(window.plus) {
console.log("window.plus");
plusready();
} else {
document.addEventListener('plusready', plusready, false);
console.log("addEventListener")
}
function plusready() {
getQrCodeValueNum = 0;
//处理返回事件
plus.key.addEventListener('backbutton', function() {
plus.nativeUI.closeWaiting();
plus.webview.currentWebview().close();
})
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
// 页面加载后，延迟调用摄像机拍照操作
var cmr = plus.camera.getCamera();
setTimeout(function() {
cmr.captureImage(successCB, errorCB, {});
}, 1000);
// 成功回执
function successCB(capturedFile) {
// 拍照图片保存路径
console.log(JSON.stringify(capturedFile));
if(capturedFile) {
console.log("6666");
plus.io.resolveLocalFileSystemURL(capturedFile, function(entry) {
console.log("successCB-->"+entry);
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}
}
// 失败回执
function errorCB(error) {
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
console.log("code:" + code + " msg:" + message);
mui.alert("拍照失败！", "温馨提示", "确定", function() {
plus.webview.currentWebview().close();
}, "div");
}
// 图片压缩
function compressImage(url,filename){
// var name="_doc/upload/"+filename;
// plus.zip.compressImage({
// src:url,//src: (String 类型 )压缩转换原始图片的路径
// dst:name,//压缩转换目标图片的路径
// quality:100,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
// overwrite:true,//overwrite: (Boolean 类型 )覆盖生成新文件
// width:'300',
// height:'420'
//
// },
// function(zip) {
// //页面显示图片
// showPics(zip.target,name);
// },function(error) {
// plus.nativeUI.toast("压缩图片失败，请稍候再试");
// });
showPics(url,name);
}
// 图片显示
function showPics(url,name){
//根据路径读取到文件
plus.io.resolveLocalFileSystemURL(url,function(entry){
entry.file( function(file){
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("获取图片中。。。");
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
var picUrl = e.target.result.toString();
console.log("picUrl-->\n"+picUrl);
// var img1 = $("#imgs").attr("src");//获取页面存放图片标签的值
// if(img1 =="" || img1 == undefined){
// $("#imgs").attr("src",picUrl);//将图片base64编码赋值给img标签
// console.log($("#imgs").attr("src"));
// }
// var code = jsQR($("#imgs").attr("src"), $("#imgs").width, $("#imgs").height, {
// inversionAttempts: "invertFirst"
// });
// console.log("code->"+code);
var imgs = new Image();
imgs.src = picUrl;
imgs.onload = function() {
console.log("imgs.onload");
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("正在加载。。。");
var ratio = getPixelRatio(context1);
console.log("ratio-->"+ratio);
canvas1.width = canvas1.width*ratio;
canvas1.height = canvas1.height*ratio;
// canvas1.width/2 必须 /2 不然解析不出来
context1.drawImage(imgs,0,0,canvas1.width/2,canvas1.height);
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("正在解析。。。");
var imageData = context1.getImageData(0, 0, canvas1.width, canvas1.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "invertFirst"
});
console.log("code->"+code);
if(code){
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("解析成功");
console.log(code.data);
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
if(getQrCodeValueNum <= 0) {
var qrCodeValue = code.data;
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("服务器请求中。。。");
// 请求服务器，保证只会请求一次
setTimeout(function(){
getInfaByQRResult(qrCodeValue);
},1500);
}
getQrCodeValueNum = getQrCodeValueNum + 1;
}else{
plus.nativeUI.closeWaiting();
mui.alert("解析失败，请重试！", "温馨提示", "确定", function() {
plus.webview.currentWebview().close();
}, "div");
}
}
}
});
});
}
// 画出二维码的部位
function drawLine(begin, end, color) {
context1.beginPath();
context1.moveTo(begin.x, begin.y);
context1.lineTo(end.x, end.y);
context1.lineWidth = 4;
context1.strokeStyle = color;
context1.stroke();
}
//获取canvas应该放大的倍数的方法(这样拍照的图片放入画布，能针对不同手机适配，提高清晰度)
function getPixelRatio(context) {
var backingStore = context.backingStorePixelRatio
|| context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio
|| context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio
|| context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
}
</script>
</body>
</html>
具体可以参考我的博客：
https://blog.csdn.net/qq_38322527/article/details/116033962
可以使用拍照+jsQR.js实现将反码、正码二维码拍照解析。只是会有点慢，但至少可以解析出数据。
jsQR.js下载地址：https://github.com/cozmo/jsQR/tree/master/dist
本篇文章代码案例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.sizes {
width: 100%;
height: 420px;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">扫码</h1>
</header>
<div class="mui-content">
<canvas id="canvas1" class="sizes"></canvas>
<!--<img class="sizes" id="imgs" />-->
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/apps.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jsqr/jsQR.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var getQrCodeValueNum = 0;
mui.init();
if(window.plus) {
console.log("window.plus");
plusready();
} else {
document.addEventListener('plusready', plusready, false);
console.log("addEventListener")
}
function plusready() {
getQrCodeValueNum = 0;
//处理返回事件
plus.key.addEventListener('backbutton', function() {
plus.nativeUI.closeWaiting();
plus.webview.currentWebview().close();
})
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
// 页面加载后，延迟调用摄像机拍照操作
var cmr = plus.camera.getCamera();
setTimeout(function() {
cmr.captureImage(successCB, errorCB, {});
}, 1000);
// 成功回执
function successCB(capturedFile) {
// 拍照图片保存路径
console.log(JSON.stringify(capturedFile));
if(capturedFile) {
console.log("6666");
plus.io.resolveLocalFileSystemURL(capturedFile, function(entry) {
console.log("successCB-->"+entry);
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}
}
// 失败回执
function errorCB(error) {
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
console.log("code:" + code + " msg:" + message);
mui.alert("拍照失败！", "温馨提示", "确定", function() {
plus.webview.currentWebview().close();
}, "div");
}
// 图片压缩
function compressImage(url,filename){
// var name="_doc/upload/"+filename;
// plus.zip.compressImage({
// src:url,//src: (String 类型 )压缩转换原始图片的路径
// dst:name,//压缩转换目标图片的路径
// quality:100,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
// overwrite:true,//overwrite: (Boolean 类型 )覆盖生成新文件
// width:'300',
// height:'420'
//
// },
// function(zip) {
// //页面显示图片
// showPics(zip.target,name);
// },function(error) {
// plus.nativeUI.toast("压缩图片失败，请稍候再试");
// });
showPics(url,name);
}
// 图片显示
function showPics(url,name){
//根据路径读取到文件
plus.io.resolveLocalFileSystemURL(url,function(entry){
entry.file( function(file){
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("获取图片中。。。");
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
var picUrl = e.target.result.toString();
console.log("picUrl-->\n"+picUrl);
// var img1 = $("#imgs").attr("src");//获取页面存放图片标签的值
// if(img1 =="" || img1 == undefined){
// $("#imgs").attr("src",picUrl);//将图片base64编码赋值给img标签
// console.log($("#imgs").attr("src"));
// }
// var code = jsQR($("#imgs").attr("src"), $("#imgs").width, $("#imgs").height, {
// inversionAttempts: "invertFirst"
// });
// console.log("code->"+code);
var imgs = new Image();
imgs.src = picUrl;
imgs.onload = function() {
console.log("imgs.onload");
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("正在加载。。。");
var ratio = getPixelRatio(context1);
console.log("ratio-->"+ratio);
canvas1.width = canvas1.width*ratio;
canvas1.height = canvas1.height*ratio;
// canvas1.width/2 必须 /2 不然解析不出来
context1.drawImage(imgs,0,0,canvas1.width/2,canvas1.height);
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("正在解析。。。");
var imageData = context1.getImageData(0, 0, canvas1.width, canvas1.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "invertFirst"
});
console.log("code->"+code);
if(code){
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("解析成功");
console.log(code.data);
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
if(getQrCodeValueNum <= 0) {
var qrCodeValue = code.data;
plus.nativeUI.closeWaiting();
plus.nativeUI.showWaiting("服务器请求中。。。");
// 请求服务器，保证只会请求一次
setTimeout(function(){
getInfaByQRResult(qrCodeValue);
},1500);
}
getQrCodeValueNum = getQrCodeValueNum + 1;
}else{
plus.nativeUI.closeWaiting();
mui.alert("解析失败，请重试！", "温馨提示", "确定", function() {
plus.webview.currentWebview().close();
}, "div");
}
}
}
});
});
}
// 画出二维码的部位
function drawLine(begin, end, color) {
context1.beginPath();
context1.moveTo(begin.x, begin.y);
context1.lineTo(end.x, end.y);
context1.lineWidth = 4;
context1.strokeStyle = color;
context1.stroke();
}
//获取canvas应该放大的倍数的方法(这样拍照的图片放入画布，能针对不同手机适配，提高清晰度)
function getPixelRatio(context) {
var backingStore = context.backingStorePixelRatio
|| context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio
|| context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio
|| context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
}
</script>
</body>
</html>
具体可以参考我的博客：
https://blog.csdn.net/qq_38322527/article/details/116033962
logger.js （改自：https://ext.dcloud.net.cn/plugin?id=3938#rating）
/**
* js 日期格式化
* 传时间戳参数进行时间戳转换，不传时返回当前时间（返回年月日时分秒格式）
* @param {Object} timeStamp 时间戳参数 非必传
* @param {Object} format 格式化样式 非必传
*/
function getTimeStampDatetime(format = 'yyyy-MM-dd HH:mm:ss', timeStamp) {
let nowDatetime = new Date()
timeStamp ? nowDatetime = new Date(timeStamp) : nowDatetime = new Date()
return nowDatetime.Format(format)
}
Date.prototype.Format = function(fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[
k]).substr(("" + o[k]).length)));
return fmt;
}
// 获取日志文件信息
function getLogFileInfo() {
// 今日日期
let nowDate = getTimeStampDatetime("yyyy-MM-dd")
// 当前时间精确到秒
let nowTime = getTimeStampDatetime("HH:mm:ss")
// 文件名称
const fileName = 'log.' + nowDate
// 内容前缀
const linePrefix = nowTime + ' '
const lineSuffix = "\r\n"
return {
fileName,
linePrefix,
lineSuffix
}
}
/**
* 日志内容输出并写入文件
* 文件写入手机地址，华为Android/data/应用包名/documents/app-log/xxxx
* @param {string} text 写入日志的内容
* @param {boolean} isError 是否错误
*/
function log(text, isError) {
const fileInfo = getLogFileInfo()
let content = fileInfo.linePrefix + text + fileInfo.lineSuffix
isError && (content = '#error# ' + content)
isError ? console.error(text) : console.log(text)
//#ifndef APP-PLUS
return
//#endif
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
// 可通过fs操作PUBLIC_DOCUMENTS文件系统
// 创建日志文件夹
fs.root.getDirectory("app-log", {
create: true,
exclusive: false
}, function(dir) {
// 创建或写入文件
console.log("Directory Entry Name: " + dir.fullPath + fileInfo.fileName);
dir.getFile(fileInfo.fileName, {
create: true,
}, function(fileEntry) {
// 找到文件准备写入操作
fileEntry.file(function(file) {
// create a FileWriter to write to the file
fileEntry.createWriter(function(writer) {
// Write data to file.
writer.seek(file.size)
writer.write(content)
}, function(e) {
console.error("日志写入错误", error)
});
});
});
}, function(err) {
console.error("文件夹创建失败", err)
});
}, function(error) {
console.error("文件系统进入错误", error)
});
}
function logFileNames() {
const func = (resolve, reject) => {
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
fs.root.getDirectory("app-log", {
create: false,
exclusive: false
}, function(dir) {
const directoryReader = dir.createReader();
directoryReader.readEntries( function( entries ){
const names = entries.map(item => {
return item.name
})
resolve(names)
}, function ( e ) {
// alert( "Read entries failed: " + e.message );
console.error("Read entries failed", e)
reject(e)
} );
}, function(err) {
console.error("文件夹读取失败", err)
reject(err)
});
}, function(error) {
console.error("文件系统进入错误", error)
reject(error)
});
}
const promise = new Promise(func)
return promise
}
function logFileContent(fileName) {
const func = (resolve, reject) => {
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
fs.root.getDirectory("app-log", {
create: false,
exclusive: false
}, function(dir) {
dir.getFile(fileName, {
create: false
}, function(fileEntry) {
fileEntry.file(function(file) {
console.log('file', JSON.stringify(file))
const reader = new plus.io.FileReader()
console.log('reader', reader)
reader.onloadend = function (e) {
console.log( "Read success")
// Get data
console.log(e.target.result)
resolve(e.target.result)
};
reader.onerror = function (e) {
console.error(e)
reject(e)
}
reader.onabort = function(e) {
console.error(e)
reject(e)
}
reader.readAsText(file) // 'utf-8'
}, function(err) {
console.error("获取文件数据对象失败", err)
reject(err)
});
}, function(err) {
console.error("获取文件数据失败", err)
reject(err)
});
}, function(err) {
console.error("文件夹创建失败", err)
reject(err)
});
}, function(error) {
console.error("文件系统进入错误", error)
reject(error)
});
}
return new Promise(func)
}
export default {
log,
logFileNames,
logFileContent,
}
/**
* js 日期格式化
* 传时间戳参数进行时间戳转换，不传时返回当前时间（返回年月日时分秒格式）
* @param {Object} timeStamp 时间戳参数 非必传
* @param {Object} format 格式化样式 非必传
*/
function getTimeStampDatetime(format = 'yyyy-MM-dd HH:mm:ss', timeStamp) {
let nowDatetime = new Date()
timeStamp ? nowDatetime = new Date(timeStamp) : nowDatetime = new Date()
return nowDatetime.Format(format)
}
Date.prototype.Format = function(fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[
k]).substr(("" + o[k]).length)));
return fmt;
}
// 获取日志文件信息
function getLogFileInfo() {
// 今日日期
let nowDate = getTimeStampDatetime("yyyy-MM-dd")
// 当前时间精确到秒
let nowTime = getTimeStampDatetime("HH:mm:ss")
// 文件名称
const fileName = 'log.' + nowDate
// 内容前缀
const linePrefix = nowTime + ' '
const lineSuffix = "\r\n"
return {
fileName,
linePrefix,
lineSuffix
}
}
/**
* 日志内容输出并写入文件
* 文件写入手机地址，华为Android/data/应用包名/documents/app-log/xxxx
* @param {string} text 写入日志的内容
* @param {boolean} isError 是否错误
*/
function log(text, isError) {
const fileInfo = getLogFileInfo()
let content = fileInfo.linePrefix + text + fileInfo.lineSuffix
isError && (content = '#error# ' + content)
isError ? console.error(text) : console.log(text)
//#ifndef APP-PLUS
return
//#endif
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
// 可通过fs操作PUBLIC_DOCUMENTS文件系统
// 创建日志文件夹
fs.root.getDirectory("app-log", {
create: true,
exclusive: false
}, function(dir) {
// 创建或写入文件
console.log("Directory Entry Name: " + dir.fullPath + fileInfo.fileName);
dir.getFile(fileInfo.fileName, {
create: true,
}, function(fileEntry) {
// 找到文件准备写入操作
fileEntry.file(function(file) {
// create a FileWriter to write to the file
fileEntry.createWriter(function(writer) {
// Write data to file.
writer.seek(file.size)
writer.write(content)
}, function(e) {
console.error("日志写入错误", error)
});
});
});
}, function(err) {
console.error("文件夹创建失败", err)
});
}, function(error) {
console.error("文件系统进入错误", error)
});
}
function logFileNames() {
const func = (resolve, reject) => {
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
fs.root.getDirectory("app-log", {
create: false,
exclusive: false
}, function(dir) {
const directoryReader = dir.createReader();
directoryReader.readEntries( function( entries ){
const names = entries.map(item => {
return item.name
})
resolve(names)
}, function ( e ) {
// alert( "Read entries failed: " + e.message );
console.error("Read entries failed", e)
reject(e)
} );
}, function(err) {
console.error("文件夹读取失败", err)
reject(err)
});
}, function(error) {
console.error("文件系统进入错误", error)
reject(error)
});
}
const promise = new Promise(func)
return promise
}
function logFileContent(fileName) {
const func = (resolve, reject) => {
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
fs.root.getDirectory("app-log", {
create: false,
exclusive: false
}, function(dir) {
dir.getFile(fileName, {
create: false
}, function(fileEntry) {
fileEntry.file(function(file) {
console.log('file', JSON.stringify(file))
const reader = new plus.io.FileReader()
console.log('reader', reader)
reader.onloadend = function (e) {
console.log( "Read success")
// Get data
console.log(e.target.result)
resolve(e.target.result)
};
reader.onerror = function (e) {
console.error(e)
reject(e)
}
reader.onabort = function(e) {
console.error(e)
reject(e)
}
reader.readAsText(file) // 'utf-8'
}, function(err) {
console.error("获取文件数据对象失败", err)
reject(err)
});
}, function(err) {
console.error("获取文件数据失败", err)
reject(err)
});
}, function(err) {
console.error("文件夹创建失败", err)
reject(err)
});
}, function(error) {
console.error("文件系统进入错误", error)
reject(error)
});
}
return new Promise(func)
}
export default {
log,
logFileNames,
logFileContent,
}
unicloud后台配置ssl证书教程
看了下问答社区，图片的证书内容和密钥还是不知道怎么填，自己百度摸索了下：腾讯云下载好一年免费的SSl证书，打开压缩包，pem后缀的是证书内容，key是密钥，直接点击文件是打不开的，需要更改后缀为txt，用记事本打开，然后复制粘贴上去就行了。有ssl证书的网站是https的，没就http,http网站总是被别人加入广告，烦死，有https，应该不会被别人放入广告。就这样。
看了下问答社区，图片的证书内容和密钥还是不知道怎么填，自己百度摸索了下：腾讯云下载好一年免费的SSl证书，打开压缩包，pem后缀的是证书内容，key是密钥，直接点击文件是打不开的，需要更改后缀为txt，用记事本打开，然后复制粘贴上去就行了。有ssl证书的网站是https的，没就http,http网站总是被别人加入广告，烦死，有https，应该不会被别人放入广告。就这样。 收起阅读 »
使用native.js 在uni app中 连接经典蓝牙 任意打印图片，摆脱ble低功耗的低速传输
首先感谢 ：
https://ask.dcloud.net.cn/article/1089
这段时间需要开发一个蓝牙连接打印机的app。 想法很天真，以为uniapp啥api都有了，没想到还得从打印机指令开始学......
不过还好 网上很多教程，代码直接copy改
这个项目主要用到了 html 5+，native.js 实现android原生的蓝牙连接体验，支持经典蓝牙以及大量数据传输
我根据网上的代码 封装了一个类 ：
BluetoothTool.js可以直接在 uniapp中使用 。仅支持 android app端。
还有这个demo是专门为 标签打印机 写的，小票打印机没有研究。
总共两个页面：一个是原生的蓝牙，一个是uniapp api支持的ble蓝牙 首页有跳转连接 ，只有首页会自动连接上次的设备
最后：
关于打印图片 我找到了三个方法 目前只有setBitmap3测试成功。setBitmap1，setBitmap2 貌似都不行 。（ble的setBitmap2可以）
大家自己测试吧 用的是 佳博标签打印机编程手册tspl 里面的指令
最后的最后：
我用ble低速传输打印图片就可以 ，但是原生打印图片不行 不知道为什么，有大神 知道请告知。谢谢。
首先感谢 ：
https://ask.dcloud.net.cn/article/1089
这段时间需要开发一个蓝牙连接打印机的app。 想法很天真，以为uniapp啥api都有了，没想到还得从打印机指令开始学......
不过还好 网上很多教程，代码直接copy改
这个项目主要用到了 html 5+，native.js 实现android原生的蓝牙连接体验，支持经典蓝牙以及大量数据传输
我根据网上的代码 封装了一个类 ：
BluetoothTool.js可以直接在 uniapp中使用 。仅支持 android app端。
还有这个demo是专门为 标签打印机 写的，小票打印机没有研究。
总共两个页面：一个是原生的蓝牙，一个是uniapp api支持的ble蓝牙 首页有跳转连接 ，只有首页会自动连接上次的设备
最后：
关于打印图片 我找到了三个方法 目前只有setBitmap3测试成功。setBitmap1，setBitmap2 貌似都不行 。（ble的setBitmap2可以）
大家自己测试吧 用的是 佳博标签打印机编程手册tspl 里面的指令
最后的最后：
我用ble低速传输打印图片就可以 ，但是原生打印图片不行 不知道为什么，有大神 知道请告知。谢谢。
uni-app中使用mapbox地图
本文分享在uni-app中如何使用mapbox地图，先了解下注意事项：
- 由于mapbox中大量操作dom元素，不能直接在uni-app中直接使用，会报错误，所以必须使用uni-app提供的render.js模式。
- 使用前请先下载mapbox-gl的npm库，如果不想下载库，那么就引入mapbox官方提供的cdn链接，实现动态导入js，css，动态导入也是uni-app建议的一种方法，不会使得打包体积过大，此文暂时只展示如何使用npm包。
- 记得自己在mapbox官网申请access token。
具体操作和代码：
- 在uni-app项目的根目录下使用npm下载mapbox-gl
npm install --save mapbox-gl
- 在项目中创建一个map页面，页面代码如下：
<template> <view class="map-wrap"> <!-- #ifdef APP-PLUS || H5 --> <view id="map-box"> <!-- 这里是mapbox的地图容器 --> </view> <!-- #endif --> </view> </template>
//renderjs 模式
<script module="mapbox" lang="renderjs">
//此处下载的是mapbox2.x版本，引入方式要按照此处书写
const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
//如果是1.x版本，按照下面方式书写（少了一个 '!'）
//const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
//css也可以在下方的scss中导入，不做强求
import 'mapbox-gl/dist/mapbox-gl.css';
//let map = null //地图实例
export default {
data:{
return(){
map: null //地图实例
}
},
mounted() {
this.createdMap()
},
methods: {
createdMap() { //创建地图
mapboxgl.accessToken = '填写你自己申请到的token';
map = new mapboxgl.Map({
container: 'map-box', // container ID
style: 'mapbox://styles/mapbox/light-v9', // style URL
center: [118.810251,32.062151], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.on("load", function() {
//加载地图时触发
console.log('load')
});
},
}
} </script>
<style lang="scss">
.map-wrap {
position: relative;
min-width: 100vw;
min-height: 100vh;
}
#map-box {
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder {
min-width: 140px;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder input[type="text"] {
height: 30px;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-icon-search {
top: 5px;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-pin-right * {
top: 5px;
}
.control-box {
padding: 10rpx 30rpx;
background-color: #00AAFF;
position: absolute;
right: 0;
top: 0;
z-index: 999px;
} </style>
后面再写如何点击按钮控制地图交互和事件的绑定。
【好难用的markdown。。。】
https://blog.csdn.net/Hello_yihao/article/details/116055805 本文分享在uni-app中如何使用mapbox地图，先了解下注意事项：
- 由于mapbox中大量操作dom元素，不能直接在uni-app中直接使用，会报错误，所以必须使用uni-app提供的render.js模式。
- 使用前请先下载mapbox-gl的npm库，如果不想下载库，那么就引入mapbox官方提供的cdn链接，实现动态导入js，css，动态导入也是uni-app建议的一种方法，不会使得打包体积过大，此文暂时只展示如何使用npm包。
- 记得自己在mapbox官网申请access token。
具体操作和代码：
- 在uni-app项目的根目录下使用npm下载mapbox-gl
npm install --save mapbox-gl
- 在项目中创建一个map页面，页面代码如下：
<template> <view class="map-wrap"> <!-- #ifdef APP-PLUS || H5 --> <view id="map-box"> <!-- 这里是mapbox的地图容器 --> </view> <!-- #endif --> </view> </template>
//renderjs 模式
<script module="mapbox" lang="renderjs">
//此处下载的是mapbox2.x版本，引入方式要按照此处书写
const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
//如果是1.x版本，按照下面方式书写（少了一个 '!'）
//const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
//css也可以在下方的scss中导入，不做强求
import 'mapbox-gl/dist/mapbox-gl.css';
//let map = null //地图实例
export default {
data:{
return(){
map: null //地图实例
}
},
mounted() {
this.createdMap()
},
methods: {
createdMap() { //创建地图
mapboxgl.accessToken = '填写你自己申请到的token';
map = new mapboxgl.Map({
container: 'map-box', // container ID
style: 'mapbox://styles/mapbox/light-v9', // style URL
center: [118.810251,32.062151], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.on("load", function() {
//加载地图时触发
console.log('load')
});
},
}
} </script>
<style lang="scss">
.map-wrap {
position: relative;
min-width: 100vw;
min-height: 100vh;
}
#map-box {
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder {
min-width: 140px;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder input[type="text"] {
height: 30px;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-icon-search {
top: 5px;
}
#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-pin-right * {
top: 5px;
}
.control-box {
padding: 10rpx 30rpx;
background-color: #00AAFF;
position: absolute;
right: 0;
top: 0;
z-index: 999px;
} </style>
后面再写如何点击按钮控制地图交互和事件的绑定。
【好难用的markdown。。。】
https://blog.csdn.net/Hello_yihao/article/details/116055805 
5+APP，使用HbuilderX打包IOS包，切换WKWebview内核后启动白屏问题解决分享
一、项目介绍
使用vue开发的的项目，通过Hbuilder X打包称APP。Andriod版本的包，安装后一直没什么问题。
在打IOS包时遇到了大问题。
二、问题描述
打好的ipa包，安装到测试设备，启动图标显示完之后，直接白屏。
开始真机调试，报错信息如下：
11:12:35.725 同步手机端程序文件完成
11:12:37.631 联机调试并非打包，调试基座 HBuilder 是默认的测试包，权限、图标都不可自定义。只有在点菜单"发行-发行为原生安装包"时才能自定义这些设置
11:12:37.652 iOS9.0及以上系统需要在"设置"-"通用"-"设备管理"(或"描述文件")中信任DCloud企业证书(Digital Heaven开头的证书)才可以正常使用
11:12:37.673 如手机上HBuilder调试基座未启动，请手动启动。如应用未更新，请在手机上杀掉基座进程重启
11:13:07.571 Script error.
11:13:07.592 filename:
11:13:07.613 lineno:0
三、定位问题
结合官方论坛的其他帖子，问题方向是WKWebview内核严格的跨域限制导致的。
问题定位历程是强行切换UIWebview，页面显示正常。
切换UIWebview步骤
-
-
在manifest.json文件，代码视图plus下新增
"kernel" : { "ios" : "UIWebview", //或者 "WKWebview" },最初以为是整个文件跨域
参考链接https://ask.dcloud.net.cn/article/36348
后来将index.html引用的js全删掉换成只有静态文字，发现不是index.html跨域。
然后开始从入口js排查，vue项目，入口main.js里引用的js一点一点删除测试。
结果：
const requireComponents = require.context('./components', true, /\.vue/)
requireComponents.keys().forEach(fileName => {
const reqCom = requireComponents(fileName)
const reqComName = reqCom.default['name']
Vue.component(reqComName, reqCom.default || reqCom)
})定位出是require.context这个批量引入组件导致的。
参考链接https://www.cnblogs.com/cai-xin/p/12410297.html
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头
也就是运行时去加载文件导致本地文件跨域。
结论：因require.context导致的本地文件跨域，最后更改组件批量引入方式 使用import导入。
一、项目介绍
使用vue开发的的项目，通过Hbuilder X打包称APP。Andriod版本的包，安装后一直没什么问题。
在打IOS包时遇到了大问题。
二、问题描述
打好的ipa包，安装到测试设备，启动图标显示完之后，直接白屏。
开始真机调试，报错信息如下：
11:12:35.725 同步手机端程序文件完成
11:12:37.631 联机调试并非打包，调试基座 HBuilder 是默认的测试包，权限、图标都不可自定义。只有在点菜单"发行-发行为原生安装包"时才能自定义这些设置
11:12:37.652 iOS9.0及以上系统需要在"设置"-"通用"-"设备管理"(或"描述文件")中信任DCloud企业证书(Digital Heaven开头的证书)才可以正常使用
11:12:37.673 如手机上HBuilder调试基座未启动，请手动启动。如应用未更新，请在手机上杀掉基座进程重启
11:13:07.571 Script error.
11:13:07.592 filename:
11:13:07.613 lineno:0
三、定位问题
结合官方论坛的其他帖子，问题方向是WKWebview内核严格的跨域限制导致的。
问题定位历程是强行切换UIWebview，页面显示正常。
切换UIWebview步骤
-
-
在manifest.json文件，代码视图plus下新增
"kernel" : { "ios" : "UIWebview", //或者 "WKWebview" },最初以为是整个文件跨域
参考链接https://ask.dcloud.net.cn/article/36348
后来将index.html引用的js全删掉换成只有静态文字，发现不是index.html跨域。
然后开始从入口js排查，vue项目，入口main.js里引用的js一点一点删除测试。
结果：
const requireComponents = require.context('./components', true, /\.vue/)
requireComponents.keys().forEach(fileName => {
const reqCom = requireComponents(fileName)
const reqComName = reqCom.default['name']
Vue.component(reqComName, reqCom.default || reqCom)
})定位出是require.context这个批量引入组件导致的。
参考链接https://www.cnblogs.com/cai-xin/p/12410297.html
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头
也就是运行时去加载文件导致本地文件跨域。
结论：因require.context导致的本地文件跨域，最后更改组件批量引入方式 使用import导入。
收起阅读 »
uni-app 使用 jsencrypt （已解决）
uni-app 使用 jsencrypt
在uni-app项目开发中，为了数据的安全性，使用了jsencrypt对数据进行加密，在PC端或h5端都没有问题，但是运行到微信开发中工具时，却总报错，网上查了一下，发现有很多帖子在介绍、说明原因，如：
(https://blog.csdn.net/qq_36501494/article/details/105153122) 文章中中指出报错原因是：插件使用了 window 对象，然后不管是app还是小程序中都没有窗口对象的环境，就导致不能用 window，一用这脚本就会报错, 解决办法,修改jsencrypt.js源码
解决方法是在jsencrypt.js文件插入以下代码
var modificationNavigator = {
appName: 'Netscape',
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1'
};
var modificationWindow = {
ASN1: null,
Base64: null,
Hex: null,
crypto: null,
href: null
};
然后把jsencrypt.js文件里面的变量
navigator全部替换为 modificationNavigator
window全部替换为 modificationWindow
但是，当我尝试时发现，无论是通过npm安装jsencrypt.js，还是单独下载并引入为压缩前的jsencrypt文件，都是不能正常使用的，因为jsencrypt更新后依赖其它文件，不再是单独改jsencrypt.js就可以用的了，于是又找来了旧版本的jsencrypt.js文件，替换后可正常使用，旧版本和更改后的文件下载地址放在了下面，大家需要的话可自行下载。
旧版本的jsencrypt.js下载：
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0c03b75a-8139-4654-83b3-f12d36df4bbe/7d18f8ab-3d99-4297-9010-c881f554297d.zip
更改后的uni-app可用（小程序可以）的jsencrypt.js下载：
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0c03b75a-8139-4654-83b3-f12d36df4bbe/a4e593c9-fefa-41f6-9b94-28d904c607fd.zip
uni-app 使用 jsencrypt
在uni-app项目开发中，为了数据的安全性，使用了jsencrypt对数据进行加密，在PC端或h5端都没有问题，但是运行到微信开发中工具时，却总报错，网上查了一下，发现有很多帖子在介绍、说明原因，如：
(https://blog.csdn.net/qq_36501494/article/details/105153122) 文章中中指出报错原因是：插件使用了 window 对象，然后不管是app还是小程序中都没有窗口对象的环境，就导致不能用 window，一用这脚本就会报错, 解决办法,修改jsencrypt.js源码
解决方法是在jsencrypt.js文件插入以下代码
var modificationNavigator = {
appName: 'Netscape',
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1'
};
var modificationWindow = {
ASN1: null,
Base64: null,
Hex: null,
crypto: null,
href: null
};
然后把jsencrypt.js文件里面的变量
navigator全部替换为 modificationNavigator
window全部替换为 modificationWindow
但是，当我尝试时发现，无论是通过npm安装jsencrypt.js，还是单独下载并引入为压缩前的jsencrypt文件，都是不能正常使用的，因为jsencrypt更新后依赖其它文件，不再是单独改jsencrypt.js就可以用的了，于是又找来了旧版本的jsencrypt.js文件，替换后可正常使用，旧版本和更改后的文件下载地址放在了下面，大家需要的话可自行下载。
旧版本的jsencrypt.js下载：
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0c03b75a-8139-4654-83b3-f12d36df4bbe/7d18f8ab-3d99-4297-9010-c881f554297d.zip
更改后的uni-app可用（小程序可以）的jsencrypt.js下载：
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0c03b75a-8139-4654-83b3-f12d36df4bbe/a4e593c9-fefa-41f6-9b94-28d904c607fd.zip
关于uni-app地图组件上显示其他内容（如列表）
问题：
app端使用map组件，全屏显示地图，要在地图上展示一个列表数据，通过给列表设置position: absolute;发现列表始终在地图下面，z-index设置多少都无效
原因：
小程序和app-vue中，<map> 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。也就是当时在用浏览器调试的时候发现是没问题的，真机运行就出问题。
解决：
- cover-view：<cover-view>组件：缺点：不支持嵌套其它组件，包括再次嵌套cover-view.
- nvue：App端vue页面 cover-view、cover-image 中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。App端nvue页面自2.1.5起没有这些限制。
参考链接
map组件（拉到最下面：注意事项）：map组件
cover-view组件：cover-view
总结
官方文档关于这些都有详情的介绍，多看文档
问题：
app端使用map组件，全屏显示地图，要在地图上展示一个列表数据，通过给列表设置position: absolute;发现列表始终在地图下面，z-index设置多少都无效
原因：
小程序和app-vue中，<map> 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。也就是当时在用浏览器调试的时候发现是没问题的，真机运行就出问题。
解决：
- cover-view：<cover-view>组件：缺点：不支持嵌套其它组件，包括再次嵌套cover-view.
- nvue：App端vue页面 cover-view、cover-image 中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。App端nvue页面自2.1.5起没有这些限制。
参考链接
map组件（拉到最下面：注意事项）：map组件
cover-view组件：cover-view
总结
官方文档关于这些都有详情的介绍，多看文档
收起阅读 »
uni-app 配置 HTTPS 双向认证
HX 3.2.7+ 版本开始 https 请求支持配置自签名证书、 MTLS 双向认证，同时支持 Android、iOS 平台
使用方式请参考 uni 官方文档 https://uniapp.dcloud.io/api/request/request?id=configmtls
HX 3.2.7+ 版本开始 https 请求支持配置自签名证书、 MTLS 双向认证，同时支持 Android、iOS 平台
使用方式请参考 uni 官方文档 https://uniapp.dcloud.io/api/request/request?id=configmtls
收起阅读 »