vue+hbuiler app项目实现微信授权登录

**

注：目前已经停止使用hbuilder 转战uniapp 此方法是否失效未知

**

公司项目是个vue构建的webapp项目 有个提现功能 需要获得微信的openid

前提：获得微信开放平台一系列appid appsecret 具体不赘述 下面是代码

新建wxlogin.js文件（名字随意）

var auths=null;

function authLogin(){
    var s = auths[0];
    if ( !s.authResult ) {
        s.login( function(e){
            // 获取登录操作结果
            var result = e.target.authResult;
            alert( "登录认证成功："+JSON.stringify(result) );
            authUserInfo()
        }, function(e){
            alert("登录认证失败！");
        }, {} );
    }
}

function authUserInfo(){
    var s = auths[0];
    if ( !s.authResult ) {
        alert("未登录授权！");
    } else {
        s.getUserInfo( function(e){
            alert( "获取用户信息成功："+JSON.stringify(s.userInfo) );

            //拿到用户信息，进行相关处理，ajax传用户数据到服务器等
            var prame = JSON.stringify(s.userInfo);

        }, function(e){
            alert( "获取用户信息失败："+e.message+" - "+e.code );
        } );
    }
}

function authLogout(){
    for ( var i in auths ) {
        var s = auths[i];
        if ( s.authResult ) {
            s.logout(function(e){
                alert( "注销登录认证成功！" );
            }, function(e){
                alert( "注销登录认证失败！" );
            });
        }
    }
}


function wxlog(){
   

    plus.oauth.getServices( function(services){
        auths = services;
        authLogin();
    }, function(e){
        alert("获取分享服务列表失败："+e.message+" - "+e.code);
    } );

} export default{
    wxlog //该步骤重要
  }

main.js引入

import utils from'./assets/js/wxlogin.js';  // 引入刚才新建的js文件
Vue.prototype.$utils=utils

业务页面xxx.vue页面使用

<template>
    <div class="out">
         <div class="submit" @click="$utils.wxlog()">wx登录  // 点击按钮即可唤起微信授权页面
        </div>
    </div>
</template>

打包后使用hbuilder真机运行即可看到效果 需要打包发布的话 配置里必须勾选微信登录并且填写appid和appsecret 并且应用包名要和申请微信开放平台时的包名保持一致
点击按钮后即可拿到具体的openid之类的参数
后续使用自己随机应变即可