发布时间:
页面传参 #
当前页面（传递参数）
uni.navigateTo({
url: `/pages/topic/index?id=${model.id}`,
success(res) {
res.eventChannel.emit('toTopic', model);
}
})目标页面（接收参数）
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('toTopic', (data) => {
console.log('data: ', data);
})客户端读写本地文件 #
写入文件
return new Promise((resolve,reject)=>{
// see https://www.html5plus.org/doc/zh_cn/io.html#plus.io.PUBLIC_DOCUMENTS
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => {
// fs.root是根目录操作对象DirectoryEntry , create 指示如果文件或目录不存在时是否进行创建，默认值为false。
fs.root.getFile(path, {create: true}, fileEntry => {
plus.nativeUI.showWaiting("正在写入");
//创建一个FileWriter来写入文件
fileEntry.createWriter(writer => {
// 定位文件的操作位置，有效值为 0 到文件的总长度减1。 0表示文件的起始位置。
writer.seek(0);
// 写入内容
writer.write("Data ");
// 成功
writer.onwrite = function ( e ) {
plus.nativeUI.closeWaiting();
console.log('写入成功',e.target.fileName);
plus.nativeUI.toast("本地路径："+e.target.fileName,{duration:'long'});
resolve(e.target.fileName)
};
// 失败
writer.onerror=function(e){
plus.nativeUI.closeWaiting();
plus.nativeUI.toast("写入失败");
console.log('写入失败',e);
reject(e)
};
}, error => {
plus.nativeUI.toast("创建 FileWriter 失败！");
console.log('创建 FileWriter 失败', error);
reject(error)
})
})
})
})读取文件
return new Promise((resolve, reject) => {
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => {
fs.root.getFile(path, {create: true}, fileEntry => {
fileEntry.file(file => {
const fileReader = new plus.io.FileReader();
fileReader.readAsText(file, 'utf-8');
fileReader.onloadend = function(evt) {
resolve(evt.target.result)
}
fileReader.onerror = function(e) {
plus.nativeUI.toast("读取文件失败");
resolve(e)
}
});
});
}, error => {
plus.nativeUI.toast("请求文件系统失败");
resolve(error)
});
})web-view #
web-view 加载本地 html 文件
创建 index.html #
目录结构 tree
├─hybrid
│ └─html
│ └─index.html加载本地文件 html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加载本地文件</title>
</head>
<body>
<input type="file" id="fileInput" accept="text/plain,application/json">
<button onclick="readFile()">读取文件</button>
<div id="fileContent"></div>
<script type="text/javascript" src="uni.webview.1.5.5.js"></script>
<script type="text/javascript">
function readFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
document.getElementById('fileContent').innerHTML = content;
};
reader.readAsText(file);
} else {
alert('请选择文件！');
}
}
function back(){
uni.navigateBack()
}
document.querySelector('input[type=file]').addEventListener('change',(event)=>{
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
uni.postMessage({data:content})
};
reader.readAsText(file);
} else {
alert('请选择文件！');
}
})
</script>
</body>
</html>web-view 加载文件 #
web-view Vue
<template>
<view class="main">
<web-view src="/hybrid/html/index.html" @message="message"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
// 监听 html 发送消息
message(data){
this.callParentMethod(data.detail.data[0])
},
// 调用父级页面方法
callParentMethod(content) {
const pages = getCurrentPages();
const page = pages[pages.length - 2];
page.localLoading(content);
uni.navigateBack()
},
}
}
</script>
<style lang="scss" scoped>
</style>uniapp 实现锚点 #
在 uni-app 中实现锚点可以通过使用 scrollTo 函数来完成。
示例代码如下所示：
anchorPoint(){
// 获取到需要跳转的元素节点
const targetElement = document.getElementById('swiper-s'); // 这里的 'target' 为目标元素的 id
// 调用 scrollTo 函数进行页面滚动
uni.createSelectorQuery().select('#swiper-s').boundingClientRect(rect => {
if (rect) {
const topOffset = rect.top + window.pageYOffset;
uni.pageScrollTo({
selector: '#swiper-s',
duration: 300,
success() {
console.log("滚动到指定位置成功");
},
fail() {
console.error("滚动失败");
}
});
} else {
console.warn("未能获取到目标元素信息");
}
}).exec();
}