【总结】uniapp以及wx小程序 相关写法集合

一、css

二、方法

uniApp

1、动态修改头部标题

复制代码
uni.setNavigationBarTitle({
	title: this.dynamicTitle,
	success: () => {
		console.log('修改标题成功')
	},
	fail: () => {
		console.log('修改标题失败')
	},
	complete: () => {
		console.log('修改标题结束')
	}
})

2、预览图片单张/多张(拖动缩放),识别https

复制代码
uni.previewImage({
	// 需要预览的图片链接列表
	urls: [res.tempFilePath],
	// 为当前显示图片的链接/索引值
	current: res.tempFilePath,
	// 图片指示器样式
	indicator:'default',
	// 是否可循环预览
	loop:false
});

3、获取图片的详细信息

复制代码
uni.getImageInfo({
	src: '/static/bg_icon.png', // 图片地址
	success(res) {
       console.log(res.path)
    }
})

4、将画布内容生成临时文件路径

复制代码
uni.canvasToTempFilePath({
	canvasId: 'canvas1',
	success: (res) => {
		console.log(res.tempFilePath)
	},
	fail: (res) => {
       // 失败
	}
})

5、文件下载

复制代码
uni.downloadFile({
	url: 'https://open-laser.oss-cn-shanghai.aliyuncs.com/ab965f82ebc64f92bd2f3d53c595bfb0.jpg',
	success: (res)=>{
		console.log(res.tempFilePath)
	}
})

6、文件上传

复制代码
uni.uploadFile({
	url: 'https://open-laser.oss-cn-shanghai.aliyuncs.com/ab965f82ebc64f92bd2f3d53c595bfb0.jpg',
	success: (res)=>{
		console.log(res.tempFilePath)
	}
})

7、保存图片

复制代码
uni.saveImageToPhotosAlbum({
	filePath: '../static/icon.png',
	success(res) {
		uni.showToast({
			icon: 'success',
			mask: true,
			title: '保存成功',
		});
	},
	fail(res) {
		console.log(res.errMsg)
	}
})

8、模块的拖动双指缩放

复制代码
<template> 
  <movable-area v-if="person.isShowExam" @click.stop="person.isShowExam=!person.isShowExam">
	<movable-view  direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" >
     <!-- 内容  -->
	</movable-view>
  </movable-area>
  <view @click.stop="person.isShowExam=true">预览</view>
</template>

<script setup>
import { reactive } from 'vue'
let person=reactive({
	isShowExam:false
})
</script>

<style lang="scss" scoped>
movable-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 375px;
	height: 100vh;
	background: #000;
	overflow: hidden;
	z-index: 9999;
	movable-view {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
</style>

小程序

希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

相关推荐
流***陌2 小时前
淘宝一番赏抽赏小程序:开启趣味抽赏新体验
小程序
说私域2 小时前
开源链动2+1模式AI智能名片S2B2C商城小程序在竞争激烈的中低端面膜服装行业中的应用与策略
大数据·人工智能·小程序
_AaronWong3 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
陈陈小白3 小时前
小程序如何接入火山引擎埋点数据
小程序·火山引擎
星光一影3 小时前
Java版小区物业管理系统/业主端/物业端/管理端/支持公众号、小程序、app
java·大数据·小程序
2501_9159090611 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师15 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
曹申阳15 小时前
1. 使用VSCode开发uni-app环境搭建
ide·vscode·uni-app
雪芽蓝域zzs17 小时前
uniapp开发 APP嵌入另一个APP打包的wgt文件,实现点击携带参数跳转到wgtAPP的某一个页面
uni-app·apache
00后程序员张17 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump