小程序实战教程之问答红包（一）用户授权登录

本系列教程将开发一个产品-问答红包。
产品怎么玩？
初步想法是用户可以发布问题，发布问题需要支付红包，红包将由回答问题的人获取，发布问题的人会审核采纳一些人的答案，被采纳的人将随机获得发布问题的人支付的红包，就跟微信群红包一样。发布的问题可以是各种各样的，比如上联求下联，好书推荐，好吃的推荐等。当然这个产品的问题在于是不是有用户愿意付费问问题，不过等开发好了试运营一下就知道了。

今天是第一次教程，关于用户授权登录。

官方文档已经指明，getUserInfo不能直接跳出弹窗引导用户授权，需要使用<button open-type="getUserInfo"></button>，可以往我们都是希望用户进入主页时直接跳出授权窗口，接口改变后将无法实现授权弹窗自动跳出。那该怎么做呢？
我打算做一个小程序进入页面，就跟我们刚装上一个app打开后出现的几页介绍一样，做一个小程序的使用说明介绍页，在用户第一次进入时出现，之后就跳过直接进入小程序。

pages/start/start.js实现这个功能：

//获取用户信息
  getuser:function(){
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              wx.setStorageSync('nickname', res.userInfo.nickName)
              wx.setStorageSync('avatarUrl', res.userInfo.avatarUrl)
              var openid = wx.getStorageSync('openid')
              wx.request({
                url: 'https://mydomain/mycontroller/register',
                data:{
                  openid:openid,
                  nickname:res.userInfo.nickName,
                  avatarUrl:res.userInfo.avatarUrl
                },
                success:function(res){
                  wx.setStorageSync('userid', res.data.userid)
                  wx.switchTab({
                    url: '/pages/index/index',
                  })
                }
              })

            }
          })
        }else{
          wx.showToast({
            title: '应用需授权使用',
            icon: 'none'
          })
        }
      }
    })
  },

onLoad: function (options) {
    //判断是否已经授权，若已经授权则直接进入主页
    var userid = wx.getStorageSync('userid')
    if(userid){
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
},

前端，这里没有做美化：

<swiper>
  <swiper-item>
    <view>你来问我来答</view>
    <view>回答被采用即可分享红包</view>
  </swiper-item>
  <swiper-item>
    <view>我来问你来答</view>
    <view>有问题？包个红包，答案就是这么简单</view>
  </swiper-item>
</swiper>
<view style="text-align:center;"><button style="margin:0 50px" type='warn' open-type="getUserInfo" bindgetuserinfo='getuser'>立即体验</button></view>

用户点击立即体验便会跳起授权弹窗，同意便可进入应用主页

后端采用yii2 php处理

// 注册用户
    public function actionRegister()
    {
        $get = Yii::$app->request->get();
        $openid = $get['openid'];
        $nickname = $get['nickname'];
        $avatarUrl = $get['avatarUrl'];
        if (Wendauser::find()->where([
            'openid' => $openid
        ])->one()) {
            $user = Wendauser::find()->where([
                'openid' => $openid
            ])->one();
            $user->nickname = $nickname;
            $user->headimgurl = $avatarUrl;
            $user->save();
            return json_encode([
                'userid' => $user->id,
                'msg' => '用户信息更新成功！'
            ]);
        } else {
            $user = new Wendauser();
            $user->openid = $openid;
            $user->nickname = $nickname;
            $user->headimgurl = $avatarUrl;
            $user->save();
            return json_encode([
                'userid' => $user->id,
                'msg' => '用户注册成功！'
            ]);
        }
    }

用户openid在app.js中获取

onLaunch: function () {
    // 展示本地存储能力
    var openid = wx.getStorageSync('openid')
    if(!openid){
      wx.login({
        success: function (res) {
          if (res.code) {
            //发起网络请求
            wx.request({
              url: 'https://mydomain/mycontroller/openid',
              data: {
                code: res.code
              },
              success: function (res) {
                wx.setStorageSync('openid', res.data.openid)
              }
            })
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    }
   }

后端获取openid代码如下：

public function actionOpenid()
    {
        $code = Yii::$app->request->get('code');
        if ($code) {
            $appid = "YOUR APPID";
            $secret = "YOUR APPSECRET";
            $url = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            $output = curl_exec($ch);
            curl_close($ch);
            return $output;
        } else {
            return json_encode([
                'msg' => 'code not valid'
            ]);
        }
    }