现如今微信的授权功能必须使用内置的button按钮才可以完成,这就出现了组件button的默认样式去除问题,下面拿授权手机号示例:
<button hover-class="none" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
在style标签中添加去除button默认样式的代码:
button::after{
border: none;
background-color: none;
}
注意:button前面一定不要有(.),如下图:
既然来了,就顺便贴一下获取手机号的方式吧(uniapp中)
- 前端:
//获取手机号
getPhoneNumber(e){
if(e.detail.errMsg==='getPhoneNumber:ok'){
uni.login({
provider:'weixin',
success:res=> {
let url = 'vuser/updateMobile'
let data = {}
data.code = res.code
data.encryptedData = e.detail.encryptedData
data.iv = e.detail.iv
let options = {}
options.token = true
this.$http.post(url,data,options).then(res1=>{
if(res1.code===0){
console.log(res1.data)
}
})
}
})
}else{
uni.showToast({title:"取消授权",icon:"none"})
}
}
- 服务器端
//获取sessionKey
public static Map<String,String> getSessionKeyAndOpenid(String wxCode){
String getSession = "https://api.weixin.qq.com/sns/jscode2session?"+"appid="+APPID+"&secret="+APPSECRET+"&js_code="+wxCode+"&grant_type=authorization_code";
String jsonStr = HttpRequest.get(getSession).header("Content-type","application/json").execute().body();
JSONObject jsonObject = JSONUtil.parseObj(jsonStr);
try {
String sessionKey = jsonObject.get("session_key").toString();
String openid = jsonObject.get("openid").toString();
Map<String,String> map = new HashMap<>(16);
map.put("sessionKey",sessionKey);
map.put("openid",openid);
return map;
}catch (Exception e){
e.printStackTrace();
}
return null;
}
//解密手机号
public static String getPhone(String sessionKey,String encryptedData,String iv){
//解密
byte[] encrypData = Base64Utils.decodeFromString(encryptedData);
byte[] ivData = Base64Utils.decodeFromString(iv);
byte[] sessionKeyData = Base64Utils.decodeFromString(sessionKey);
AlgorithmParameterSpec ivSpec = new IvParameterSpec(ivData);
try {
Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
SecretKeySpec keySpec = new SecretKeySpec(sessionKeyData, "AES");
cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec); //设置为解密模式
String jsonStr = new String(cipher.doFinal(encrypData), StandardCharsets.UTF_8);
JSONObject jsonObject = JSONUtil.parseObj(jsonStr);
return jsonObject.get("phoneNumber").toString();
} catch (NoSuchAlgorithmException
| BadPaddingException
| InvalidKeyException
| InvalidAlgorithmParameterException
| NoSuchPaddingException
| IllegalBlockSizeException e) {
e.printStackTrace();
}
return null;
}