zoukankan      html  css  js  c++  java
  • 微信小程序

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

    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 =信息提供的接口..

  • 相关阅读:
    [转帖]能感动天地的老人,你拿什么来感动CCTV
    SaaS, 8,9点的太阳
    ERP软件开源是中国软件行业未来之路
    觉得为时已晚的时候,恰恰是最早的时候。
    新画皮故事——ERP软件为什么要免费
    如何定制SharePoint“欢迎”菜单?
    软件产品在什么情况下一定要走精品路线
    我的blogs
    测试环境中安装sharepoint server 2010过程中出现的一些问题及解决过程
    windows server 2008 与windows server 2008 r2区别
  • 原文地址:https://www.cnblogs.com/dibinbin/p/9413647.html
Copyright © 2011-2022 走看看