首先,需要到微信開放平臺創建移動應用,獲取appid、appsecret;
其次appid、appsecret值填寫在manifest.json中的'SDK配置'中; '模塊權限配置'中選擇OAuth(登錄鑑權); 在登錄頁,添加如下代碼,獲取微信用戶信息openid和access_token:
html:
<div id="wx_login" style="display: none">
<div class="other">
<div class="xian"></div>
<div class="say">或用微信登錄</div>
<div class="xian"></div>
</div>
<div class="icon">
<img src="./images/log_wei.png" id="wx_loginimg" onclick="wx()">
</div>
<p id="info" style="padding: 0 1em;text-align:left;display: none">登錄認證通道信息:</p>
<br/>
<div id="oauth" style="display: none"></div>
<br/>
<div id="output" style="display: none;">
</div>
</div>
js:
if(mui.os.plus){
var access_token = '';
var openid = '';
document.addEventListener('plusready', function() {
plus.runtime.getProperty(plus.runtime.appid,function(inf){
if(inf.version > 1.0){ //檢測版本號
if (plus.runtime.isApplicationExist({pname: 'com.tencent.mm', action: 'weixin://'})) { //檢測是否有微信客戶端
document.getElementById('wx_login').style.display = 'block';
}
}
});
});
var auths={};
function wx() {
// 獲取登錄認證通道
plus.oauth.getServices(function(services){
// var txt="圖標登錄認證通道信息:";
for(var i in services){
var service=services[i];
if(service.description == '微信'){
auths[service.id]=service;
var de = document.getElementById('wx_loginimg');
de.setAttribute('onclick','login(this.id)');
de.id=service.id;
}
}
// info.innerText=txt;
},function(e){
outLine("獲取登錄認證失敗:"+e.message);
});
}
// 登錄認證
function login(id){
outSet("----- 登錄認證 -----");
var auth=auths[id];
if(auth){
var w=null;
if(plus.os.name=="Android"){
w=plus.nativeUI.showWaiting();
}
document.addEventListener("pause",function(){
setTimeout(function(){
w&&w.close();w=null;
},2000);
}, false );
auth.login(function(){
w&&w.close();w=null;
outLine("登錄認證成功:");
outLine(JSON.stringify(auth.authResult));
access_token = auth.authResult.access_token;
userinfo(auth);
},function(e){
w&&w.close();w=null;
outLine("登錄認證失敗:");
outLine("["+e.code+"]:"+e.message);
mui.toast('登錄失敗');
// plus.nativeUI.alert("詳情錯誤信息請參考授權登錄(OAuth)規範文檔:http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登錄失敗["+e.code+"]:"+e.message);
});
}else{
outLine("無效的登錄認證通道!");
mui.toast('無效的登錄認證通道');
}
}
// 獲取用戶信息
function userinfo(a){
outLine("----- 獲取用戶信息 -----");
a.getUserInfo(function(){
outLine("獲取用戶信息成功:");
outLine(JSON.stringify(a.userInfo));
var nickname=a.userInfo.nickname||a.userInfo.name||a.userInfo.miliaoNick;
openid = a.userInfo.openid;
wx_login(access_token,openid);
},function(e){
outLine("獲取用戶信息失敗:");
outLine("["+e.code+"]:"+e.message);
mui.toast('獲取用戶信息失敗!');
});
}
function wx_login(access_token,openid) {
//接口名根據具體方法名定
mui.ajax(apiname + '/app/app_wx_login', {
data:{
access_token:access_token,
openid:openid
},
dataType: 'json', //服務器返回json格式數據
type: 'post', //HTTP請求類型
timeout: 10000, //超時時間設置爲10秒;
success: function(data) {
if(data['token']){
localStorage.removeItem('token');
localStorage.clear(); //清除localstorage
//獲取鍵的值
localStorage.setItem("token", data['token']);
if(go){
window.location.href = go;
}else{
mui.openWindow({
url: 'user.html',
id:'user.html'
});
}
}
},
error: function(xhr, type, errorThrown) {
//異常處理;
var s = JSON.parse(xhr['response']);
mui.toast(s['message']);
}
});
}
}