wechat.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. state: 0,
  15. msg:''
  16. }
  17. },
  18. onLoad(option) {
  19. this.state = this.getUrlCode('state');
  20. let code = this.getUrlCode('code')
  21. if(code) {
  22. this.getOpenidAndUserinfo(code)
  23. }else{
  24. this.getCode ();
  25. }
  26. },
  27. methods: {
  28. getCode () {
  29. if(this.isWechat()) {
  30. // 截取地址中的code,如果没有code就去微信授权,如果已经获取到code了就直接把code传给后台获取openId
  31. let code = this.getUrlCode('code')
  32. if (code === null || code === '') {
  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='+this.state+'#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. window.location.href = app.globalData.host+'/ph/#/pages/index/index';
  67. }else{
  68. that.msg = res.data.message;
  69. }
  70. },
  71. fail: function (err) {
  72. console.log(err);
  73. that.msg = '登录失败';
  74. }
  75. })
  76. },
  77. goBack(){
  78. uni.reLaunch({ //关闭所有页面,跳转到闪屏页
  79. url: '/pages/index/wechat'
  80. })
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. .error-box{
  87. font-size: 40rpx;
  88. color: #333333;
  89. text-align: center;
  90. margin-top: 180rpx;
  91. margin-bottom: 80rpx;
  92. }
  93. .order-btn{
  94. width: 673rpx;
  95. height: 72rpx;
  96. border-radius: 10rpx;
  97. color: #FFFFFF;
  98. background-color: $theme-color;
  99. line-height: 72rpx;
  100. font-size: 38rpx;
  101. text-align: center;
  102. margin: 0 auto;
  103. margin-top: 40rpx;
  104. }
  105. </style>