
subNVue子窗体开发踩坑记录
1.如无绝对必要,请勿使用subNVue!如无绝对必要,请勿使用subNVue!如无绝对必要,请勿使用subNVue!
- subNVue页面基本设置,是在pages.json中,如果作用是子窗体,不必单独注册,而是要注册在引用它的vue路径下面;
- 子窗体默认从顶部弹出,如果希望从底部弹出,使用dock设置无效,可以在pages.json中设置:"bottom": "0"实现;
- 键盘弹起后,如果期望子窗体的高度不被压缩(扣除键盘的高度),可以通过在子窗体的methods中定义子窗体的动态高度,使用setStyle,可动态设置键盘弹起或关闭时的高度,例如可以通过离顶部或底部的百分比来实现。触发事件,通过在template的input标签上进行绑定:@focus, @blur
- vue和subNVue页面之间的通讯,使用uni.$emit进行传值和uni.$on接收传值,但是,但是,但是:接收传值时,使用this.var = data.*,将无法在页面获得数据渲染!你必须使用 const vm = this; 先进行指向转化,下面使用vm.var = data.来接收传值,或调用函数;
- 如果是一个公共子窗体,则你必须给它起别名!具体来说:id: bieming。没错,id就是这么随意,完全可以由你来定义,当然你没法在奥义的官方文档中猜出这个。在pages.json中引用时,有几个页面要引用,就必须起几个别名,不能重复!在相应的vue页面,你也必须使用与别名一致的id来引用子窗体;
- 如果是公共子窗体,你必须使用相应的别名来进行操作。为了避免错误,应当在从vue页面传值时,指定一个参数,来进行来源区分,并在子窗体页面,接收此参数并用于条件判断的依据;
- 不要期望从官方文档中获得清晰的思路;
- 不要期望从官方运营的QQ群中获得响应或有价值响应;
- 不要期望在社区发帖就能获得帮助;
11.虽然我解决了这些问题,但是从理论上,时间本不应该花在这些问题上,因为这些问题并不是什么技术难题,这只是经验,与技术能力的提升无关
1.如无绝对必要,请勿使用subNVue!如无绝对必要,请勿使用subNVue!如无绝对必要,请勿使用subNVue!
- subNVue页面基本设置,是在pages.json中,如果作用是子窗体,不必单独注册,而是要注册在引用它的vue路径下面;
- 子窗体默认从顶部弹出,如果希望从底部弹出,使用dock设置无效,可以在pages.json中设置:"bottom": "0"实现;
- 键盘弹起后,如果期望子窗体的高度不被压缩(扣除键盘的高度),可以通过在子窗体的methods中定义子窗体的动态高度,使用setStyle,可动态设置键盘弹起或关闭时的高度,例如可以通过离顶部或底部的百分比来实现。触发事件,通过在template的input标签上进行绑定:@focus, @blur
- vue和subNVue页面之间的通讯,使用uni.$emit进行传值和uni.$on接收传值,但是,但是,但是:接收传值时,使用this.var = data.*,将无法在页面获得数据渲染!你必须使用 const vm = this; 先进行指向转化,下面使用vm.var = data.来接收传值,或调用函数;
- 如果是一个公共子窗体,则你必须给它起别名!具体来说:id: bieming。没错,id就是这么随意,完全可以由你来定义,当然你没法在奥义的官方文档中猜出这个。在pages.json中引用时,有几个页面要引用,就必须起几个别名,不能重复!在相应的vue页面,你也必须使用与别名一致的id来引用子窗体;
- 如果是公共子窗体,你必须使用相应的别名来进行操作。为了避免错误,应当在从vue页面传值时,指定一个参数,来进行来源区分,并在子窗体页面,接收此参数并用于条件判断的依据;
- 不要期望从官方文档中获得清晰的思路;
- 不要期望从官方运营的QQ群中获得响应或有价值响应;
- 不要期望在社区发帖就能获得帮助;
11.虽然我解决了这些问题,但是从理论上,时间本不应该花在这些问题上,因为这些问题并不是什么技术难题,这只是经验,与技术能力的提升无关

处理:end value has mixed support, consider using flex-end instead
提示:end value has mixed support, consider using flex-end instead
经检查,没有规范的写flex的属性,正确的写法是 flex-end 或 flex-start
错误的写法
align-items:end;
正确写法是
align-items:flex-end;
如出现:start value has mixed support, consider using flex-start instead
也是同样的问题,要使用flex-start 而不是start
提示:end value has mixed support, consider using flex-end instead
经检查,没有规范的写flex的属性,正确的写法是 flex-end 或 flex-start
错误的写法
align-items:end;
正确写法是
align-items:flex-end;
如出现:start value has mixed support, consider using flex-start instead
也是同样的问题,要使用flex-start 而不是start

问题记录-生命周期
1.onReachBottom页面滚动触底函数,若page设置了height:100%,overflow,则不会触发;
解决:overflow去掉就可以了,overflow-x,overflow-y也不行
2.有些地方刷新数据 会在methods直接调用 this.onShow 或者是 this.onLoad方法,现在这样调用会报错undefined,不能偷懒写个初始化函数;onshow 写在methods中也生效,按规范生命周期最好写在methods外面。
1.onReachBottom页面滚动触底函数,若page设置了height:100%,overflow,则不会触发;
解决:overflow去掉就可以了,overflow-x,overflow-y也不行
2.有些地方刷新数据 会在methods直接调用 this.onShow 或者是 this.onLoad方法,现在这样调用会报错undefined,不能偷懒写个初始化函数;onshow 写在methods中也生效,按规范生命周期最好写在methods外面。
收起阅读 »
canvas相关
1、ctx.measureText 这个方法突然就报错了,之前APP用不了这个方法 改成H5下才使用,现在H5也报错说is not a function(2019.12.26)

解决:h5也不使用了,直接截图字符串的个数
2、小程序绘图base64的不显示,原因:小程序不支持base64
解决方法尝试:
1:replace(/n/g, '') 开发者工具无效
2:replace(/[\r\n]/g, '') 字符串太长传输中加入回车导致。 开发者工具有的有效有的无效 ,真机都无效
3:开始是svg的base64显示不了,改成png的就ok 无效
4:开发者工具有效 ,真机无效
success: function (res) {
var data = res.data
var array = wx.base64ToArrayBuffer(res.data)
var base64 = wx.arrayBufferToBase64(array)
if (res.statusCode == 200) {
that.setData({
imageData: 'data:image/jpeg;base64,' + base64, // data 为接口返回的base64字符串
})
}
}
5:writeFile getimageinfo 开发者工具报错,真机有效,此方法仅针对小程序
let self = this;
var fs = uni.getFileSystemManager();
fs.writeFile({
filePath: `${wx.env.USER_DATA_PATH}/resource/demo.png`,
data: res.data.img,
encoding: 'base64',
success(res) {
uni.getImageInfo({
src: `${wx.env.USER_DATA_PATH}/resource/demo.png`,
success(res) {
self.$set(self.canvasObj, 'qr', `${wx.env.USER_DATA_PATH}/resource/demo.png`);
},
fail(err) {
console.error(err)
}
})
},
fail(err) {
console.error(err)
}
})
1、ctx.measureText 这个方法突然就报错了,之前APP用不了这个方法 改成H5下才使用,现在H5也报错说is not a function(2019.12.26)
解决:h5也不使用了,直接截图字符串的个数
2、小程序绘图base64的不显示,原因:小程序不支持base64
解决方法尝试:
1:replace(/n/g, '') 开发者工具无效
2:replace(/[\r\n]/g, '') 字符串太长传输中加入回车导致。 开发者工具有的有效有的无效 ,真机都无效
3:开始是svg的base64显示不了,改成png的就ok 无效
4:开发者工具有效 ,真机无效
success: function (res) {
var data = res.data
var array = wx.base64ToArrayBuffer(res.data)
var base64 = wx.arrayBufferToBase64(array)
if (res.statusCode == 200) {
that.setData({
imageData: 'data:image/jpeg;base64,' + base64, // data 为接口返回的base64字符串
})
}
}
5:writeFile getimageinfo 开发者工具报错,真机有效,此方法仅针对小程序
let self = this;
var fs = uni.getFileSystemManager();
fs.writeFile({
filePath: `${wx.env.USER_DATA_PATH}/resource/demo.png`,
data: res.data.img,
encoding: 'base64',
success(res) {
uni.getImageInfo({
src: `${wx.env.USER_DATA_PATH}/resource/demo.png`,
success(res) {
self.$set(self.canvasObj, 'qr', `${wx.env.USER_DATA_PATH}/resource/demo.png`);
},
fail(err) {
console.error(err)
}
})
},
fail(err) {
console.error(err)
}
})
收起阅读 »

安卓 讯飞 文字转语音 离线打包
引入 speech_ifly-release.aar,speech-release.aar
AndroidManifest.xml 加入
"<uses-permission android:name=""android.permission.INTERNET""/>
<uses-permission android:name=""android.permission.WRITE_EXTERNAL_STORAGE""/>
<uses-permission android:name=""android.permission.RECORD_AUDIO""/>
<uses-permission android:name=""android.permission.ACCESS_NETWORK_STATE""/>
<uses-permission android:name=""android.permission.ACCESS_WIFI_STATE""/>
<uses-permission android:name=""android.permission.CHANGE_NETWORK_STATE""/>
<uses-permission android:name=""android.permission.READ_PHONE_STATE""/>"
编译报错jetifier 的话 就 在 gradle.properties加上 android.jetifier.blacklist=speech_ifly-release.aar
引入 speech_ifly-release.aar,speech-release.aar
AndroidManifest.xml 加入
"<uses-permission android:name=""android.permission.INTERNET""/>
<uses-permission android:name=""android.permission.WRITE_EXTERNAL_STORAGE""/>
<uses-permission android:name=""android.permission.RECORD_AUDIO""/>
<uses-permission android:name=""android.permission.ACCESS_NETWORK_STATE""/>
<uses-permission android:name=""android.permission.ACCESS_WIFI_STATE""/>
<uses-permission android:name=""android.permission.CHANGE_NETWORK_STATE""/>
<uses-permission android:name=""android.permission.READ_PHONE_STATE""/>"
编译报错jetifier 的话 就 在 gradle.properties加上 android.jetifier.blacklist=speech_ifly-release.aar
收起阅读 »
打包小程序和app注意事项:
打包小程序注意事项:
1、不支持写法,会报错 style="max-width: calc(100% - ${item2.width}px)
" 报错
style="'margin-top:'+marginTop/2+'px'" 这样写没有报错,好奇怪
key="'1'+index" 报错
2、style中不能写upx,小程序编译不到,仍为upx;
3、$utils为公用js的方法,若传参为对象,对象提示为undefined,传参为字符串没问题
解决:1. 可以将此方法写入plugin中;2.可以在页面中写一个方法承接$utils的方法
打包app注意事项:
1、不支持写法,会报错
css样式不能写标签名,id
2、app中,组件不要写default值,写了默认的空字符串,页面显示为true,传参若为空字符串,也会变成true字符串
打包小程序注意事项:
1、不支持写法,会报错 style="max-width: calc(100% - ${item2.width}px)
" 报错
style="'margin-top:'+marginTop/2+'px'" 这样写没有报错,好奇怪
key="'1'+index" 报错
2、style中不能写upx,小程序编译不到,仍为upx;
3、$utils为公用js的方法,若传参为对象,对象提示为undefined,传参为字符串没问题
解决:1. 可以将此方法写入plugin中;2.可以在页面中写一个方法承接$utils的方法
打包app注意事项:
1、不支持写法,会报错
css样式不能写标签名,id
2、app中,组件不要写default值,写了默认的空字符串,页面显示为true,传参若为空字符串,也会变成true字符串
收起阅读 »
文件上传uploadfile问题记录
问题1:文件上传多个图片,只返回一个
问题2:视频app上传,只支持mp4,mov上传,data返回空
场景介绍:页面1选择视频(uni.chooseVideo)返回临时文件url,传值给页面2上传(uni.uploadFile),data返回空,statusCode":500
尝试1:页面1选择视频直接上传,仍然data返回空,statusCode":500,无效
尝试2:页面1选择视频改为plus(plus.gallery.pick),再上传 。 无效
最终解决:控制上传视频大小,不能超过1M,res.size<=1048576,与视频格式无关
问题1:文件上传多个图片,只返回一个
问题2:视频app上传,只支持mp4,mov上传,data返回空
场景介绍:页面1选择视频(uni.chooseVideo)返回临时文件url,传值给页面2上传(uni.uploadFile),data返回空,statusCode":500
尝试1:页面1选择视频直接上传,仍然data返回空,statusCode":500,无效
尝试2:页面1选择视频改为plus(plus.gallery.pick),再上传 。 无效
最终解决:控制上传视频大小,不能超过1M,res.size<=1048576,与视频格式无关
收起阅读 »
uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes
**1. uniAPP中拿到附件的base64如何操作,如word文件
/**
- 实现思路:
- 通过native.js的io操作创建文件,拿到平台绝对路径
- 再通过原生类进行base64解码,拿到字节流bytes数组
- 在通过java类FileOutputStream进行文件写入bytes返回文件路径path
- 在通过plus.runtime.openFile(path);用第三方程序打开文件
- */**
//文件的写入操作传入要写入文件名,base64 function lzFileWriter(base64,fileName) { return new Promise((result,reject)=>{ // PRIVATE_WWW:本地文件系统常量,Number类型,固定值1。应用运行资源目录,仅本应用可访问。 为了确保应用资源的安全性,此目录只可读。 // PRIVATE_DOC 本地文件系统常量,Number类型,固定值2。应用私有文档目录,仅本应用可读写。 plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) { /* fs.root是根目录操作对象DirectoryEntry getFile(path,flag,succesCB,errorCB)创建或打开文件 path: ( DOMString ) 必选 要操作文件相对于当前目录的地址 flag: ( Flags ) 可选 要操作文件或目录的参数 create: (Boolean 类型 )是否创建对象标记 指示如果文件或目录不存在时是否进行创建,默认值为false succesCB: ( EntrySuccessCallback ) 可选 创建或打开文件成功的回调函数 errorCB: ( FileErrorCallback ) 可选 创建或打开文件失败的回调函数 */ // 创建或打开文件 fs.root.getFile(fileName,{create:true},function(fileEntry) { // 获得平台绝对路径 var fullPath = fileEntry.fullPath; console.log('平台绝对路径',fullPath); // 引入安卓原生类 var Base64 = plus.android.importClass("android.util.Base64"); var FileOutputStream = plus.android.importClass("java.io.FileOutputStream"); //如果文件不存在则创建文件,如果文件存在则删除文件后重新创建文件 var out = new FileOutputStream(fullPath); /** * 此处需要把base64前缀去除,在写入字节流数组 * 去除头部data:image/jpg;base64,留下base64编码后的字符串 **/ let index=base64.indexOf(',') let base64Str=base64.slice(index+1,base64.length) console.log(base64Str.slice(0,55)); //base64解密得到字节流bytes; var bytes = Base64.decode(base64Str,0); try{ console.log(bytes); out.write(bytes); // byte 数组写入此文件输出流中。 out.flush(); //刷新写入文件中去。 out.close(); //关闭此文件输出流并释放与此流有关的所有系统资源。 result(fullPath) }catch(e){ console.log(e.message); reject(e.message) } // 下面的方法只能写入字符串,无法写入字节流bytes // fileEntry文件系统中的文件对象,用于管理特定的本地文件 // fileEntry.file(function(file) { // /*createWriter获取文件关联的写文件操作对象FileWriter // abort: 终止文件写入操作 // seek: 定位文件操作位置 // truncate: 按照指定长度截断文件 // write: 向文件中写入数据 // */ // fileEntry.createWriter(function(FileWriter) { // FileWriter.write(base64); // FileWriter.onwriteend=function(res){ // console.log(res.target.fileName); // result(res.target.fileName) // } // FileWriter.onerror=function(error){ // console.log(error); // reject(error) // } // }, function(e) { // console.log(e); // }); // }); }); }); }) }
2.拿到视频,音频,图片的base64如何操作?
/**
- 实现思路:
- 视频和音频拿到base64,可通过h5方式将base64转成blob对象
- 再通过URL.createObjectURL(blob)生成指向File对象或Blob对象的URL,
- 此url可以放到大部分标签下的src中进行渲染,如img,video,audio
-
*/
第一步:新建一个vue页面传入base64,创建webviewcreate(){ let that=this var currentWebview = this.$scope.$getAppWebview() //创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。 let wv = plus.webview.create("/hybrid/html/pages/filePlay.html","/hybrid/html/pages/filePlay.html",{ 'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突 top: 0, height: '100%', background: 'transparent' },{ base64:that.base64,//传参 type:that.type//文件类型 }); // 在Webview窗口中添加子窗口// ${that}.bbb(objecturl) currentWebview.append(wv); },
第二步:在filePlay.html中拿到base64
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>文件播放系统</title> <style type="text/css"> html, body { padding: 0; margin: 0; } #App { background: transparent; width: 100vw; height: 100vh; display: flex; flex-direction: column; } #App .video { width: 100%; height: 100%; } #App .audio { margin: auto; } </style> </head> <body> <div id="App"> <video :src="videoSrc" autoplay v-if="videoSrc" controls class="video"></video> <!-- <img :src="imgSrc" v-if="imgSrc"/> --> <audio id="myAudio" controls v-if="audioSrc" class="audio"> <source :src="audioSrc" type="audio/ogg"> <source :src="audioSrc" type="audio/mpeg"> 暂不支持播放此类型 </audio> <iframe :src='wordSrc' width='100%' height='100%' frameborder='1' v-if="wordSrc"></iframe> </div> <!-- uni 的 SDK --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/global.js"></script> <script type="text/javascript" src="../js/file-saver/dist/FileSaver.js"></script> <!-- <script type="text/javascript" src="../js/wps/web-office-sdk-v1.1.2.umd.js"></script> --> <script type="text/javascript"> // import { saveAs } from '../js/file-saver/dist/FileSaver.js'; document.addEventListener('UniAppJSBridgeReady', function() { let that //webview传参到html5网页 let { base64, type } = plus.webview.currentWebview(); console.log(base64.slice(0, 50)); new Vue({ el: '#App', data: { videoSrc: '', imgSrc: '', audioSrc: '', wordSrc: '', aHref: "" }, async mounted() { that = this let blob = that.dataURLtoBlob(base64) /** * URL对象用于生成指向File对象或Blob对象的URL。 * 这个URL可以放置于任何通常可以放置URL的地方,比如img标签的src属性 **/ var blobUrl = URL.createObjectURL(blob); console.log(blobUrl); console.log(type); if (type == 'video') { that.videoSrc = blobUrl } else if (type == 'audio') { that.audioSrc = blobUrl } else if (type == 'word') { } // 在每次调用createObjectURL()方法时,都会创建一个新的URL对象,即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时,每个对象必须通过调用URL.revokeObjectURL()方法来释放 setTimeout(() => { window.URL.revokeObjectURL(objecturl); //释放createObjectURL创建得对象 }, 2000) }, methods: { //base64转成blob对象第一种方式 dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);//8位无符号整数,长度1个字节 console.log(mime) while (n--) { u8arr[n] = bstr.charCodeAt(n); } // console.log(JSON.stringify(u8arr)); return new Blob([u8arr], { type: mime }); }, } }) }); </script> </body> </html>
**1. uniAPP中拿到附件的base64如何操作,如word文件
/**
- 实现思路:
- 通过native.js的io操作创建文件,拿到平台绝对路径
- 再通过原生类进行base64解码,拿到字节流bytes数组
- 在通过java类FileOutputStream进行文件写入bytes返回文件路径path
- 在通过plus.runtime.openFile(path);用第三方程序打开文件
- */**
//文件的写入操作传入要写入文件名,base64 function lzFileWriter(base64,fileName) { return new Promise((result,reject)=>{ // PRIVATE_WWW:本地文件系统常量,Number类型,固定值1。应用运行资源目录,仅本应用可访问。 为了确保应用资源的安全性,此目录只可读。 // PRIVATE_DOC 本地文件系统常量,Number类型,固定值2。应用私有文档目录,仅本应用可读写。 plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) { /* fs.root是根目录操作对象DirectoryEntry getFile(path,flag,succesCB,errorCB)创建或打开文件 path: ( DOMString ) 必选 要操作文件相对于当前目录的地址 flag: ( Flags ) 可选 要操作文件或目录的参数 create: (Boolean 类型 )是否创建对象标记 指示如果文件或目录不存在时是否进行创建,默认值为false succesCB: ( EntrySuccessCallback ) 可选 创建或打开文件成功的回调函数 errorCB: ( FileErrorCallback ) 可选 创建或打开文件失败的回调函数 */ // 创建或打开文件 fs.root.getFile(fileName,{create:true},function(fileEntry) { // 获得平台绝对路径 var fullPath = fileEntry.fullPath; console.log('平台绝对路径',fullPath); // 引入安卓原生类 var Base64 = plus.android.importClass("android.util.Base64"); var FileOutputStream = plus.android.importClass("java.io.FileOutputStream"); //如果文件不存在则创建文件,如果文件存在则删除文件后重新创建文件 var out = new FileOutputStream(fullPath); /** * 此处需要把base64前缀去除,在写入字节流数组 * 去除头部data:image/jpg;base64,留下base64编码后的字符串 **/ let index=base64.indexOf(',') let base64Str=base64.slice(index+1,base64.length) console.log(base64Str.slice(0,55)); //base64解密得到字节流bytes; var bytes = Base64.decode(base64Str,0); try{ console.log(bytes); out.write(bytes); // byte 数组写入此文件输出流中。 out.flush(); //刷新写入文件中去。 out.close(); //关闭此文件输出流并释放与此流有关的所有系统资源。 result(fullPath) }catch(e){ console.log(e.message); reject(e.message) } // 下面的方法只能写入字符串,无法写入字节流bytes // fileEntry文件系统中的文件对象,用于管理特定的本地文件 // fileEntry.file(function(file) { // /*createWriter获取文件关联的写文件操作对象FileWriter // abort: 终止文件写入操作 // seek: 定位文件操作位置 // truncate: 按照指定长度截断文件 // write: 向文件中写入数据 // */ // fileEntry.createWriter(function(FileWriter) { // FileWriter.write(base64); // FileWriter.onwriteend=function(res){ // console.log(res.target.fileName); // result(res.target.fileName) // } // FileWriter.onerror=function(error){ // console.log(error); // reject(error) // } // }, function(e) { // console.log(e); // }); // }); }); }); }) }
2.拿到视频,音频,图片的base64如何操作?
/**
- 实现思路:
- 视频和音频拿到base64,可通过h5方式将base64转成blob对象
- 再通过URL.createObjectURL(blob)生成指向File对象或Blob对象的URL,
- 此url可以放到大部分标签下的src中进行渲染,如img,video,audio
-
*/
第一步:新建一个vue页面传入base64,创建webviewcreate(){ let that=this var currentWebview = this.$scope.$getAppWebview() //创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。 let wv = plus.webview.create("/hybrid/html/pages/filePlay.html","/hybrid/html/pages/filePlay.html",{ 'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突 top: 0, height: '100%', background: 'transparent' },{ base64:that.base64,//传参 type:that.type//文件类型 }); // 在Webview窗口中添加子窗口// ${that}.bbb(objecturl) currentWebview.append(wv); },
第二步:在filePlay.html中拿到base64
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>文件播放系统</title> <style type="text/css"> html, body { padding: 0; margin: 0; } #App { background: transparent; width: 100vw; height: 100vh; display: flex; flex-direction: column; } #App .video { width: 100%; height: 100%; } #App .audio { margin: auto; } </style> </head> <body> <div id="App"> <video :src="videoSrc" autoplay v-if="videoSrc" controls class="video"></video> <!-- <img :src="imgSrc" v-if="imgSrc"/> --> <audio id="myAudio" controls v-if="audioSrc" class="audio"> <source :src="audioSrc" type="audio/ogg"> <source :src="audioSrc" type="audio/mpeg"> 暂不支持播放此类型 </audio> <iframe :src='wordSrc' width='100%' height='100%' frameborder='1' v-if="wordSrc"></iframe> </div> <!-- uni 的 SDK --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/global.js"></script> <script type="text/javascript" src="../js/file-saver/dist/FileSaver.js"></script> <!-- <script type="text/javascript" src="../js/wps/web-office-sdk-v1.1.2.umd.js"></script> --> <script type="text/javascript"> // import { saveAs } from '../js/file-saver/dist/FileSaver.js'; document.addEventListener('UniAppJSBridgeReady', function() { let that //webview传参到html5网页 let { base64, type } = plus.webview.currentWebview(); console.log(base64.slice(0, 50)); new Vue({ el: '#App', data: { videoSrc: '', imgSrc: '', audioSrc: '', wordSrc: '', aHref: "" }, async mounted() { that = this let blob = that.dataURLtoBlob(base64) /** * URL对象用于生成指向File对象或Blob对象的URL。 * 这个URL可以放置于任何通常可以放置URL的地方,比如img标签的src属性 **/ var blobUrl = URL.createObjectURL(blob); console.log(blobUrl); console.log(type); if (type == 'video') { that.videoSrc = blobUrl } else if (type == 'audio') { that.audioSrc = blobUrl } else if (type == 'word') { } // 在每次调用createObjectURL()方法时,都会创建一个新的URL对象,即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时,每个对象必须通过调用URL.revokeObjectURL()方法来释放 setTimeout(() => { window.URL.revokeObjectURL(objecturl); //释放createObjectURL创建得对象 }, 2000) }, methods: { //base64转成blob对象第一种方式 dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);//8位无符号整数,长度1个字节 console.log(mime) while (n--) { u8arr[n] = bstr.charCodeAt(n); } // console.log(JSON.stringify(u8arr)); return new Blob([u8arr], { type: mime }); }, } }) }); </script> </body> </html>

uniapp web-view 加载本地HTML链接时候,页面setNavigationBarTitle会被HTML的title替代
HTML页面中的title标签内容这么写: <title>'</title>
这样可以隐藏HTML中的title,setNavigationBarTitle也能正常使用
HTML页面中的title标签内容这么写: <title>'</title>
这样可以隐藏HTML中的title,setNavigationBarTitle也能正常使用