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

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

一、页面效果

![小程序demo](https://img-blog.csdnimg.cn/135da5c522d744d8b3a83cf1cbefff7e.jpeg#pic_center

二、前端代码
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"
		}
	]
},

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值