• uniapp h5实现微信公众号登录


     官方说明文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
    下面就直接写登录过程了


     

    1. <!-- #ifdef H5 -->
    2. <tn-button @click="goToLoginH5" shape="round" backgroundColor="#FFFFFF10" fontColor="#ffffff"
    3. padding="40rpx 0" width="50%">
    4. <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
    5. <text class="">授权登录</text>
    6. </tn-button>
    7. <!-- #endif -->
    1. onLoad(options) {
    2. // #ifdef H5
    3. if (options.code == null) {
    4. } else {
    5. this.sendCode(options.code)
    6. }
    7. // #endif
    8. },
    1. goToLoginH5() {
    2. let _this = this;
    3. uni.showModal({
    4. title: '提示',
    5. content: '需要小程序授权',
    6. success: (res) => {
    7. if (res.confirm) {
    8. _this.getWeChatCode();
    9. } else if (res.cancel) {
    10. uni.showToast({
    11. title: '未授权',
    12. icon: 'none'
    13. })
    14. }
    15. }
    16. });
    17. },
    18. //请求微信接口,用来获取code
    19. getWeChatCode() {
    20. let code = this.getUrlCode('code')
    21. if (code == null) {
    22. this.getpower()
    23. } else {
    24. this.sendCode(code)
    25. }
    26. },
    27. //方法:用来提取code
    28. getUrlCode(name) {
    29. return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, '' ])[1].replace(/\+/g, '%20')) || null
    30. },
    31. getpower() {
    32. let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
    33. let appid = 'wx40ee16f1bc9eb844'
    34. window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+ local + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
    35. },
    36. sendCode(code){
    37. let _this = this;
    38. loginWxOfficial({
    39. "form": {
    40. "code": code
    41. },
    42. }).then(res => {
    43. _this.uid = res.data.userId
    44. uni.setStorageSync('token', res.data.token)
    45. _this.getUserinfo()
    46. }).catch(err=>{
    47. alert(err+'err1')
    48. })
    49. },
    50. getUserinfo() {
    51. let _this = this;
    52. userInfo().then(res => {
    53. if (res.status == 200) {
    54. _this.userInfo = res.data.userInfo
    55. uni.setStorageSync('userInfo', res.data.userInfo)
    56. }
    57. })
    58. },

  • 相关阅读:
    身份识别与鉴权技术调研方案
    RAID的基本工作模式
    Open3D (C++) 计算两点云之间的最小距离
    Android音乐播放器(三)轮播图
    leetcode 9. 回文数
    Python技法:实用运维脚本编写(进程/文件/目录操作)
    【Java基础】字节缓冲流构造方法、字节流复制视频、字符流及编码表介绍
    Mybatis的Mapper文件报错:Tag name expected
    TypeScript中把List转Map的方法选择、选错了的后果以及注意事项
    string的简单操作
  • 原文地址:https://blog.csdn.net/m0_58135258/article/details/133072028