vue + hbuild 微信授权登录

最新推荐文章于 2023-05-20 15:39:18 发布

LIN_Ayu

最新推荐文章于 2023-05-20 15:39:18 发布

阅读量335

点赞数

分类专栏：随手文章标签： vue

本文链接：https://blog.csdn.net/LIN_Ayu/article/details/113989489

版权

本文介绍了如何使用Vue结合HBuilder实现微信授权登录。关键步骤包括调用wxLoginFn核心方法，配置HBuilder的manifest.json文件，设置OAuth中的微信登录选项，并提供appid和appsecret。运行项目前，可参考相关文章进行详细操作。

摘要由CSDN通过智能技术生成

vue代码：

wxLoginFn是核心方法，
submitForm是自己的账号密码登录方法，可以删掉

<template>
    <div>
        <el-form ref="userForm" :model="userForm" label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="userForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('userForm')">提交</el-button>
                <el-button @click="resetForm('userForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <div align="center"><el-button type="success" @click="wxLoginFn" round>wxlogin</el-button></div><p></p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                userForm: {
                    username: 34567,
                    password: 222
                },
                userInfo: null
                // auths: [],
                // auth: null
            };

        },
        created(){