uniapp+node.js(express框架)获取微信小程序的openid

简介: uniapp+node.js(express框架)获取微信小程序的openid

前端代码:

<template>
        <view class='other'>
            <view class='other-item' @tap='loginOther()'>
                <button>微信登录</button>
                <view></view>
            </view>
        </view>
</template>
<script>
  // 这里是引入请求本地的ip地址
import $http from '@/common/api/request.js'
export default{
    methods:{
        loginOther(){
            uni.login({
                success:(res)=>{
          let code=res.code;
          $http.request({
              url:"/login",
              method:"POST",
              data:{
                code
              },
          }).then((res)=>{
              console.log(res)
          }).catch(()=>{
              uni.showToast({
                  title:'请求失败',
                  icon:'none'
              })
          })
                }
            })
        }
    }
}
</script>
<style scoped>
</style>
请求代码(request.js):
export default{
    common:{//默认数据格式
        baseUrl:"http://本地ip地址或者你的服务器ip地址或者你服务器的域名:3000/api",
        data:{},
        header:{
            "Content-Type":"application/json",
            "Content-Type":"application/x-www-form-urlencoded"
        },
        method:"GET",
        dataType:"json"
    },
    request( options={} ){//options是默认值
        //这里是进行设置加载中给数据进行缓存一下
        uni.showLoading({
            title: '加载中'
        });
        options.url = this.common.baseUrl + options.url;
        options.data =     options.data || this.common.data;
        options.method = options.method || this.common.method;
        options.dataType =     options.dataType || this.common.dataType;
    return new Promise((res,rej)=>{
            uni.request({
                ...options,
                success: (result) => {
                    if(result.statusCode != 200){//处理其他接口没有数据而出现404报错的问题
                        return rej();
                    }
                    setTimeout(function () {
                        uni.hideLoading();
                    }, 0);//这是设置加载数据的显示时间
                    let data = result.data.data;
                    res(data);
                }
            })
        })
    }
}
后端node.js代码(express框架)
var express = require('express');
var router = express.Router();
//要记得下载这个包,npm install request
const request = require('request')
router.post('/api/login', function(req, res, next) {
  let code=req.body.code;//登陆传过来的code
 let appid = "自己的"; //自己小程序后台管理的appid,可登录小程序后台查看
 let mysecret = "自己的"; //小程序后台管理的secret,可登录小程序后台查看
 let grant_type = "authorization_code"; // 授权(必填)默认值
 //拼接出请求微信服务器的url地址然后请求oppenid和session_key
  let url ='https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + mysecret + '&js_code=' + code + '&grant_type=authorization_code';
      request(url,(error, response, body)=>{
        //JSON.parse()方法将JSON格式字符串转换为js对象
        let parsData = JSON.parse(body.toString());
        let openid=parsData.openid;
        let session_key=parsData.session_key;
        //返回前端是下面这个被注释的
        // res.send({
        //   data:parsData
        // })    
         })
})

module.exports = router;

这样子是可以完全请求出微信小程序的openid,目前我这样子做是有效的


相关文章
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5338 1
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
548 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
1037 0
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
5536 3
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
1111 2
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
1973 0
微信H5支付--微信JS-SDK支付--点金计划
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
464 0
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
1576 0