小程序作为前端必备技能,在学习过程中会需要让自己建立一个新的框架区域,让自己抛弃掉所用的技术框架:vue
、react
、angular
等。
但是目前也有许多第三方的开源框架供大家选择,比如适配react
的taro
、适配vue
的uniapp
都是基于现有的前端框架来实现跨端开发小程序的。
uniapp
作为目前算是比较完善的多端应用集成者,有着完善的开发文档,也封装了大部分小程序端的API,并且还包含了阿里云、腾讯云的UniCloud云开发
技术。
uniCloud
是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js
编程的云开发平台。
相对于专注于前端开发的人员,使用uniapp
和unicloud
来开发和入门小程序是比较不错的选择,毕竟不用自己购买服务器,也不用去找个后端开发人员做接口适配。一切需求和功能都可以自己搞定,从前端到后端,从开发到上线,甚至还能发布之后经过一段时间运营还可以开通流量主赚💰。
uniCloud
封装好的表结构。🌀 打开数据表的表结构之后,里面会有unCloud
默认生成的一部分配置,包含权限、自动生成的ID等信息。
🔆 用户信息主要是用户在微信授权
之后获取到的,比如头像
、昵称
、openId
等。
数据表结构清单可以参考uniCloud官方文档
⭐️ properties中的属性
"properties": {
"_id": {
"description": "ID,系统自动生成"
},
"nickName": {
"bsonType": "string",
"label": "昵称",
"description": "用户昵称,登录获取的"
},
"avatarUrl": {
"bsonType": "string",
"label": "头像",
"description": "用户头像图片的 URL,登录获取的"
},
"mp_wx_openid": {
"bsonType": "string",
"description": "微信小程序平台openid"
},
"register_date": {
"bsonType": "timestamp",
"description": "注册时间",
"forceDefaultValue": {
"$env": "now"
}
}
}
使用uniapp需要使用对应的编辑器 - HbuilderX
如果想用vscode直接去开发uniapp,可以参考# 这可能是最好、最详细的VSCode开发uni-app教程吧
uni-app
选项👉 项目目录下有一个uniCloud
目录,右键这个目录后选择关联云服务空间或项目
(此处需要登录uniCloud账号)
👉 勾选之前在uniCloud控制台创建的云空间
运行 - 运行到小程序模拟器 - 微信开发者工具
👉 uniCloud目录下有一个专门存放云函数的目录 - cloudfunctions
👉 cloudfunctions目录下右键选择新建云函数
👉 页面上在未登录时,会有一个登录按钮,点击登录按钮之后获取用户信息。
<template>
<view class="content">
<view class="flex padding justify-center">
<button class="cu-btn round bg-red" @click="getUserInfo">立即登录</button>
</view>
</view></template>
👉 提示用户授权
getUserInfo() { const _this = this
uni.getUserProfile({ desc: '用于完善会员资料', success: (result) => {
_this.userInfo = result.userInfo
_this.wxLogin()
}, fail: () => {
uni.hideLoading();
uni.showModal({ content: '获取用户信息失败', showCancel: false
})
}
})
},
👉 调用云函数保存用户信息
wxLogin() { const _this = this
uni.showLoading({ title: '加载中'
});
uni.login({ provider: 'weixin', success: (res) => { // 获取 code
if (res.code) {
uniCloud.callFunction({ name: 'user', data: { action: 'code2Session', js_code: res.code, user_info: _this.userInfo
}, success: (res) => { console.log('云函数返回的值::::', res.result)
uni.hideLoading(); if (res.result.result.result._id) {
uni.setStorageSync('userInfo', JSON.stringify(res.result
.result.result))
globalData.$UserInfo = res.result.result.result
}
}, fail: () => {
uni.hideLoading(); console.log('云函数调用失败')
}
})
}
}
})
}
'use strict';const mp_wx_data = { AppID: '微信小程序APPID', AppSecret: '微信小程序AppSecret'}exports.main = async (event, context) => { //event为客户端上传的参数
// console.log('event : ', JSON.stringify(event))
const db = uniCloud.database(); // 获取 `user` 集合的引用
const pro_user = db.collection('pro-user'); // 循环判断客户端传递过来的 action
// 通过 action 判断请求对象
let result = {}; switch (event.action) { // 通过 code 获取用户 session
case 'code2Session': const res_session = await uniCloud.httpclient.request( 'https://api.weixin.qq.com/sns/jscode2session', { method: 'GET', data: { appid: mp_wx_data.AppID, secret: mp_wx_data.AppSecret, js_code: event.js_code, grant_type: 'authorization_code'
}, dataType: 'json'
}
) console.log(res_session) const success = res_session.status === 200 && res_session.data && res_session.data.openid if (!success) { return { status: -2, msg: '从微信获取登录信息失败'
}
} const res_user = await pro_user.where({ mp_wx_openid: res_session.data.openid
}).get() if (res_user.data && res_user.data.length === 0) { // 没有用户信息,进入注册
const register = await uniCloud.callFunction({ name: 'user', data: { action: 'register', open_id: res_session.data.openid, user_info: event.user_info
}
}).then(res => {
result = res
})
} else { const update = await uniCloud.callFunction({ name: 'user', data: { action: 'update', open_id: res_session.data.openid, _id: res_user.data[0]._id, user_info: event.user_info
}
}).then(res => {
result = res
})
} break; case 'register': const res_reg = await pro_user.add({ nickName: event.user_info.nickName, avatarUrl: event.user_info.avatarUrl, mp_wx_openid: event.open_id, register_date: new Date().getTime()
}) if (res_reg.id) { const res_reg_val = await uniCloud.callFunction({ name: 'user', data: { action: 'getUser', open_id: event.open_id
}
}).then(res => {
result = res
})
} else {
result = { status: -1, msg: '微信登录'
}
} break; case 'update': const res_update = await pro_user.doc(event._id).update({ nickName: event.user_info.nickName, avatarUrl: event.user_info.avatarUrl, mp_wx_openid: event.open_id
}) const res_update_val = await uniCloud.callFunction({ name: 'user', data: { action: 'getUser', open_id: event.open_id
}
}).then(res => {
result = res
}) break; case 'getUser': const res_val = await pro_user.where({ mp_wx_openid: event.open_id
}).get() return res_val.data[0] break;
} return result;
};
mp_wx_data
中的值是在微信小程序后台开发管理中获取的,每个小程序的数据都是唯一的。
这一部分是用来获取到数据表的方法。
const db = uniCloud.database();const pro_user = db.collection('pro-user');
pro-user
:数据表名称云函数中分为了四个模块:(模块名称可以根据需求来自定义)
code2Session
:通过code获取用户信息,函数中调用的是微信提供的获取code的APIregister
:如果数据库中没有找到用户信息,就会执行register函数update
:如果数据库中有用户信息,可能需要更新getUser
:获取用户信息<template>
<view class="content">
<view v-if="isLogin">
<view class="cu-list menu-avatar">
<view class="cu-item">
<image class="cu-avatar round lg" :src="userInfo.avatarUrl" />
<view class="content">
<view class="text-black">蜡笔小心</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
一屋两人三餐四季
</view>
</view>
</view>
</view>
</view>
</view>
<view class="flex padding justify-center" v-else>
<button class="cu-btn round bg-red" @click="getUserInfo">立即登录</button>
</view>
</view>
</template>
微信小程序获取用户信息的云开发已完成,大家可以开脑洞去实现自己需要的小程序。