uni-app捐步功能

个人捐步

获取个人微信步数:

1.首先需要wx.login获取到登录凭证---code

 wx.login({
  success (res) {
	console.log(res.code);
  }})

2.在成功获取code之后,在回调函数success,向微信接口服务器发送请求，获取用户的session_key

微信请求接口为:

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

参数解释:

appid:为小程序的appId
secret:为小程序的appSecret
js_code:为登录时获取的code,也就是上面第一步获取到的code
grant_type:为授权类型,此处只需填写authorization_code 注: 对于appId和appSecret的获取登录微信公众号平台找寻对应该开发小程序的id和密码

主要代码为:

wx.login({
	success: (res) => {
	var appid = "wx.....1";
	var secret = "fjjo8b...1d95";
	if (res.code) {							
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + res.code + '&grant_type=authorization_code',
            header: {'content-type': 'json'},
            success: (res) => {
                var session_key = res.data.session_key;
            }
      	})
   	}
   }
  })

3.获取到session_key的同时，调用wx.getWeRunData接口，得到数据如下：其中encryptedData即包含了用户过去三十天的微信运动步数，但是它是被加密了的，所以需要进行解密

主要代码操作：

wx.getWeRunData({
  success (res) {
    // 拿 encryptedData 到开发者后台解密开放数据
var encryptedData = res.encryptedData;
//iv可以用来解密
var iv = res.iv;
  }})

4.对获取到的encryptedData进行解密-(解密需要用到appid,session_key还有iv,这也便说明了为啥要进行登录的原因)

主要采取方法：1.为向后端发起请求让后端进行解密 2.前端利用js进行解密

这里采用第二种方法

首先：

下载对应解密js包 --下载地址如下： codeload.github.com/gwjjeff/cry…

然后：

在小程序项目中创建utils文件夹将上面下载包含js的文件放入utils文件夹下

再然后：

封装解密方法如下：

随之：

调用方法(注意需要先引入方法)

var WXBizDataCrypt = require("util/RdWXBizDataCrypt.js");
wx.getWeRunData({
	success: (res) => {
		var encryptedData = res.encryptedData;
		var iv = res.iv;
		var pc = new WXBizDataCrypt(appid, session_key);
		var data = pc.decryptData(encryptedData, iv);
		//得到今天所走的步数	
		this.steps = data.stepInfoList.pop().step;
	}	
})

5.额外补充一下权限问题

对于微信小程序的步数获取,是需要权限的,所以当要获取用户步数之前,先要判断用户是否开启了权限,则主要步骤如下 a.使用uni.getSetting()方法方法介绍(cope文档)

主要是在success回调函数里获取到res.authSetting对象,然后判断该对象的scope.werun是否存在,存在表示权限开了,没有表示没有开启

b.若没有开启,则使用uni.authorize()方法来开启权限,uni.authorize方法介绍:

填写要开启的权限对应的scope值,开启成功调用success方法,失败调用fail方法,若还需要开启,则在fail方法里调用uni.openSetting方法,跳转到系统的权限页面进行配置

c.整体代码如下:

uni.getSetting({
  success:(res)=>{
  console.log(res);
  if (res.authSetting['scope.werun']) {
   console.log('已授权获取微信步数')
   uni.getWeRunData({
    success: (res) => {
        var encryptedData = res.encryptedData;
        var iv = res.iv;
        var pc = new WXBizDataCrypt(appid, session_key);
        var data = pc.decryptData(encryptedData, iv);
        //处理data 得到当天的步数
        console.log("步数", data);
        this.steps = data.stepInfoList.pop().step;
        uni.showModal({
            title: '提示',
            content: `您当前的步数为:${this.steps},请问确认完全捐出所走步数吗`,
            success: (res) => {
                res.confirm ? console.log('用户点击了确认捐步按钮') : console.log('用户点击了取消捐步按钮')
                if(res.confirm) {
                    this.donateSteps();
                }
            }
        })
    }
   })
  }else{
  uni.authorize({
    scope: 'scope.werun',
    success:()=>{
      console.log("授权成功")
    },
    fail:()=>{
      uni.showModal({
        title: '提示',
        content: '获取微信运动步数，需要开启计步权限',
        success: function (res) {
          if (res.confirm) {
            //跳转去设置
            uni.openSetting({
              success: function (res) {

              }
            })
          } else {
            //不设置
          }
    }
    })
    }
  })
  }

  }
  })
			},

简单来说:

主要方法调用为->uni.getSetting(得到scope[werun])->uni.authorize(弹窗授权)->uni.openSetting(跳转权限页面授权)

总结: 主要步骤就是

1.login获取code
2.利用code,appid,secret向微信服务器发请求获取session_key
3.利用getWeRunData获取加密的步数数据encryptedData和iv
4.然后提供iv,session_key,appid给解密方法进行解密,获得解密后的步数

组队捐步

1.首先发起组队捐步时,便获取发起者的个人信息

主要方式是: 给触发按钮添加open-type=”getUserInfo”属性同时绑定getuserinfo事件

<button class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo"></button>

事件处理器中获取对应的发起者信息:

getUserInfo(res) {
	console.log(res.detail.userInfo);
}

2.再获取个人信息的同时,向后端发起请求,保存该队伍的相关信息

3.跳转到组队界面

4.首先讲述一下分享按钮邀请好友方法:

onShareAppMessage(res) {
	if (res.from === "button") {
		console.log("点击了分享");
	}
	return {
		title: "自定义分享标题",
		content: "我是分享的内容",
		desc: "我是分享描述",
path:"/pages/teammate/teammate?scene=2&initiator="+this.teamId
	}
}

注意:

这里设置了path对应的页面就是当前界面,所携带的参数scene和initiator主要是用来判断进入该界面的是不是被邀请者
onShareAppMessage分享return的对象里面已经没有success和fail的回调函数了，写了也不会执行，可以去看一下微信社区就知道了。

5.讲述onLoad方法在该界面onLoad方法里,先判断是不是被邀请者这里主要采取onLoad的参数的scene是否等于2来判断

	onLoad(options) {
		if (options.scene === 2) { //如果为2表示是被邀请者
		}
	}

倘若是被邀请者,则同样需要获取登录权限--得到openid还要得到个人信息则需则次进行login和getuserinfo的操作

同时,得到对应被邀请者数据之后,利用openid和参数传递过来的teamId向后端发送请求,判断该被邀请者是否是已经是该队伍中的成员,若是,则直接进行查询该队的所有成员,显示在界面上,若不是,则添加到数据库中,再查询添加后的队伍的所有成员,显示在界面上

完结撒花~~~

参考链接:

blog.csdn.net/llayjun/art… www.jb51.net/article/119… www.cnblogs.com/cai-rd/p/68…