wechat.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <view>
  3. <view v-if="msg" class="error-box">
  4. {{msg}}
  5. </view>
  6. <view v-if="msg" class="order-btn" @click="goBack">返回</view>
  7. </view>
  8. </template>
  9. <script>
  10. var app = getApp();
  11. export default {
  12. data() {
  13. return {
  14. msg: ''
  15. }
  16. },
  17. onLoad() {
  18. let code = this.getUrlCode('code')
  19. if(code) {
  20. this.getOpenidAndUserinfo(code)
  21. }else{
  22. this.getCode ();
  23. }
  24. },
  25. methods: {
  26. getCode () {
  27. if(this.isWechat()) {
  28. // 截取地址中的code,如果没有code就去微信授权,如果已经获取到code了就直接把code传给后台获取openId
  29. let code = this.getUrlCode('code');
  30. let type = this.getUrlCode('type');
  31. if (code === null || code === '') {
  32. console.log('ssssssggg',code,type);
  33. window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+app.globalData.appId+'&redirect_uri=' + encodeURIComponent(app.globalData.redirectUri) + '&response_type=code&scope=snsapi_userinfo&state='+type+'#wechat_redirect'
  34. // redirect_uri是授权成功后,跳转的url地址,微信会帮我们跳转到该链接,并且通过?的形式拼接code,这里需要用encodeURIComponent对链接进行处理。
  35. // 如果配置参数一一对应,那么此时已经通过回调地址刷新页面后,你就会再地址栏中看到code了。
  36. // http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
  37. }
  38. }
  39. },
  40. getUrlCode (name) {
  41. return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
  42. },
  43. isWechat() {
  44. return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
  45. },
  46. getOpenidAndUserinfo(code) {
  47. let that = this;
  48. uni.request({
  49. url: app.globalData.serverUrl + 'Oauth/checkCode',
  50. data: {code: code},
  51. method: 'GET',
  52. header: {
  53. 'content-type': 'application/x-www-form-urlencoded'
  54. },
  55. success: function (res) {
  56. console.log('通过code获取openid和accessToken', res)
  57. if(res.data.code == 0) {
  58. var app = getApp();
  59. uni.setStorageSync(app.globalData.storagePre+'token', res.data.data.token);
  60. uni.setStorageSync(app.globalData.storagePre+'userId', res.data.data.userId);
  61. app.globalData.userinfo.token = res.data.data.token;
  62. app.globalData.userinfo.userId = res.data.data.userId;
  63. uni.reLaunch({ //关闭所有页面,跳转到闪屏页
  64. url: '/pages/index/index'
  65. })
  66. }else{
  67. that.msg = res.data.message;
  68. }
  69. },
  70. fail: function (err) {
  71. console.log(err);
  72. that.msg = '登录失败';
  73. }
  74. })
  75. },
  76. goBack(){
  77. uni.reLaunch({ //关闭所有页面,跳转到闪屏页
  78. url: '/pages/index/wechat'
  79. })
  80. }
  81. }
  82. }
  83. </script>
  84. <style lang="scss" scoped>
  85. .error-box{
  86. font-size: 40rpx;
  87. color: #333333;
  88. text-align: center;
  89. margin-top: 180rpx;
  90. margin-bottom: 80rpx;
  91. }
  92. .order-btn{
  93. width: 673rpx;
  94. height: 72rpx;
  95. border-radius: 10rpx;
  96. color: #FFFFFF;
  97. background-color: $theme-color;
  98. line-height: 72rpx;
  99. font-size: 38rpx;
  100. text-align: center;
  101. margin: 0 auto;
  102. margin-top: 40rpx;
  103. }
  104. </style>