赞
踩
最近自己因为每天吃什么烦恼,动手做了一个随机吃什么的微信小程序。
小程序使用uniapp开发 配合unicloud一个人独立完成前后端开发。
使用hbuilder创建一个云开发项目
勾选启用uniCloud,这里我选择的是阿里云。
创建完成后打开项目目录,找到uniCloud右键关联云服务空间,根据提示创建并绑定。
参考https://uniapp.dcloud.io/uniCloud/concepts/space
创建完成后在项目目录的manifest.json,配置小程序后台获取的微信小程序appID。
我这里使用了 uview UI组件,根据教程安装即可(不使用可不引入)
为了方便后续请求云函数,新建了一个common目录,封装了一个cloudApi公共方法。
let token = uni.getStorageSync('token'); function call(option) { return new Promise((resolve, reject) => { if (!option.data) option.data = {}; if (token) option.data.token = token; uni.showLoading({ mask:true }); uniCloud.callFunction({ name: option.name, data: option.data, success: (res) => { uni.hideLoading(); if (res.result.code == 200) { if (res.result.data.token) { token = res.result.data.token; uni.setStorageSync('token', res.result.data.token); } if (option.success) option.success(res.result.data); resolve(res.result.data); } else if(res.result.code == 201) { uni.showToast({ icon: 'none', title: res.result.msg }) if (option.fail) option.fail(res); } else if(res.result.code == 203) { // uni.clearStorageSync(); uni.showToast({ icon: 'none', title: token?'请重新登录':'请登录' }) setTimeout(()=>{ uni.navigateTo({ url:'/pages/login/login' }) },1000) } }, fail: (err) => { uni.hideLoading(); if (option.fail) option.fail(err); reject(); }, complete: () => { uni.hideLoading(); if (option.complete) option.complete(); } }); }); } module.exports = { call: call }
在main.js中引入
获取code传给后台
wxLogin() { let _this = this; let code; uni.login({ provider: 'weixin', success: res => { code = res.code;//获取登录需要的code } }); uni.getUserProfile({ desc: '用户信息,拿来吧你!', lang: 'zh_CN', success: res => { uni.showLoading(); let data = res.userInfo;//授权拿到用户信息 data.code = code; // 调用登录云函数 _this.$cloudApi.call({ name: 'login', data, success: res => { uni.setStorageSync('userInfo', data);//拿到后台返回的用户信息 uni.reLaunch({ url:'/pages/index/index' }) } }); } }); }
云函数接收code和appId,appSecret一起使用,换取openid。
添加用户到user表。
'use strict'; const { appId, appSecret, getToken, verifyToken } = require("wx-common"); const db = uniCloud.database(); exports.main = async (event, context) => { //获取前端参数 const { code, nickName, gender, city, province, country, avatarUrl } = event; //获取openid const res = await uniCloud.httpclient.request( `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`, { dataType: "json" } ) let openid = res.data.openid; //获取user表 const collection = db.collection('user'); // 生成token let token = getToken(openid) // 新增并返回用户信息 let userData = { nickName, gender, city, province, country, avatarUrl, openid } // 往user表添加用户信息 const resData = await db.collection("user").add(userData) //将用户信息返回前端 letdata = { nickName, gender, city, province, country, avatarUrl } return { code: 200, msg: '登录成功', data: { userInfo: data, token: token } } };
这里token的生成是使用的jsonwebtoken,我是在云函数common目录下放了一个wx-common目录。
在wx-common目录下使用
npm install jsonwebtoken
安装jsonwebtokne后直接引入使用即可,,并写了一个公共js生成解析token。
const jwt = require("jsonwebtoken"); //webjsontoken //生成token function getToken(openid) { // sign(加密数据,加密辅助,过期时间(单位/s)) return jwt.sign({ openid }, appSecret, { expiresIn: 60 * 60 * 24 * 30 }); } //解密token function verifyToken(token) { return jwt.verify(token, appSecret, (err, decode) => { return decode }) } module.exports = { getToken, verifyToken }
这也是我第一次个人云开发微信小程序,有问题可以一起探讨交流,欢迎各位大佬指正,谢谢!
下面是我的小程序二维码,欢迎查看。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。