django_weixin_app/frontend/pages/index/index.js

Component({
	data: {
		// 测试数据
		items: [{
			id: 1,
			content: '打游戏',
			checked: false
		}],
		// 输入框当前内容
		inputedValue: "",
	},
	methods: {
		// 监听多选框的状态改变事件
		checkboxChange(e) {
			// 登录后才可以修改待办事项的状态
			this.login(() => {
				this._checkboxChange(e);
			})
		},
		// 多选框状态改变实际处理函数
		_checkboxChange(e) {
			// 页面特有的数据
			// 获取本地数据的写法为this.data.xxx
			const items = JSON.parse(JSON.stringify(this.data.items));
			// checkbox的value
			const values = e.detail.value;
			// 将items和values进行对比
			// 根据values的值更新页面数据(即data.items)
			for (let i = 0, lenI = items.length; i < lenI; i++) {
				items[i].checked = false;
				for (let j = 0, lenJ = values.length; j < lenJ; j++) {
					if (items[i].id === parseInt(values[j])) {
						// 如果当前条目被选中则将items中对应的条目设置为已选中
						items[i].checked = true;
						break;
					}
				}
			}
			// 更新页面数据
			this.setData({
				items: items,
			});

			// 将items存储到缓存
			wx.setStorage({
				key: "items",
				data: items,
			})

			// 打印的内容会展现在调试器中
			// console.log(this.data.items)

			// 上传数据到后端
			this.uploadData(items);

		},
		// 监听键盘输入事件
		keyInput(e) {
			this.setData({
				inputedValue: e.detail.value
			})
		},
		// 监听按钮点击事件
		inputSubmit() {
			// 登录之后才可以添加新的待办事项
			this.login(() => {
				this._inputSubmit();
			})
		},
		// 点击提交按钮后实际执行的函数
		_inputSubmit() {
			// 读取数据
			let items = JSON.parse(JSON.stringify(this.data.items));
			// console.log("上传前: ",items);
			// 设置新条目的id
			let newId = 1;
			if (this.data.inputedValue === "") {
				console.log("待办事项不能为空!");
				return;
			}
			for (let value of items) {
				if (value.content === this.data.inputedValue) {
					console.log("该待办事件已存在!");
					return;
				}
			}
			if (items[0] !== undefined) {
				newId = items[0].id + 1; // 注意第一个item的id最大
			}
			// 将新条目更新到items中
			items.unshift({ // unshift表示将数据插到第一个位置
				id: newId,
				content: this.data.inputedValue,
				checked: false
			});
			console.log(items[0]);
			// 更新data
			this.setData({
				items: items,
				inputedValue: "", //将输入框中的值清空
			});
			// 将items本地存储
			wx.setStorage({
				key: "items",
				data: items
			});
			// items和this.data.items指向的值一模一样
			// console.log("上传后: ", items);
			// console.log("上传后：", this.data.items);
			this.uploadData(items);
		},
		// 检查token是否过期
		isTokenAvailable() {
			const now = Date.parse(new Date());
			try {
				const accessTime = wx.getStorageSync('access_time');
				// token的有效时间为5分钟
				if ((accessTime !== '') && (now - accessTime < 5 * 60 * 1000)) {
					return true;
				}
			} catch {
				// do something
			}
			return false;
		},
		// 获取token
		getToken(callback) {
			// --------------
			// 步骤一：获取code
			// --------------
			wx.login({
				success(res) {
					if (res.code) {
						// 查看code
						// console.log("code: ", res.code);
						// --------------
						// 步骤二：用code换取token
						// --------------	
						wx.request({
							url: 'http://127.0.0.1:8000/api/weixin/login/',
							method: 'POST',
							data: {
								code: res.code,
							},
							success: res => {
								// 查看是否收到token
								// console.log(res.data);
								console.log("重新获取token成功!");
								const access = res.data.access;
								// 将token保存到本地
								wx.setStorage({
									key: 'access',
									data: access,
								});
								// 保存获取token的时间
								wx.setStorage({
									key: 'access_time',
									data: Date.parse(new Date()),
								});
								// --------------
								// 步骤三：用token获取用户数据
								// --------------
								// wx.request({
								//   url: 'http://127.0.0.1:8000/api/weixin/data/',
								//   type: 'GET',
								//   header: {
								// 	  'Authorization': 'Bearer ' + access
								//   },
								//   success: res => {
								// 	  console.log(res.data);
								// 	  // 调用回调函数
								// 	  // 以便登录成功后执行后续操作
								// 	  // 因为wx.login,wx.request都是异步的,
								// 	  // 这样写才能保证callback一定晚于wx.login执行
								// 	  callback();
								//   }
								// })
								callback();
							}
						});
					} else {
						console.log("登录失败! " + res.errMsg);
					}
				}
			});
		},
		// 登录函数
		login(callback = (() => {})) {
			if (!this.isTokenAvailable()) {
				console.log("token已失效,需要重新向django请求token!");
				// 获取token并传入callback
				this.getToken(callback);
			} else {
				console.log("token有效!从缓存中直接读取!");
				// const access = wx.getStorageSync('access');
				// console.log("token: ", access);
				callback();
			}
		},
		// 将清单数据上传django
		uploadData(items) {
			const access = wx.getStorageSync('access');
			wx.request({
				url: 'http://127.0.0.1:8000/api/weixin/data/',
				method: 'POST',
				header: {
					'Authorization': 'Bearer ' + access,
				},
				data: {
					items: items,
				},
				success: res => {
					// 上传成功后打印一下
					console.log("上传成功");
					console.log(res);
				},
			})
		}
	},
	//生命周期函数
	lifetimes: {
		// 在组件实例进入页面节点树时执行
		attached() {
			// const that = this;
			// 从缓存中读取items
			wx.getStorage({
				key: 'items',
				success: res => {
					this.setData({
						items: res.data.filter(v => v.checked === false)
					})
				}
			});
			this.login(() => {
				const access = wx.getStorageSync('access');
				// 从后端获取items数据
				wx.request({
					url: 'http://127.0.0.1:8000/api/weixin/data/',
					type: 'GET',
					header: {
						'authorization': 'Bearer ' + access,
					},
					success: res => {
						console.log("读取数据成功!");
						// 只读取未完成的清单
						this.setData({
							items: res.data.items.filter(v => v.checked === false)
						})
						// console.log(this.data.items);
					}
				})
			});
		}
	}
})