uni-app利用uniCloud获取微信步数并将数据写入数据库

uni-app利用uniCloud获取微信步数并将数据写入数据库

本项目依赖了uni-id

只是毕业设计,想法不完善,没有对用户授权失败做处理,如果编写的时候需要注意

第一步:调用wx.login()接口

拿到登录态的code ,传送给云端,获取uid,便于之后写入数据库

第二步:云端

调用uniID.loginByWeixin()接口,获取到用户的信息

第三步:客户端

拿到Uid,token,token的过期时间,并持久化保存

第四步:客户端

调用wx.getWeRunData(),拿到加密数据

第五步:云端(使用的Node.js)

  1. 此处 下载示例代码,将其放至云端
  2. 在入口函数引入
  3. 编写代码

第六步:入库

如果能够查询到doc_id,则覆写,如果查询不到,则新增。

完整代码

样式,获取用户信息的按钮

<view class="container"><button type="default" open-type="getUserInfo" @getuserinfo="userinfo">登录</button></view>

客户端

uni.login({
  //step 1
  provider: "weixin",
  success: (res) => {
    const code = res.code;
    // 换取登录态信息
    uniCloud.callFunction({
      name: "login_wx",
      data: {
        code,
        typea: "werun",
      },
      success: (result) => {
        console.log(result);
        //step 3
        const uid = result.result.uid;
        const sessionKey = result.result.sessionKey;
        uni.setStorageSync("uni_id_token", result.result.token);
        uni.setStorageSync(
          "uni_id_token_expired",
          result.result.tokenExpired
        );

        //step 4
        wx.getWeRunData({
          success: (werunData) => {
            werunData.sessionKey = sessionKey;
            werunData.user_id = uid;
            console.log(werunData);
            uniCloud.callFunction({
              name: "decrypt_werun_data",
              data: {
                werunData,
              },
              success(db_write_result) {
                debugger;
                console.log("=================读写数据库======");
                console.log(db_write_result);
                console.log("=================读写数据库完======");
              },
            });
          },
        });
      },
    });
  },
});

云端

// step 5.2
const WXBizDataCrypt = require("./WXBizDataCrypt.js");
const db = uniCloud.database();

exports.main = async (event, context) => {
	//event为客户端上传的参数
	// return event
  const appID = "your appID";
  // step 4
	const {
		sessionKey,
		encryptedData,
		iv
	} = event.werunData;
	const pc = new WXBizDataCrypt(appID, sessionKey);
	const data = pc.decryptData(encryptedData, iv);
	// return data;
	// return event.werunData.user_id;

  /**
   * @description step 6
  */
	const collection = db.collection('werun');
	// 利用Uid查询文档id
	let search_docid_result = await collection.field({
		"_id": true
	}).where({
		"user_id": event.werunData.user_id
	}).get();

	// 数据库中没有该记录,添加
	if (search_docid_result.data.length === 0) {
		let add_data_result = await collection.add({
			last_modified_time: data.watermark.timestamp,
			sports_details: data.stepInfoList,
			user_id: event.werunData.user_id
		});
		add_data_result.type = "add";
		// 出口1
		return add_data_result;
	}

	// 数据库有该记录,覆写
	search_docid_result = search_docid_result.data[0]._id;
	// return search_docid_result;
	let update_data_result = await collection.doc(search_docid_result).set({
		last_modified_time: data.watermark.timestamp,
		sports_details: data.stepInfoList,
		user_id: event.werunData.user_id

	});
	update_data_result.type = "rewrite";
	// 返回数据给客户端

	// 出口2
	return update_data_result;
};
### 实现 Uni-app 微信小程序中的折线图 为了在 Uni-app 中实现微信小程序的折线图功能,可以选择多种方法。考虑到 ECharts 的强大可视化能力和灵活性,在此提供基于 ECharts 组件的方法。 #### 下载安装 ECharts 和 mpvue-echarts 首先需要初始化项目环境,引入必要的依赖包: ```bash npm init -y npm install echarts mpvue-echarts --save ``` 完成上述操作后,需将 `node_modules/mpvue-echarts` 文件夹内的资源复制到项目的合适位置以便后续引用[^2]。 #### 创建自定义组件用于显示图表 创建一个新的 Vue 组件来封装 ECharts 图表逻辑,比如命名为 `LineChart.vue`: ```html <template> <div ref="chartContainer" :style="{ width: '100%', height: '300px' }"></div> </template> <script> import * as echarts from 'echarts'; export default { props: ['options'], mounted() { this.initChart(); }, methods: { initChart() { const chartInstance = echarts.init(this.$refs.chartContainer); chartInstance.setOption(this.options || {}); window.addEventListener('resize', () => { chartInstance.resize(); }); } }, watch: { options(newValue) { this.initChart(); } } } </script> ``` 这段代码展示了如何通过 JavaScript 初始化 ECharts 将其绑定至指定 DOM 节点上;同时监听选项变化以更新图表展示[^1]。 #### 使用新创建的折线图组件 最后一步是在页面中使用这个新的折线图组件。假设有一个名为 `IndexPage.vue` 的页面文件,则可以在其中这样写入: ```html <template> <view class="container"> <!-- 引入刚才制作好的 LineChart --> <line-chart :options="lineOptions"/> </view> </template> <script> // 导入刚刚创建的折线图组件 import LineChart from '@/components/LineChart.vue' export default { components: { LineChart, }, data(){ return{ lineOptions:{ xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, yAxis: { type: 'value' }, series: [{ name:'销量', type:'line', smooth:true, data:[120, 132, 101, 134, 90, 230], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }] } }; } }; </script> ``` 以上就是利用 ECharts 在 Uni-app 微信小程序内构建简单折线图的过程概述。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值