uniapp 知识点归纳 ​

uni.setClipboardData({
	data: '内容',
	success: function () {
		console.log('success');
	}
});

uni.getClipboardData({
	success: function (res) {
		console.log(res.data);
	}
});

<textarea 
    auto-height adjust-position 
    auto-blur fixed
    :show-confirm-bar="false"
    placeholder="请输入发表评论"
    cursor-spacing="20"
    style="padding: 20rpx;width: 90%;"
    v-model="commentData"
/>

export default {
    data() {
        return {
            commentData: '' // 评论内容
        }
    },
    methods: {
        handleSubmit() {
            // 用 V-model绑定，点击事件就能直接获取到输入框的值
            console.log(this.commentData)
        }
    }
}

previewImage(index) {
    let picDataList = this.picData2F.map(item => {
        console.log(item)
        return `地址完整路径，带上参数`;
    });
    uni.previewImage({
        current: index,
        urls: picDataList
    });
}

previewImg(photoImg) {
	let imgsArray = [];
	imgsArray[0] = photoImg;
	uni.previewImage({
		current: 0,
		urls: imgsArray
	});
}

// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
onShareAppMessage(res) {
    console.log(res)
    console.log(this.goodsId)
    return {
        title: '分享的标题',
        path: `/pages/index/goodsDetail?id=${this.goodsId}&type=${this.goodsType}`, // 带参数进入小程序页面
        imageUrl: ''
    }
},

uni.showToast({
    title: '已取消支付',
    icon: "error",
    duration: 2500,
    success: () => {
        setTimeout(() => {
            uni.navigateBack() // 默认返回上一级
        }, 2500)
    }
})

uni.pageScrollTo({
    scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
    duration:300  // 滚动动画的时长
})

onPageScroll(e){
    // console.log('e:',e)
    if(e.scrollTop>=200){
        // 显示
        this.isShow=true
    } else {
	    // 隐藏
	    this.isShow=false
    }
}

topBack(){
    uni.pageScrollTo({
        scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
        duration:300  // 滚动动画的时长
    })
}

uni.switchTab({
    url: '/pages/my/index/index',
    success: (res) => {
        let page = getCurrentPages().pop()
        if (page == undefined || page == null) return
        page.onLoad()
    }
})

// 当前页面
let pages = getCurrentPages(); 
// 前一个页面
let beforePage = pages[pages.length - 2]; 
if(beforePage.route == 'pages/login/login') {
    uni.navigateTo({
        url:'/pages/index/index'
    })
} else {
    uni.navigateBack({
        delta: 1
    })
}

// interceptor.js

// 页面白名单
const whiteList = [
	'/',
	'/pages/login/login',
	'/pages/index/index',
]

// 允许跳转的判断
export function hasPermission (url) {
	let tokens = uni.getStorageSync('tokens')
	// 在白名单中或有token，直接跳转
	if(whiteList.indexOf(url) !== -1 || tokens) {
		return true
	}
	return false
}

// 页面跳转拦截
export function navInterceptor() {
	uni.addInterceptor('navigateTo', {
		// 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
		invoke (e) {
			//console.log(e,'----e')
			let url = e.url;
			let index = url.indexOf("?"); //indexOf 获取第一个斜杠的索引,
			let result = url.substring(0,index)
			//console.log(result,'----111'); //substring 截取，
            // 如果被拦截，则跳转到登录页面
			if(!hasPermission(result)){
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		},
		success (e) {
			//console.log(e)
		},
		fail(e) {
			//console.log(e)
		}
	})
}

// 页面跳转拦截，针对底部 switchTab中的路径
export function switchInterceptor() {
	uni.addInterceptor('switchTab', {
		// tabbar页面跳转前进行拦截
		invoke (e) {
			console.log(e)
			let url = e.url;
			let index = url.indexOf("?"); //indexOf 获取第一个斜杠的索引,
			let result = url.substring(0,index)
			if(!hasPermission(result)){
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		},
		success (e) {
			//console.log(e)
		},
		fail(e) {
			//console.log(e)
		}
	})
}

// main.js

import '@/utils/intercept.js'

// app.vue
// 引入拦截器中的拦截方法
import {navInterceptor,switchInterceptor} from '@/utils/intercept.js'
export default {
    onLaunch: function() {
        console.log('App Launch')
        // 在小程序启动时，就开始拦截，引导用户登录才能访问
        navInterceptor()
        switchInterceptor()
    },
    onShow: function() {
        console.log('App Show')
    },
    onHide: function() {
        console.log('App Hide')
    }
}

uni.navigateTo({
    url: '跳转路径',
    events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: (res) => {
            // 获取跳转页面传递回来的数据
            console.log(res,'----接收传参')
        },
    }
})

// this.getOpenerEventChannel()是uni自带的一个方法,返回一个对象
const eventChannel = this.getOpenerEventChannel();
// 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
eventChannel.emit('acceptDataFromOpenedPage', {
    //...需要传递的参数
});
// 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
uni.navigateBack({
    delta: 1
});

// 将对象转成字符串，再用 encodeURIComponent() 函数进行转义
encodeURIComponent(JSON.stringify(obj))

// 将接收的参数转换成对象：
JSON.parse(decodeURIComponent(obj))

let arr = encodeURIComponent(JSON.stringify('需要传递的对象参数: arr、obj'));

uni.navigateTo({
	url:`xxx?arr=${arr}`
})

onLoad(option) {
	let arr = JSON.parse(decodeURIComponent(option.arr))
},

reload() {
    // 页面重载
    const pages = getCurrentPages()
    // 声明一个pages使用getCurrentPages方法
    const curPage = pages[pages.length - 1]
    // 声明一个当前页面
    curPage.onLoad(curPage.options) // 传入参数
    curPage.onShow()
    // 执行刷新
},

beforeDestroy() {
    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2]; // 上一个页面
    // 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
    prevPage.setData({
        isRefresh: true 
    })
},

onShow(options) {
    // 页面刷新，重新获取缓存数据
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    if(currPage.__data__.isRefresh) {
        // 下方写入需要刷新的数据方法 或者 赋值语句
        // 例1：this.status = uni.getStorageSync('status');
        // 例2：this.getList();
        ...
        // 每一次需要清除，否则会参数会缓存
        currPage.__data__.isRefresh = false;
    }
},

data() {
    return {
        couponIdCurrent: null,
    }
},
methods: {
    handleSelected(index) {
        if (this.couponIdCurrent == this.couponList[index].id) {
            this.couponIdCurrent = null
        } else {
            this.couponIdCurrent = this.couponList[index].id
        }
        this.$emit('couponSelect',this.couponIdCurrent)
    }
}

data() {
    return {
        radioCurrent: 0,
        methedsList: [
            {
                imgUrl: '@/static/img/icon_wechat.png',
                title: '微信支付',
                id: 0
            }
        ],
    }
},
radioChange(e) {
    this.methedsList.forEach( (item,index) => {
        if (item.id === e.target.id) {
            this.radioCurrent = index;
        }
    })
},

data() {
    return {
        TableHeader, // 表头数据 （由于太长，就从外部引用了，不写在本页面中）
        rightBorder: true, // 组件中，是否显示固定区与滚动区的分隔线
        formList: [], // 表格数据
    }
},
methods: {
    handleTableClick(key,item) {
        if(key.text === '报名') {
            // 判断按钮显示的那一列，做点击事件，与后端交互
            console.log(key,'---key')
            console.log(item,'---item')
        } else {
            // 这里主要是表格数据过长会被隐藏，通过 modal 弹窗显示出来
            uni.showModal({
                title: key.text,
                content: item[key.dataKey],
                showCancel: false,
                confirmColor: '#CA6F3A',
                confirmText: '关闭'
            });
        }
    },
}

export const TableHeader = [
	{
		text: '岗位名称',
		fixed: true,        
		sortKey: '',    
		dataKey: 'position_name',
	},
    ...
    {
		text: '报名',
		fixed: false,        
		sortKey: '',    
		dataKey: '',
		width: '280rpx',
		isBtn: true,
		btnName: '点击报名'
	},
]

// 预览文件
export function previewFiles(fileUrl) {
    // 完整的文件地址
	let link = fileUrl; 
    // 获取文件名称与后缀 xxx.pdf
	let fileName = link.substr(link.lastIndexOf('/') + 1); 
	wx.showLoading({
		title: '文件加载中',
	})
	wx.downloadFile({
		url: link,
		filePath: wx.env.USER_DATA_PATH + `/${fileName}`, // 用文件名命名，否则显示临时路径名称 （划重点）
		success: res => {
			if (res.statusCode === 200) {
				const filePath = res.filePath;
				wx.openDocument({
					filePath: filePath,
					showMenu: true, //关键点
					success: function (res) {
						console.log('打开文档成功')
					},
                    complete: function(res) {
						wx.hideLoading();
					}
				})
			} else {
				wx.hideLoading();
				showToast('打开失败')
			}
		},
		fail: error => {
			console.log(error,'---error')
			wx.hideLoading();
			showToast('打开失败')
		}
	})
}

// 选择坐标点
handleChooseLocation() {
    uni.navigateTo({
        url: `/pages_map/map/map?type=single`,
        events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: (res) => {
                console.log(res,'----接收传参')
                this.shopInfo.location.lat = res.lat;
                this.shopInfo.location.lng = res.lng;
            },
        }
    });
},

export default {
    data() {
        return {
            webUrl: ''
        }
    },
    onLoad(option) {
        console.log(option)
        this.webUrl = `http://xxxx/?type=${option.type}`
    },
    methods: {
        // 获取网页传回的参数,然后传回给表单页
        getMessage(e) {
            console.log(e,333)
            // this.getOpenerEventChannel()是uni自带的一个方法,返回一个对象
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('acceptDataFromOpenedPage', e.detail.data[0]);
        }
    }
}

// 向小程序发送参数 data里携带的就是要带去的参数
wx.miniProgram.postMessage({
    data: {
        lat: lnglatTransfer[1],
        lng: lnglatTransfer[0]
    }
});
// 返回小程序
wx.miniProgram.navigateBack({
    delta: 1
});

let res = await getQrcode({
    page: 'pages_travel/details/details',
    scene: `id=${this.currentShopId}&type=${this.currentType}`,
});

let param = "shopId=1077&shopName=霸王茶姬";
let encodedParam = encodeURIComponent(param);

onLoad(option) {
    console.log(option,'---页面接收参数')
    
    // 判断是否有scene 获取店铺id和type
    if(option && option.scene) {
        // 解析获取扫码进入的 scene 参数
        let scene = decodeURIComponent(option.scene);
        console.log(scene,'---scene')
        let sceneObj = {};
        for (let i = 0; i < scene.split('&').length;i++){
            let arr = scene.split('&')[i].split('=');
            sceneObj[arr[0]] = arr[1];
        }
        console.log(sceneObj,'---sceneObj')
    }
},

<script>
    {/* 导入对象存储上传的方法 */}
    import {
		UploadFile
	} from '@/utils/upload.js'

    {/* 文件压缩用到的主要核心文件 */}
    const fileUtil = require('@/utils/zipTools/fileUtil.js');
	const zipUtil = require('@/utils/zipTools/zipUtil.js');
	
    {/* 压缩包所在目录 */}
	const zipFolder = `${wx.env.USER_DATA_PATH}/ziptest`;

    {/* 压缩包路径，包含压缩包后缀名称 */}
	const zipPath = `${zipFolder}/attachment.zip`;

    export default {
        data() {
            return {
                attachList: [], // 图片数组
                attachmentUrl: '', // 附件地址
            }
        },
        methods: {
            async upload() {
                loadingShow('图片上传中');
                this.attachList = [
                    { name: `图片1`, path: 'xxxx' },
                    { name: '图片2', path: 'xxxx' },
                    { name: '图片3', path: 'xxxx' },
                ];
                // 这里主要是给图片文件进行命名，格式： 名称 + 文件后缀
                this.attachList.forEach(item => {
                    // 查找最后一个点的位置
                    let lastDotIndex = item.path.lastIndexOf('.');
                    if (lastDotIndex !== -1) {
                        item.name = item.name + '.' + item.path.substring(lastDotIndex + 1);
                    }
                });
                // 先创建对应目录
                await fileUtil.mkdir(zipFolder);
                // 打包 zip
                await zipUtil.zip(this.attachList, zipPath, res => {}); 
                // 上传到对象存储，获取对应的地址
                let uploadRes = await UploadFile(zipPath, 'attachment.zip' ,'upload_zip');
                this.attachmentUrl = uploadRes.uploadUrl;
                loadingHide();
            }
        }
    }
</script>