uniapp手机一键登录获取code
1.手机一键登录
使用button按钮自带的属性 open-type 设置getphonenumber,在@getphonenumber回调中获取到用户信息
getphonenumber(e) {
// 获取手机一键登录的code
console.log(e.detail.code)
//登录的接口信息以及戴的参数
const code = {
code: e.detail.code,
.....
}
//接口
login(code).then(res => {
//登录是否成功信息
})
}
uniapp uni.login所获取的code
1.获取uni.login的code和uni.getUserInfo获取用户信息(查看官网调整信息)
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
console.log(loginRes.code);
//获取用户信息可以使用,但是不推荐,官方调整
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
// 微信官方默认返回微信昵称和头像
console.log('用户昵称为:' + infoRes.userInfo.nickName);
console.log('用户头像为:' + infoRes.userInfo.avatarUrl);
}
});
}
});
2.获取用户昵称和头像
1.获取微信头像
```
<button class="share-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="personal_tx" :src="formData.avatarUrl"></image>
</button>
//获取微信头像
onChooseAvatar(e) {
console.log(e);
let _this = this
let avatarUrl = e.detail.avatarUrl
console.log('savePicture', avatarUrl);
//头像图片保存临时地址,传给后端获取永久地址
API_upload.savePicture(avatarUrl).then(({
data
}) => {
console.log(data, '图片');
_this.formData.avatarUrl = data
let param = uni.getStorageSync('userInfor') || {};
param.avatarUrl = data
uni.setStorageSync('userInfor', param);
}).catch(err => {
console.log('err :>> ', err)
})
}
2.获取用户昵称
(1).ios端input可能会弹起自带的键盘 添加两个属性限制
<input placeholder-style="color:#ffffff" style="width: 174rpx;" type="nickname" placeholder="请输入昵称"
:value="formData.nickName" maxlength="10" @blur="bindbur" :focus="isFocus" @tap="getFocus" />
data() {
return {
isFocus: false,
}}
getFocus() {
this.isFocus = true
}
// 昵称获取
bindbur(e) {
console.log('this.nickName', e, this.formData.nickName);
this.formData.nickName = e.detail.value
let param = uni.getStorageSync('userInfor') || {};
param.username = e.detail.value;
uni.setStorageSync('userInfor', param);
}
(2).ios端uniappp还有一种会自启自带键盘 uni-popup-dialog 设置 mode="input" 如何防止
// uni-popup-dialog重写一个输入框
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog ref='input_ref' title="头部" placeholder="请输入" mode="input" :duration="2000"
:before-close="true" @close="close" @confirm="confirm">
<view class=“input_ys”>
<uni-easyinput type="text" v-model="hyValue" placeholder="请输入" clearSize="0" />
</view>
</uni-popup-dialog>
</uni-popup>
获取公众号号的code
1.使用web-view调用 你在微信公众平台设置的域名
重新创建一个文件webView.vue
<template>
<web-view src="公众平台的域名"></web-view>
</template>
<script>
</script>
<style scoped lang="scss">
</style>
创建一个文件index.html 配置访问域名返回的code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
.main{
text-align: center; /*让div内部文字居中*/
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<title>xxxx你自己配置的名称</title>
</head>
<body>
<div class="main">设置中。。。</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
if (window.location.search === ''){
const appid = '微信公众平台的appid'
const redirect_uri = encodeURI('微信公众平台的域名')
// 官方网址携带你的appid和域名地址
const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_base#wechat_redirect'
window.location = encodeURI(url)
} else {
var code = window.location.search;
// 成功后返回到你配置地址上 在onLoad(option) option获取地址上的code返回给后端
wx.miniProgram.reLaunch({
url:'/pages/home/index' + code
})
}
</script>
</body>
</html>
uniapp导航跳转
1.声明式导航通过navigator进行跳转
编程式导航通过
godetail(){
// 保留当前页跳转到应用内某个页面
uni.navigateTo({
url:'../detail/detail'
})
},
gomessage(){
// 跳转到tabBar,并关闭其他所有非tarBar页面
uni.switchTab({
url:'../message/message'
})
},
redirectMessage(){
// 关闭当前页,跳转到应用内的某个页面
uni.redirectTo({
url:'../detail/detail'
})
uniapp 微信支付流程
uniapp小程序支付流程:
1.申请微信支付: 微信支付平台完成注册和申请审核。申请成功后,将获得微信支付所必须的各种证书、密钥等信息,这些信息将用于后续的支付请求。
2.配置: hbuilder配置基本 在hbuilder中manifest.json下的App模块配置Payment(支付)选择需要支付的选项,配置appid
3.获取登录信息: 在登录的时候获取uni.login获取的code返回给后端,后端处理获取openid和信息
4.创建订单: 后端在服务器上生成订单号返回
5.前端调用支付接口: 在前端(uniapp项目),当用户点击支付按钮时,前端将向服务器发送请求,获取上述支付参数。调用微信支付API的wx.requestPayment()方法,传入支付参数,拉起支付密码框,完成支付
6.处理支付: 处理支付成功信心和返回上一页或者你返回的页面
<view class="foot_btn" @click="applySucc">
<span>立即支付</span>
</view>
// 支付成功跳转
applySucc() {
let orderInfo = '' //从服务器获取的订单
let productId = this.productBuy.id
// 调用接口返回订单信息
productOrderSave(productId).then((res) => {
let obj = JSON.parse(res)
let valueAfterEqual = obj.packageVal.split('=')[1]
// const now = new Date();
// // 将当前时间转换为时间戳(毫秒)
// const timestamp = now.getTime();
console.log(valueAfterEqual, obj, 'duixiang');
wx.requestPayment({
"timeStamp": obj.timestamp,
"nonceStr": obj.nonceStr,
"package": obj.packageVal,
"signType": "RSA",
"paySign": obj.paySign,
"success": function(res) {
// 支付成功返回界面,配置自己的路径
uni.switchTab({
url: '/pages/curriculum/curriculum'
})
},
fail: function(err) {
console.log('支付失败:' + JSON.stringify(err));
uni.navigateBack()
}
})
})
},