说明

  这篇文章不一定涵盖了所有我碰到的问题，只有高频的问题我才会进行记录，尽量保持持续更新吧，我尽力。但是要说的是不管怎么样官方的文档都是最终解释最有效的方法，么有找到的可以尝试到官方开发文档中进行寻找。

页面顶栏设置

  在该页面的json文件中编辑属性，如下样式：

1
2
3
4
5
{
    "navigationBarTitleText":"授权登录", //顶栏标题
    "navigationBarBackgroundColor":"#fff", //顶栏背景色
    "navigationBarTextStyle":"black" //顶栏文字颜色
}

Loading时的背景颜色

  触发onPullDownRefresh事件的时候背景颜色是根据json文件中的backgroundColor参数而定的，所以只需要修改这个参数即可。

最简单的Login界面的模板代码

  下面的这个模板能实现最简单的登录功能，主页有一句提示语一个logo和一个登录按钮，若第一次进行用户授权就会弹出窗口进行确认，若之前有进行授权直接进入小程序，可以自由改动用户拒绝授权之后的提示文本，具体改动的注意细节请参考官方文档。

  • wxml代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <view wx:if="canIUse">
      <view class="center">
        <view>
          <image src="/images/logo.png" class="logo"></image>
        </view>
        <text class="words">介绍文本</text>
        <button class="button" type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">授权登录</button>
      </view>
    </view>

    <view wx:else>请升级微信版本</view>

  • wxss代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    .logo {
      border-bottom: 1px solid #ccc;
      text-align: center;
      width: 375rpx;
      height: 375rpx;
      border-radius: 50%;
    }

    .center {
      align-items: center;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background-color: #fad73f;
    }

    text {
      display: block;
      align-items: center;
    }

    .fullScreen {
      width: 100%;
      background-size: auto;
      position: fixed;
      z-index: -1;
    }

    .floatlogo {
      z-index: -1;
    }

  • js代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    Page({
      data: {
        //判断小程序的API，回调，参数，组件等是否在当前版本可用。
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        isHide: false
      },

      onLoad: function () {
        var that = this;
        // 查看是否授权
        wx.getSetting({
          success: function (res) {
            if (res.authSetting['scope.userInfo']) {
              wx.getUserInfo({
                success: function (res) {
                  // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
                  // 根据自己的需求有其他操作再补充
                  // 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取code
                  wx.login({
                    success: res => {
                      // 获取到用户的 code 之后：res.code
                      console.log("用户的code:" + res.code);
                      // 可以传给后台，再经过解析获取用户的 openid
                      // 或者可以直接使用微信的提供的接口直接获取 openid ，方法如下：
                      // wx.request({
                      //  // 自行补上自己的 APPID 和 SECRET
                        //  url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                      //  success: res => {
                      //   // 获取到用户的 openid
                      //   console.log("用户的openid:" + res.data.openid);
                      //  }
                      // });
                    }
                  });
                }
              });
            } else {
              // 用户没有授权
              // 改变 isHide 的值，显示授权页面
              that.setData({
                isHide: true
              });
            }
          }
        });
      },

      bindGetUserInfo: function (e) {
        if (e.detail.userInfo) {
          //用户按了允许授权按钮
          var that = this;
          wx.switchTab({
            url: '/pages/my/my',
          })
          // 获取到用户的信息了，打印到控制台上看下
          console.log("用户的信息如下：");
          console.log(e.detail.userInfo);
          //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
          that.setData({
            isHide: false
          });
        } else {
          //用户按了拒绝按钮
          wx.showModal({
            title: "警告",
            content: "小程序需要量身定制，请授权登录",
            showCancel: false,
            confirmText: "返回授权",
            success: function (res) {
              // 用户没有授权成功，不需要改变 isHide 的值
              if (res.confirm) {
                console.log('用户点击了“返回授权”');
              }
            }
          });
        }
      },

      onPullDownRefresh: function () {
        wx.showNavigationBarLoading()
        setTimeout(function () {
          // complete
          wx.hideNavigationBarLoading() //完成停止加载
          wx.stopPullDownRefresh() //停止下拉刷新
        }, 1500);
      }
    })

  • json代码

    1
    2
    3
    4
    5
    6
    {
      "navigationBarTitleText":"授权登录",
      "navigationBarBackgroundColor":"#fad73f",
      "enablePullDownRefresh": true,
      "backgroundColor": "#fad73f"
    }

这样就可以实现最简单的登录功能，有需要的可以酌情添加。

未完待续