一、授权页面布局
wxml页面
<view class='body' style='height: {{windowHeight}}px;'>
<view class='body-ico'>
<image src='../../../images/ico.png'></image>
</view>
<view class='auth'>微信{{stateName}}授权页面</view>
<view class='auth-text'>此页面是微信{{stateName}}授权页面,点击下方按钮弹出授权页面</view>
<view class='auth-btn-e' bindtap='getRecordAuth' wx:if='{{authFlag == 0}}'>点击授权</view>
<view class='auth-btn' wx:else>
<button open-type="getUserInfo" bindgetuserinfo='bindgetuserinfo'>点击授权</button>
</view>
</view>
<view class='goods-detail-m' wx:if='{{isShowModel}}'>
<view class="mask-m"></view>
<view class="goodsdetail-m">
<view class='goodsdetail-m-title'>{{modelText}}</view>
<view class='goodsdetail-m-body'>
<view class='goodsdetail-m-body-left' bindtap='cancel'>取消</view>
<button class='goodsdetail-m-body-right' bindtap="openSetting">手动授权</button>
</view>
</view>
</view>
json页面
{
"navigationBarTitleText": "授权页面",
"disableScroll": true
}
wxss页面
.body {
width: 750rpx;
box-sizing: border-box;
/* border: 1rpx solid #000; */
}
.body-ico {
/* padding-top: 220rpx; */
margin: 220rpx auto 0 auto;
width: 220rpx;
height: 220rpx;
box-sizing: border-box;
/* border: 1rpx solid #000; */
}
.body-ico image {
width: 100%;
height: 100%;
}
.auth {
margin-top: 30rpx;
width: 750rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 32rpx;
text-align: center;
/* border: 1rpx solid #000; */
}
.auth-text {
margin: 30rpx auto 0 auto;
width: 500rpx;
height: 80rpx;
font-size: 28rpx;
/* border: 1rpx solid #000; */
color: #aaa;
}
.auth-btn-e {
margin: 200rpx auto 0 auto;
text-align: center;
width: 220rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
border: 1rpx solid #08af07;
/* border-radius: 10rpx; */
color: #08af07;
}
.auth-btn {
margin: 200rpx auto 0 auto;
text-align: center;
width: 220rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
border: 1rpx solid #08af07;
/* border-radius: 10rpx; */
color: #08af07;
}
button {
border: none;
text-align: center;
padding: 0;
margin: 0;
width: 210rpx;
height: 70rpx;
padding-left: 5rpx;
box-sizing: border-box;
line-height: 70rpx;
font-size: 28rpx;
color: #08af07;
background-color: #fff;
}
button::after {
border: none;
}
/* 自定义showModel */
.comment {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
z-index: #999;
}
.pen {
width: 41rpx;
margin-left: 20rpx;
height: 41rpx;
margin-top: 10rpx;
}
.pen-div {
display: inline-block;
vertical-align: top;
}
.pen-text {
display: inline-block;
vertical-align: top;
}
.pen-input {
margin-left: 6rpx;
line-height: 60rpx;
font-size: 24rpx;
font-weight: 100rpx;
letter-spacing: 2rpx;
}
.showBottom {
width: 100%;
height: 86rpx;
border-top: 1rpx solid #e1e1e1;
}
.showText {
display: inline-block;
vertical-align: top;
width: 50%;
height: 60rpx;
background: #e1e1e1;
margin: 15rpx;
margin-left: 38rpx;
border-radius: 50rpx;
}
.showButtom {
display: inline-block;
vertical-align: top;
widows: 40%;
height: 80rpx;
}
.comment-number-ioc {
widows: 51rpx;
margin-left: 48rpx;
height: 51rpx;
margin-top: 23rpx;
}
.cnNuberm {
position: absolute;
width: 45rpx;
height: 20rpx;
border-radius: 30rpx;
background: red;
color: #fff;
font-size: 18rpx;
line-height: 20rpx;
text-indent: 4rpx;
top: 14rpx;
left: 500rpx;
}
.collect-ioc {
width: 51rpx;
margin-left: 51rpx;
height: 46rpx;
margin-top: 20rpx;
}
.comment-number {
display: inline-block;
vertical-align: top;
}
.collect {
display: inline-block;
vertical-align: top;
}
.share {
display: inline-block;
vertical-align: top;
}
.share-ioc {
width: 53rpx;
margin-left: 51rpx;
height: 46rpx;
margin-top: 20rpx;
}
.send-comment {
width: 100%;
height: 86rpx;
margin: 5rpx;
border-top: 1rpx solid #e1e1e1;
}
.send-input {
width: 530rpx;
min-height: 65rpx;
max-height: 86rpx;
height: 65rpx;
background: #e1e1e1;
border-radius: 30rpx;
outline: none;
overflow: hidden;
padding-left: 20rpx;
margin-bottom: 24rpx;
}
.send-view {
display: inline-block;
vertical-align: top;
margin: 15rpx 15rpx 15rpx 55rpx;
}
.send-buttom {
display: inline-block;
vertical-align: top;
margin: 18rpx 22rpx 18rpx 18rpx;
}
.send-text {
font-size: 34rpx;
font-weight: 320;
color: #e1e1e1;
}
.activty {
color: #009a61;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?qb36fn');
src: url('fonts/icomoon.eot?qb36fn#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?qb36fn') format('truetype'),
url('fonts/icomoon.woff?qb36fn') format('woff'),
url('fonts/icomoon.svg?qb36fn#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.iconfont {
font-family: "icomoon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
@font-face {
font-family: 'icomoon';
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJsAA0AAAAABmQAAAIXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCXhEICoFUgS0LFAABNgIkAx4EIAWDGwdjG0IFyJ4F5Zhrihh6lhvC6tHoDxQRVGNZz+4GGCS75IEtkH8uT+XfE3gCoWPEAytkff7z9/PcJX7Q90Ga1vSjLC3XSTKa0mg00S5I5vzvn/n7UznjAWXRGMMsZLFcAP/lPICrY2EBqz0vYEHHpuUlL6AXjKpu+wZGj81wHkTEUN5EwWb0LAQ8uTFTC8/7X4/13YFGdIMkhFqhICHne0GVdD3FWdkcXy1GHc0SrbZuQJ9zXqus2ZApgQD8owj5sYMIHFAWGFSxAurVSpIw+jlXBjDSnzOVdz1VWagHEDJRTWQgEhIAICj4kRAVOFAH2kENpsE2AAUQCKnIMGpqamuiPtoZhT6kUXsQhdKuN/QDS3Tq9oOIA0RfLas8M83Hi5ZpYvwrxructWngegcUM42G+d/EQZXvgPH1gAC2boj9hFv5X9tQBHY/5PH0A7USCEJWKTidfydUF0DsBSCh8Da20k48BerUCpAAANDsEQKhRisCSY1ZBLIaGxAoahxAoEqD0whUq3EJgXr97rIodUIzhiXoxTLMYQV26FW6pXq1Zmd2rLfkZqKwsrCysoTja/eY1RLYZWDkYC6zhfdly2B0wVZ6n4GtnckwIxNIcPKsJgvSHMI2/t49ZmRgaWArszfQx+QuGAvgIQFuu1P7MLKK1c8M1wCScn8dkaTIcpSoiuqoqT46v6zHcv3EciJJUuW1hiSBDEqpAgA=) format('woff2');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cheveron-down:before {
content: "\e900";
}
.icon-cheveron-left:before {
content: "\e901";
}
.icon-cheveron-right:before {
content: "\e902";
}
.icon-cheveron-up:before {
content: "\e903";
}
.swiper {
width: 100%;
}
/* showModel自定义 start */
.goods-detail-m .mask-m {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.goods-detail-m .mask-m {
background: rgba(0, 0, 0, 0.2);
}
.goodsdetail-m {
position: fixed;
top: 380rpx;
left: 125rpx;
z-index: 4999999999;
width: 500rpx;
/* height: 190rpx; */
background: #fff;
}
.goodsdetail-m-title {
width: 420rpx;
/* height: 100rpx; *//* box-sizing: border-box; *//* border: 1rpx solid #aaa; */
padding: 30rpx 40rpx 30rpx 40rpx;
font-size: 28rpx;
color: #aaa;
text-align: center;
}
.goodsdetail-m-body {
width: 500rpx;
height: 90rpx;
display: flex;
}
.goodsdetail-m-body-left {
width: 250rpx;
box-sizing: border-box;
height: 90rpx;
line-height: 90rpx;
font-size: 30rpx;
color: #aaa;
border-top: 1rpx solid #e5e5e6;
text-align: center;
}
.goodsdetail-m-body-right {
width: 250rpx;
box-sizing: border-box;
height: 90rpx;
line-height: 90rpx;
font-size: 30rpx;
color: #3cc51f;
border-top: 1rpx solid #e5e5e6;
border-left: 1rpx solid #e5e5e6;
border-radius: 0;
text-align: center;
}
button {
background: #fff;
}
button::after {
border: none;
border-radius: 0px;
}
/* showModel自定义 end */
js界面
Page({
data: {
windowWidth: '', //可使用窗口宽度
windowHeight: '', //可使用窗口高度
authFlag: 0,
modelText: '',
isShowModel: false
},
onLoad: function(options) {
var that = this
console.log(options)
console.log(options.tempData)
//必须携带 店铺号 商品号 还可以携带分享者openid
if (options.tempData) {} else {
wx.showModal({
title: '',
content: '请正确进入!',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
wx.reLaunch({
url: '../index/index'
})
}
}
})
return false
}
var tempData = []
tempData = options.tempData.split('and')
that.setData({
stateName: tempData[0],
stateKey: tempData[1]
})
//兼容获取用户信息授权
if (that.data.stateKey == 'scope.userInfo') {
var taht = this
console.log('我是用户信息授权')
that.setData({
authFlag: 1
})
}
wx.getSystemInfo({
success: function(res) {
// console.log(res.pixelRatio) //设备像素比
// console.log(res.windowWidth) //可使用窗口宽度
// console.log(res.windowHeight) //可使用窗口高度
that.setData({
windowWidth: res.windowWidth, //可使用窗口宽度
windowHeight: res.windowHeight, //可使用窗口高度
})
console.log(that.data.windowHeight)
}
})
},
onShow: function() {
console.log('111')
},
// 权限询问
getRecordAuth: function() {
var that = this
console.log('我是授权页面')
console.log(that.data.stateName)
console.log(that.data.stateKey)
wx.getSetting({
success(res) {
if (!res.authSetting[that.data.stateKey]) {
wx.authorize({
scope: that.data.stateKey,
success() {
//成功授权 返回上个页面
console.log("授权" + that.data.stateName + '成功')
wx.navigateBack({
delta: 1,
})
},
fail() {
console.log("授权" + that.data.stateName + '失败')
//授权失败后进行提醒 并要求手动授权
// that.getAsk(that.data.stateName, that.data.stateKey)
that.setData({
modelText: '拒绝' + that.data.stateName + '授权后将会影响您的体验!是否进行手动授权!',
isShowModel: true
})
}
})
} else {
console.log("我是已经授权成功")
}
}
})
},
//拒绝授权后再次询问
// getAsk: function(stateName, stateKey) {
// var that = this
// wx.showModal({
// title: '',
// content: '拒绝' + stateName + '授权后将会影响您的体验!是否进行手动授权!',
// showCancel: true,
// success: function(res) {
// if (res.confirm) {
// //点击确认后打开手动设置页面
// wx.openSetting({
// success: (res) => {
// console.log(res.authSetting);
// // if (!res.authSetting['scope.record']) {
// if (!res.authSetting[stateKey]) {
// //未设置录音授权
// console.log("未设置录音授权");
// wx.showModal({
// title: '提示',
// content: '您未进行' + stateName + '授权,功能将无法使用。',
// showCancel: false,
// success: function(res) {},
// })
// } else {
// //第二次才成功授权 返回上个页面
// console.log("设置录音授权成功");
// wx.navigateBack({
// delta: 1,
// })
// }
// },
// fail: function() {
// console.log("打开设置页面失败");
// }
// })
// } else if (res.cancel) {
// //点击取消后
// }
// }
// })
// },
// 用户信息授权 兼容
bindgetuserinfo: function(res) {
var that = this
console.log("我是页面回调", res)
//如果授权成功则返回
if (res.detail.errMsg == 'getUserInfo:ok') {
//成功授权 返回上个页面
console.log("授权" + that.data.stateName + '成功')
wx.navigateBack({
delta: 1,
})
} else {
wx.showModal({
title: '',
content: '拒绝' + that.data.stateName + '授权后,将无法正常使用本程序。',
showCancel: false,
success: function(res) {},
})
}
},
openSetting: function() {
var that = this
//点击确认后打开手动设置页面
wx.openSetting({
success: (res) => {
console.log(res.authSetting);
// if (!res.authSetting['scope.record']) {
if (!res.authSetting[that.data.stateKey]) {
//未设置录音授权
console.log("未设置授权");
that.setData({
modelText: '',
isShowModel: false
})
wx.showModal({
title: '提示',
content: '您未进行' + that.data.stateName + '授权,功能将无法使用。',
showCancel: false,
success: function(res) {},
})
} else {
//第二次才成功授权 返回上个页面
console.log("设置录音授权成功");
wx.navigateBack({
delta: 1,
})
}
},
fail: function() {
console.log("打开设置页面失败");
}
})
},
//点击自定义showModel
cancel: function(e) {
var that = this
that.setData({
isShowModel: false
})
},
})