uni-app 开发微信小程序记录_uniapp getwxacodeunlimit-CSDN博客

本文链接：https://blog.csdn.net/qq_46143850/article/details/119759540

1、获取用户信息

1.1 --下面的这个获取用户信息的 api 现在只能获取到匿名的数据。微信官方更换的api请看 1.2

uni.getUserInfo({
	success(res) {
		console.log('打印当前用户的所有信息',res.userInfo);
	}
})

结果截图如下：
在这里插入图片描述

1.2 – 目前使用下面的这个api 获取用户信息都需要用户自己点击以后才可以获取

1）这一行是按钮，点击按钮触发 getUserProfile 方法

<view class="getBtn" @click="getUserProfile">获取头像昵称</view>

2）再methods 中实现该方法

getUserProfile(){//获取个人信息
	let that = this;
	uni.getUserProfile({
	    desc:'登录',
	    success:(res)=>{
	        console.log('用户信息获取详情',res.userInfo);
	    },
	    fail:(res)=>{
			 console.log('个人信息获取失败详情',res);
	    }
	});
},

3）结果截图：
在这里插入图片描述

2、获取当前所在位置的详细地址

备注：请求中url 里面的&key= 后面的数据可以换成在腾讯地图上申请的key，申请链接，当然这个链接只是微信小程序的，更多请直接去官网看哈。

uni.getLocation({
	geocode:true,
	success(res){
		console.log('获取到当前的经纬度',res)
		console.log(res.latitude,res.longitude);
		uni.request({
			header:{
				"Content-Type": "application/text"
			},
			url:`http://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=MVGBZ-R2U3U-W5CVY-2PQID-AT4VZ-PDF35`,
			success(re) {
				console.log("中文位置",re) 
				if(re.statusCode===200){
					console.log("获取中文街道地理位置成功",re.data.result.address_component.street)
				}else{
					console.log("获取信息失败，请重试！")
				}
			 }
		});
	}
})

结果截图：

在这里插入图片描述

补充：上面的获取地址偏差会有点大，还是用下面这种添加type为gcj02的，通常偏差比较小

在这里插入图片描述

3、获取微信小程序码的步骤

备注：其中 appid 和 secret 是在微信公众平台申请的

第一步：根据接口：https://api.weixin.qq.com/cgi-bin/token 获取到 access_token
参数有：
1）grant_type，这个的值是固定的client_credential
2）Appid
3）Secret
例子：
请求方式：GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx9677b2a3358a27c5&secret=132768c8c078860c085898c61a056e15
Postman请求截图：
在这里插入图片描述
第二步：根据接口： https://api.weixin.qq.com/wxa/getwxacodeunlimit 获取到小程序码
传入的参数 access_token ，这个参数就是第一步中获取到的值。
还需要传一个json 格式的参数 scene 这个是固定的
{
“scene”: “a=1”
}

例子：
请求方式：POST

https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=48_8RxS97TrFgi6mncss2LrSRB0RyVApmVPP31ZbXkKuJ-sBGaUadgZ6c8bvYPQ2fn695zBQNzK46VfCOM5QdxcMowo_DWLizYCkclOR12HhDNp27opdz1Ut33M-XVKHmlb2jK3wDzU9gUfA3mRPCDgAGAXKL

Postman请求截图：
在这里插入图片描述

4、登录按钮防抖（防止用户短时间内点击多次导致出现多次弹框）

1）在工具 debounce.js 文件中粘贴下面代码

export const DebounceBy = (fn, t) => {
  let delay = t || 500
  let timer
  return function () {
    let args = arguments;
    if (timer) {
      clearTimeout(timer)
    }
 
    let callNow = !timer
 
    timer = setTimeout(() => {
      timer = null
    }, delay)
 
    if (callNow) fn.apply(this, args)
  }
}

2）在需要使用的页面进行引入

在这里插入图片描述

3）在methods中使用

function(value){ //这里面写自己 的业务代码，下面的例子使用获取用户信息}

源码：

getUserProfile:DebounceBy(function(value){
	let that = this;
	uni.getUserProfile({
		desc:'登录',
		success:(res)=>{
			console.log('个人信息获取详情',res.userInfo);
			
		},
		fail:(res)=>{
			 console.log('个人信息获取失败详情',res);
			
		}
	});
	
},3000),

代码截图：
在这里插入图片描述

5、判断一个时间是否为本周

解决方案一：获取到传入时间的周一，再获取到今天日期的周一。最后比较两个两个周一的时间戳（以秒作为单位，否则会出现精度问题）,如果时间戳相等就是同一个周否则就不是。获取时间的周一代码如下，可以传入字符串（‘2021-8-30 00:21:32’）这类似的结构，今日的直接可以传入 new Date().

//在需要的地方这样比较是否是本周：console.log(this.getMondayDate('2021-8-30 00:21:32')==this.getMondayDate(new Date()))
getMondayDate(old) {
	var date = new Date(old)
    let day = date.getDay();
    let deltaDay;
    if (day == 0){
        deltaDay = 6;
    } else {
        deltaDay = day - 1;
    }
    let monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000);
    monday.setHours(0);
    monday.setMinutes(0);
    monday.setSeconds(0);
	console.log('传入的值',date,'星期一：',monday,Math.floor(monday.getTime()/1000))
    return Math.floor(monday.getTime()/1000);  //返回本周的周一日期
}

6、复制点击的文本内容

使用 api 就可以实现，除了 h5 端以外全部兼容

uni.setClipboardData({
	data:"你好",//必填，即为你复制的内容
	success() {
		console.log('复制成功')
	}
})

7、使用uniapp 生命周期进行页面数据的展示（上拉页面加载，不需要组件），可以将页面显示成一个长页的形式，体验效果好

uniapp 提供了 onReachBottom 生命周期。不需要 scroll-view 组件
onReachBottom 与 onLoad 等同一级。具体可查看官方文档

备注： scroll-view 组件实现的思路：该组件的 @scrolltolower=“onPulling” 事件，页面到底部的时候就请求下一页的数据，请求成功就存储页数，继续下拉就判断当前页数是否小于总的页数，如果是继续请求下一页，否则就提示“暂无更多数据”。

8、截屏功能

可以直接将这个函数绑定到相应的点击事件：

capture(){
	var pages = getCurrentPages();  
	var page = pages[pages.length - 1];  
	console.log("当前页"+pages.length-1);
	var bitmap=null;  
	var currentWebview = page.$getAppWebview();
	bitmap = new plus.nativeObj.Bitmap('amway_img');  
	// 将webview内容绘制到Bitmap对象中  
	currentWebview.draw(bitmap,function(){  
		console.log('截屏绘制图片成功');  
		bitmap.save( "_doc/a.jpg"  
		,{}  
		,function(i){  
			console.log('保存图片成功：'+JSON.stringify(i));  
			uni.saveImageToPhotosAlbum({  
				filePath: i.target,  
				success: function () {  
					bitmap.clear(); //销毁Bitmap图片  
					uni.showToast({  
						title: '保存图片成功',  
						mask: false,  
						duration: 1500  
					});  
				}  
			});  
		}  
		,function(e){  
			console.log('保存图片失败：'+JSON.stringify(e));  
		});  
	},function(e){  
		console.log('截屏绘制图片失败：'+JSON.stringify(e));  
	}); 
}

9、进入新页面返回时保持用户滚动的位置不变

描述：首页展示很多条景区介绍数据，进行上拉分页加载（每次请求10条数据），点击第13条数据景区新的页面查看详情，从详情页面返回到首页的时候页面需要停留在上次滑动的位置。（数据也需要刷新）

解决方案：每次进入详情前记录下详情的id，当返回来的时候，在 onShow 声明周期中判断是否有详情id，如果有，则请求一次景区详情，请求成功后就遍历景区列表，找到记录的id，将该景区更新即可。

10、小程序使用地图组件map，打标记

描述：小程序在使用map组件标记位置的时候文本标记安卓端出现偏移，但是苹果端是正常的因为我设置了label.textAlign=‘center’.

在这里插入图片描述

解决方案：将label的属性坐标 x，y 添加上，坐标的原点就是marker里面设置的经纬度；使用 `wx.getSystemInfoSync()` 判断当前的设备，如果是安卓端的时候就设置 x 为负数（文本字符串的长度*一半的fontsize）。具体代码如下：

let plat = wx.getSystemInfoSync().platform;//获取当前设备类型
subObj={
	id:id,
	latitude: this.allData.lat,
	longitude: this.allData.lon,
	iconPath:"/static/pictures/home/place-orange.png",//标记的图片
	width:21,
	height:30,
	label:{
		content:this.allData.title,//文本
		fontSize:13,
		color:"#FF8F0A",
		x: plat=='android'? -(this.allData.title.length*6.5):0,
		y: 0,
		textAlign:"center",
	},
}