1. 首页
  2. 微信小程序

小程序用户授权登录考研打卡app小程序第二篇(微信用户授权)

安卓和小程序体验

小程序体验

小程序用户授权登录考研打卡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.....");
          }
        })
      }
    })

小程序用户授权登录考研打卡app小程序第二篇(微信用户授权)

原创文章,作者:程序员凯小白,如若转载,请注明出处:http://www.kaixiaobai.com/archives/541

发表评论

登录后才能评论

联系我们

qq

在线咨询:点击这里给我发消息

邮件:1298646637@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息