Hbuilder打包Vue項目實現拉取微信app授權登錄


1.環境搭建

(1) Hbuilder百度搜索應用下載下來不用安裝即可使用

(2) 電腦安裝java JDK 在本地生成Hbuilder打包所需的證書文件及簽名(詳細方法請參考我另一篇文章)

(3) 微信開放平台申請的appId與AppSecret,過程略,所需簽名就是證書文件中的MD5(若出現沒有MD5的情況,證明你的JDK版本過低,我用的是1.8.0_171)

2.具體代碼實現

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>OAuth Example</title>

<script type="text/javascript">

var auths = null;

// 監聽plusready事件  

document.addEventListener("plusready", function() {

// 擴展API加載完畢,現在可以正常調用擴展API

plus.oauth.getServices(function(services) {

auths = services;

}, function(e) {

alert("獲取分享服務列表失敗:" + e.message + " - " + e.code);

});

}, false);

// 登錄操作

function authLogin() {

var s = auths[0];

if(!s.authResult) {

s.login(function(e) {

alert("登錄認證成功!");

}, function(e) {

alert("登錄認證失敗!");

});

} else {

alert("已經登錄認證!");

}

}

// 獲取登錄用戶信息操作

function authUserInfo() {

var s = auths[0];

if(!s.authResult) {

alert("未授權登錄!");

} else {

s.getUserInfo(function(e) {

alert("獲取用戶信息成功:" + JSON.stringify(s.userInfo));

}, function(e) {

alert("獲取用戶信息失敗:" + e.message + " - " + e.code);

});

}

}

</script>

</head>

<body>

<p>1.請求授權登錄認證操作<br/></p>

<button onclick="authLogin()">Login</button> 

<p>2. 獲取授權登錄用戶信息<br/></p>

<button onclick="authUserInfo()">UserInfo</button>

</body>

</html>

Vue中將script方法復制到methods中,body中代碼復制到template中即可(將plusready事件放到index.html中,先獲取擴展API)

具體實現方法根據業務要求修改

3.打包

首先將打包的dist文件夾導入

文件 -> 打開目錄 -> 完成

右鍵選中導入的文件 ,選擇轉換成移動App

這時文件夾中會生成一個manifest.json文件,即App項目配置文件

雙擊打開,點擊下方模塊權限配置,將OAuth(登錄鑒權)添加到已選模塊

重要:

點擊下方SDK配置,找到登錄鑒權微信登錄並打鈎選中,填入微信開放平台申請的appid與appsecret, ctrl + s保存

選擇上方發行 -> 雲打包-打原生安裝包

照下圖選擇:

Android包名可自己起

證書別名就是證書文件名

私鑰密碼就是生成證書文件時的秘鑰庫口令

證書文件就是yourapp.keystore的文件目錄

選擇打包

等待打包完成下載APK安裝即可

參考自:

keystore生成簽名證書:https://blog.csdn.net/liuzb1992/article/details/80192673

Google開發者證書信息有誤,請重新填寫相關信息 Android 證書文件不是有效的keystore文件Hbulider:https://blog.csdn.net/qzmrock/article/details/86595156

HBuilder微信登錄雲打包:https://jingyan.baidu.com/article/e3c78d648961303c4c85f539.html

用HBuilder打包簡單項目(vue項目)APP的步驟:https://segmentfault.com/a/1190000018420394


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM