Hbuilder packaged Vue project realization pull the WeChat app unauthorized access

1. environmental structures

(1) Hbuilder Baidu search applications downloaded without installation to use

(2) computer generated Hbuilder install java JDK packages required certificate file and signature of the local (detailed method see separate article I)

(3) WeChat open platform application appId and AppSecret, mentioned here, is required for signing the certificate file MD5 (MD5 if there is no case appears to prove your JDK version is too low, I use 1.8.0_171)

2. Specific code implementation

<!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(","plus readyfunction () { 

// extended API loaded, now called normally extended API 

plus.oauth.getServices ( function (Services) { 

the auths = Services; 

}, function (E) { 

Alert ( " Get sharing service list failed: "  + e.message +  " - "  + e.code); 

}); 

}, to false ); 

// login operation 

function authLogin () { 

var S = the auths [ 0 ]; 

IF ( ! s.authResult) { 

s.login ( function(E) { 

Alert ( " login authentication success! " ); 

}, function (E) { 

Alert ( " login authentication failure! " ); 

}); 

} the else { 

Alert ( " already logged certification! " ); 

} 

} 

/ / acquire user information of the operation log 

function authUserInfo () { 

var S = the auths [ 0 ]; 

IF ( ! s.authResult) { 

Alert ( " unauthorized access! " ); 

} the else { 

s.getUserInfo ( function(E) { 

Alert ( " Get User Information Success: "  + the JSON.stringify (s.userInfo)); 

}, function (E) { 

Alert ( " Get User Information Failed: "  + e.message +  " - "  + E .code); 

}); 

} 

} 

</ Script > 

</ head > 

< body > 

< P > 1. login authentication operation authorization request < br /> </ P > 

< Button the onclick = "authLogin ()" >Login</Button >  

< P > 2. Get the user login authorization information < br /> </ P > 

< Button the onclick = "authUserInfo ()" > the UserInfo </ Button > 

</ body > 

</ HTML >

Vue script will be copied to the methods of the method, the code to copy the body to the template (index.html into the plusready event, first get extended API)

The specific method to modify business requirements

3. Packaging

First, packaged dist folder into

File -> Open Directory -> Finish

Right select Import files, choose to convert mobile App

At this folder will generate a manifest.json file that App project configuration file

Double-click to open, click on the bottom module permissions configuration, OAuth (login authentication) has been added to the selected module

Click below SDK configuration, find the login authentication to log in and micro letter tick check, fill in the WeChat open platform application appid and appsecret, ctrl + s to save

Select the top issue -> Cloud Packaging - playing native installation package

FIG selected according to the next:

Android package name can be from their own

Certificate alias is the name of the certificate file

Secret key database password when the private key password is generated certificate file

Yourapp.keystore certificate file is a file directory

Select Package

等待打包完成下载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

Guess you like

Origin www.cnblogs.com/Strangers/p/11924528.html