微信小程序 获取用户信息登录（PHP）详解

发表于 | 分类于 ，

一 前端

微信小程序以数据驱动的理念以及类jsx语法的形式，以高集成高度封装的方式开辟了H5新理念。

和一般的链接带参数一样’?data=xxx&list=xxx’，参数可以在onLoad函数的回调里获得

1
2
3
onLoad:function(option){
       //console.log(option.data);
}

获取属性值

由于在小程序以数据驱动作为基本理念。我们要尽量避免去操作Dom。
组件的属性以data-param = “xxx”的形式写入，当该组件绑定了事件处理函数bindtap（不会阻止事件冒泡）或catchtap时，如bindtap = “tapName”，可以同过该函数获取该组件的一些信息，如下：

1
2
3
tapName:function(event){
     console.log(event);
}

获取到的返回值如下（部分省略）：

1
2
3
4
5
6
7
8
9
10
11
12
13
    "target": {
    "id": "cid",
    "dataset":  {
        "param":"xxx"
     }
},
    "currentTarget":  {
    "id": "cid",
    "dataset": {
        "param":"xxx"
     }
}
     ........

这里需要注意的事，当获取某个组件的属性的值的时候，请使用event.currentTarget.dataset.param。当该事件没有阻止事件冒泡的时候，target和currentTarget（相当于this）的值是不一样的。

动画

小程序在使用动画的时候：

  • 组件上写入animation属性
1
<View animation="{{move}}"></View>
  • js中创建animation实例
1
2
3
4
5
6
7
8
9
10
11
page({
    data:{
       move:''
     },createAnimation : function(){
           this.animation = wx.createAnimation({
                duration: 1000,
                timingFunction: 'linear',
        });
 }

})
  • export导出动画并传递给animation属性
1
2
3
4
5
6
7
8
creatAction:function(){
     this.createAnimation();
     this.animation.top('50rpx').left('50rpx').step();
     //step() 来表示一组动画完成
     this.setData({
         move : this.animation.export();
     })
 }

条件渲染

js中经常遇到显示隐藏等功能，这里有两种方法

  • wx:if条件渲染
    1
    <View wx:if="{{isShow}}"></View>

当isShow为ture是该View会被渲染
条件还可以if else配合使用

1
2
3
<View wx:if="{{num>1}}"></View>
<View wx:elif="{{num<1}}"></View>
<View wx:else></View>
  • hidden属性
    用法相似

如何抉择：
如果需要频繁切换的情景下，用 hidden ，反之则 用wx:if 。

二 后端（PHP）

session问题

小程序没有cookie，所以session机制也就不适用，当遇到接口需要检测登录状态时就没办法了。
解决方法：
我们可以将sessionid下发至前端，每次请求再在head中设置好sessionid，即可解决

wx.getUserInfo接口改动

不再主动呼出授权框，需要前端自己引导用户授权，按钮：

1
<button class='getinfo' open-type="getUserInfo" bindgetuserinfo="goauth_info" binderror="goauth_error">确认授权</button>

获取unionid

官方文档上说的还是比较清楚的

  • 1.调用接口wx.getUserInfo，从解密数据中获取UnionID。注意本接口需要用户授权，请开发者妥善处理用户拒绝授权后的情况。
  • 2.如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号。开发者可以直接通过wx.login获取到该用户UnionID，无须用户再次授权。
  • 3.如果开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用。开发者也可以直接通过wx.login获取到该用户UnionID，无须用户再次授权。

也就是说如果是2,3种情况，我们调用接口

1
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code='.$code.'&grant_type=authorization_code

可以直接拿到unionid

1
2
3
4
5
{
  "openid": "OPENID",
  "session_key": "SESSIONKEY",
  "unionid": "UNIONID"
}

如果是第1种情况
这我我们需要采用算法将wx.getUserInfo接口获取到的私密信息encryptedData，iv和session_key传递给后端进行解密获得unionid
PHP写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
include_once "wxBizDataCrypt.php";
$appid = 'APPID';
$sessionKey = $_SESSION["sk"];
$encryptedData = $_POST["encryptedData"];
$iv = $_POST["iv"];

$pc = new WXBizDataCrypt($appid, $sessionKey);
$errCode = $pc->decryptData($encryptedData, $iv, $data );

if($errCode == 0)
{
     echo $data;
}else{
     echo $errCode;
}

数据验证

通常我们在使用unionid在和自己的业务关联时，都会考虑有效性。但公众号的token有效性验证接口无法用于小程序
不过我们可以通过wx.getUserInfo接口获取到的参数rawData和signature传给后端，将rawData和session_key进行哈希加密，与signature进行比对来确保数据的有效性

1
2
3
4
if(hash('sha1',$rawData.$session_key) === $signature)
{
     echo  '验证通过';
}
Do the best!