考研打卡app小程序第二篇（微信用户授权）

安卓和小程序体验

小程序体验

安卓版本体验 安卓体验

一.小程序结构

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

二.开发过程

1.tabbar页面创建注册

tabbar页面就是我们小程序下方导航栏所对应的页面。

创建页面之后，app.json界面会自动在“page”中注册。但是tabbar还需要自己去设计。可以设置未点击和已点击的图标以及字体。

"tabBar": {
    "color": "#C0C4CC",//未点击字体颜色
    "selectedColor": "#FF7F00",//点击后字体颜色
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",//导航对应的页面
        "iconPath": "images/tabbar/daka.png",//未点击时显示的图标
        "selectedIconPath": "images/tabbar/daka_point.png",//点击时显示的图标
        "text": "打卡"//导航栏文字
      },
      {
        "pagePath": "pages/faxian/faxian",
        "iconPath": "images/tabbar/faxian.png",
        "selectedIconPath": "images/tabbar/faxian_point.png",
        "text": "发现"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "images/tabbar/wo.png",
        "selectedIconPath": "images/tabbar/wo_point.png",
        "text": "我的"
      }
    ]
  },

2.单独页面设计

如果不想要微信自带的顶部导航栏的样式，可以设置取消顶部导航栏。

方法：

{
  "navigationStyle": "custom",//设置取消原生导航栏
}

下拉刷新的开启，有时候需要下拉页面刷新当前页面的数据。开启方法：

{
  "enablePullDownRefresh": true,//刷新页面数据
  "backgroundTextStyle": "dark",//设置刷新加载的颜色
  "usingComponents": {
  }
}

3.刘海屏适配

因为我自己是刘海屏，其他像是水滴屏如果不进行刘海屏适配而又去掉了原生顶部栏。那样会出现组件被遮拦的情况。

解决方法

wx.getSystemInfo({
  success: e => {
     t.TopBar = e.statusBarHeight; //状态栏高度
  }
})
将获取到的顶部栏的值在页面上固定到顶部即可解决问题

进入正题

三.用户信息获取

授权获取用户信息，这个是用户授权获取用户的头像昵称等相关信息

 wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              console.log(res.userInfo)
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })

用户信息仅作为展示作用，重要的是解析用户的openid，这个是用户个人id的凭证。

wx.login({
      success: res => {
        var that=this
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        wx.request({
          url: 'url',//后台链接地址
          data: {
            code: res.code
          },
          method: 'POST',
          header: {
            //'content-type': 'application/json' // 默认值
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {
            console.log('appjs获取openid')
            console.log(res.data);
            that.globalData.openid = res.data
          },
          fail: function (res) {
            console.log(".....fail.....");
          }
        })
      }
    })

到此就完成了微信用户的授权