微信小程序

最近刚接手的项目是我以前么有接触过的技术点--微信小程序,期初心理慌得一逼,不过在接手后感觉也就如此,非常容易上手,也许是刚开始=接触到的比较基础吧,在这里简单的简述一下登录流程:

1.当用户打开小程序时访问第一个页面时,先通过 wx.login,获取用户 openID 。这时无需弹框授权,开发者拿到 openID 可以建立自身的帐号 ID。

2在第一步中,拿到 openID 后,判断是新用户还是老用户。如果是老用户,可以直接登录;如果是新用户,可先在小程序首页展示你的信息服务,让用户对这个小程序有大概的了解,再引导用户进行下一步的操作。

3当需要获取用户头像昵称的时候,对用户展示一个登录页面,这个页面只有一个最重要的操作,引导用户进行登录。

小程序中,在页面中加入一个 button 按钮,并将 open-type 属性设置为 getUserInfo 。

以小程序为例:

对于功能较简单的小程序或者小游戏而言,如果不是必须要获得用户的头像昵称,建议可先通过wx.login 拿到 openID 后,使用 open-data 方式或者开放数据域的方式展示用户信息,整个过程都无需用户授权。

Tips:

1、在用户登录后,开发者需要存储用户的 unionID,而且建议只把 unionID 作为互通的用户标识,不要直接使用 unionID 作为用户 ID。因为一旦小程序迁移到其他的开放平台下,unionID 是会改变的,而 openID 是不变的。

2、用 button 组件的方式获得用户授权后,调用 wx.getUserInfo 就可以直接获取用户信息。这个的意义在于获取过一次之后,用户有可能改昵称头像,因此为了及时同步,最好是定期获取用户信息。

这里两个小提示:

▷ 定期使用 wx.getUserInfo 获取并更新用户的信息;

▷ 如果用户授权过一次之后,又在设置中关掉了授权(或者本地删除了小程序),那这时再调用 wx.getUserInfo 也是不会成功的,需要重新获得授权。

 // 获取微信openId
  getOpenId: function () {
    var _this = this;
    return new Promise(function (resolve, reject) {
      wx.login({
        success: function (res) {
          var params = { code: res.code};
          _this.request(util.urls.api_wx_openid, params)
            .then(function (res) {
              var data = res.data;
              if (data != null && data != '' && data != undefined){
                if (data.success) {
                  var wxInfo = JSON.parse(data.body);
                  wx.setStorageSync('openId', wxInfo.openid);
                  resolve(res);
                } else {
                  console.log("wx get openId error:" + res);
                  resolve(res);
                }
              } else {
                resolve(res);
              } 
            });
        },
        fail: function (res) {
          console.log("wx login error:"+ res);
          resolve(res);
          
        }
      });
    });
  },

// 公共请求函数
request: function (url, data, method) {
var _this = this;
return new Promise(function (resolve, reject) {
// 补充url
url = util.baseurl + url;
// 补充data
if (data == null || data == '' || data == undefined) {
data = {};
}
try {
data.managerid = wx.getStorageSync('managerid');
data.managertype = wx.getStorageSync('managertype');
data.areaId = wx.getStorageSync('areaId');
data.token = wx.getStorageSync('token');
data.sessionId = wx.getStorageSync('sessionId');
} catch (e) {
console.log("get web storageSync error");
}
// 调用微信基本请求接口
wx.request({
url: url,
data: data,
method: method,
header: {
'Content-Type': (method == 'GET') ? 'application/json' : 'application/x-www-form-urlencoded',
'Cookie': data.sessionId,
'token': wx.getStorageSync('token')
},
success: function (res) {
var statusCode = (res.data.statusCode == null || res.data.statusCode == undefined) ? '' : res.data.statusCode;
// 4xx或5xx系列过滤
if (statusCode.indexOf(4) >= 0 || statusCode.indexOf(5) >= 0){
resolve(res);
} else {
if (!res.data.success) {
// token不存在 | 超时
if (res.data.code == '1' || res.data.code == '2') {
wx.removeStorageSync('token');
wx.redirectTo({
url: '../login/login'
});
resolve(res);
} else {
resolve(res);
}
} else {
resolve(res);
}
}
},
fail: function (res) {
console.log(res)
resolve(res);
}
});
});
},

后续接口调用都会验证已认证信息,

后台我们使用java开发的相关接口,通过
wx_app_id =..........................................

u5c0fu7a0bu5e8fu5bc6u94a5

wx_app_secret =.................................

u83b7u53d6openIdu7684Url

wx_open_id_url =信息提供的接口..

原文地址:https://www.cnblogs.com/dibinbin/p/9413647.html