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"
}
]
},
一个在学习的开发者,勿喷,欢迎交流