美文网首页
微信小程序获取openID(纯前端)

微信小程序获取openID(纯前端)

作者: 春风本是人间客 | 来源:发表于2020-06-29 16:02 被阅读0次

简介

  • 无云开发、无后台接口。
  • 使用uniapp开发,原理与原生类似。

源码

源码地址

代码

<template>
    <view class="page">
    </view>
</template>

<script>
    export default {
        data() {
            return {
                openID: '',
                userCode:'',
                token:'',
            }
        },
        onLoad() {
            this.login();
            this.getOpenid();
            this.getToken();
        },
        methods: {
            // 获取用户信息
            login(){
                uni.login({
                    provider: 'weixin',
                    success:  loginRes => {
                        console.log(loginRes.code);
                        this.userCode = loginRes.code;
                    }
                });
            },
            // 获取openID
            async getOpenid(){
                let params = {
                    appid:'wx8bda0c57123111e7',
                    secret: 'ccc431411276f087b41f680275e457a8',
                    js_code: this.userCode,
                    grant_type: 'authorization_code',
                }
                await uni.request({
                    url: 'https://api.weixin.qq.com/sns/jscode2session',
                    data: params,
                    success: (res) => {
                        console.log(res.data);
                        this.openID = res.data.openid;
                        console.log('openID:'+this.openID)
                    }
                });
            },
            // 获取token
            async getToken(){
                let params = {
                    appid:'wx8bda0c57123111e7',
                    secret: 'ccc431411276f087b41f680275e457a8',
                    grant_type: 'client_credential',
                }
                await uni.request({
                    url: 'https://api.weixin.qq.com/cgi-bin/token',
                    data: params,
                    success: (res) => {
                        this.token = res.data.access_token;
                    }
                });
            },
        },
    }
</script>

<style>
    .page{
        padding: 10rpx;
    }
    .input {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300rpx;
        margin: 50rpx 0 20rpx 0;
    }
    .line{
        display: flex;
        flex-direction: row;
    }
    .name{
        width: 150rpx;
    }
    .input-content{
        width: 100%;

    }
    .input-time{
        width: 100%;

    }
    .button{
        width: 100%;
    }
    .list{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .content{
        width: 300rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .time{
        width: 450rpx;
        color: #666;
    }
    .del{
        width: 100rpx;
        height: 100%;
        font-size: 10rpx;
        color: #f00;
    }
</style>

相关文章

网友评论

      本文标题:微信小程序获取openID(纯前端)

      本文链接:https://www.haomeiwen.com/subject/bzaofktx.html