uniapp小程序简单功能(方便测试)

uniapp小程序简单功能(方便测试)

一、页面效果

二、前端代码

2.1、按钮

<view>
	<button @click="toProvider">获取供应商</button>
	<button @click="authLogin">微信授权登录(中部弹框授权)</button>
	<button @click="getUserProfile">微信授权登录(下部拉起授权)</button>
	<button @click="toLogin">获取登录code和用户信息</button>
	<button @click="getPhoneNumber">获取手机号code<span style="color: red;">(非个人开发有用)</span></button>
	<button @click="toOpenLocation">获取经纬度,打开位置</button>
	<button @click="toChooseLocation">打开地图选择位置</button>
	<button @click="toAliCode">支付宝code</button>
</view>

2.2、钩子函数

可以将授权登录的方法写在这里面，一进入页面就初始化加载

onLoad(){
	// 进入页面自动弹出授权登录页面
	// this.authLogin()
},

2.3 methods方法

1、获取供应商

//得到供应商
toProvider(){
	uni.getProvider({
	service:'oauth',
		success:(provider) => {
			console.log("provider",provider);
		}
	})
},

2、微信授权登录(中部弹框授权)

// 打开授权设置页,中部弹框授权
authLogin() {
	let that = this;
    uni.showModal({
        title: "授权登录",
        content: "是否授权微信小程序登录",
        success: function(res) {
            if (res.confirm) {
                console.log("点击登录");
				//得到供应商
				uni.getProvider({
					service:'oauth',
					success:(res) => {
						//登录
						uni.login({
							provider: res.provider[0],
							scopes: 'auth_user',
							success: async (res) => {
								// 获取登录code
								console.log("userLoginCode",res);
								const code = res.code
								// 将code传至服务器并登录
								if(code){
									uni.request({
										url:"http://192.168.0.120:8081/wx/user/wxLogin",
										data:{
											code:res.code
										}
									}).then((res) => {
										console.log("中部弹框授权",res);
									})
								}else{
									uni.showToast({
										title:"授权已取消"
									})
								}
							},
						})
					}
				})
            }else if(res.cancel){
				uni.showToast({
					title:"授权已取消"
				})
			}
        },
        
    })
},

3、微信授权登录(下部拉起授权)

//微信底部授权登录
getUserProfile() {
	uni.getUserProfile({
		desc: '登录',
		success: (info) => {
			console.log("info",info)
			//这里取到的是用户的信息，自己安排自己的业务
			uni.login({
				provider: 'weixin',
				success: (res) => {
					console.log("res.code",res.code)
					if(res.code){
						uni.request({
							url:"http://192.168.0.120:8081/wx/user/wxLogin",
							data:{
								code:res.code
							}
						}).then((res) => {
							console.log("resss",res);
						})
					}

				}
			})
		},
		fail: (err) => {
			console.log(err);
		}
	})
},

4、获取登录code和用户信息

//获取登录code和用户信息
toLogin(){
	uni.getProvider({
		service:'oauth',
		success:(provider) => {
			uni.login({
				success:(loginCode) =>{
					console.log("loginCode",loginCode);
					uni.getUserInfo({
						success:(userInfo) => {
							console.log("userInfo",userInfo);
						}
					})
				}
			})
		}
	})
},

5、获取手机号code

//获取手机号code
getPhoneNumber(e){
	console.log("phoneCode",e)
},

6、获取经纬度,打开位置

需要配置授权信息，详见6.1

//获取经纬度,打开位置
toOpenLocation(){
	uni.getLocation({
		success:(userLocation) => {
			console.log("userLocation",userLocation);
			const latitude = userLocation.latitude;
			const longitude = userLocation.longitude; 
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				success:function(){
					console.log("打开位置");
				}
			})
		}
	})
},

6.1、授权配置
最开始配置在pages.json中，用了一段时间后，出现授权失败，
查询了相关资料后，改成配置在manifest.json最下面源码视图里的mp-weixin中配置中，
可以自己调整下试试

"permission":{
	"scope.userLocation":{
		"desc":"你的位置在哪"
	}
},

7、打开地图选择位置

//打开地图，选择位置
toChooseLocation(){
	uni.chooseLocation({
		success:(choose) => {
			console.log("choose",choose);
		}
	})
},

8、支付宝code

// Ali授权code
toAliCode(){
	uni.getAuthCode({
		scopes:"auth_user",
		success:(authCode) => {
			console.log("authCode",authCode);
		}
	})
},

三、配置文件

效果图中的下面tabar切换可以配置在pages.json中

"tabBar": {
	"list":[
		{
			"iconPath": "static/icon/hei.jpg",
			"pagePath": "pages/login/login",
			"text": "首页",
			"selectedIconPath": "static/icon/huang.jpg"
		},
		{
			"iconPath": "static/icon/hei.jpg",
			"pagePath": "pages/home/car",
			"text": "订单",
			"selectedIconPath": "static/icon/huang.jpg"
		}
	]
},

一个在学习的开发者，勿喷，欢迎交流