项目简介
本项目是基于uniapp跨平台框架开发的云服务管理系统。uniapp支持使用Vue.js开发所有前端应用,能实现iOS、Android等多平台运行。借助uniCloud云服务,可轻松完成数据的云端储存与处理,为开发者提供一体化开发解决方案。
项目的主要特性和功能
- 多平台支持:采用uniapp框架,支持多平台运行。
- 云服务集成:集成uniCloud云服务,实现数据的云端储存和处理。
- 便捷登录:提供一键登录功能,方便用户注册和登录。
- 可定制开发:支持自定义页面和组件,便于二次开发。
- 完善机制:具有完善的错误处理和用户反馈机制。
安装使用步骤(假设用户已经下载了本项目的源码文件)
开始使用
下载HBuildX软件,在项目目录下,通过以下命令安装依赖:
bash
npm install
项目配置
unipush配置
详情参考此文档: 1. 打开uniapp工程中manifest.json的推送选项。 2. 点击配置进入后台,选择项目进入并点击push选项。 3. 填写信息并开通unipush。 4. 配置iOS证书。 5. 配置多厂商平台。
univerify一键登录配置
登录dcloud后台管理网址: 1. 点击左侧选项卡最后一项一键登录,点击开通并同意。 2. 填写相关信息。 3. 进行充值。 前端代码接入: ```javascript // 预登录代码 uni.preLogin({ provider: 'univerify', success(){ //预登录成功 // 显示一键登录选项 }, fail(res){ // 预登录失败 // 不显示一键登录选项(或置灰) // 根据错误信息判断失败原因,如有需要可将错误提交给统计服务器 console.log(res.errCode) console.log(res.errMsg) } })
// 请求授权
uni.login({
provider: 'univerify',
univerifyStyle: { // 自定义登录框样式
//参考univerifyStyle 数据结构
},
success(res){ // 登录成功
console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
},
fail(res){ // 登录失败
console.log(res.errCode)
console.log(res.errMsg)
}
})
可根据需求修改授权弹窗样式,示例如下:
json
{
"backgroundColor": "#ffffff",
"icon": {
"path": "static/xxx.png"
},
"phoneNum": {
"color": "#000000",
"fontSize": "18"
},
"slogan": {
"color": "#8a8b90",
"fontSize": "12"
},
"authButton": {
"normalColor": "#3479f5",
"highlightColor": "#2861c5",
"disabledColor": "#73aaf5",
"textColor": "#ffffff",
"title": "本机号码一键登录"
},
"otherLoginButton": {
"visible": "true",
"normalColor": "#f8f8f8",
"highlightColor": "#dedede",
"textColor": "#000000",
"title": "其他登录方式",
"borderWidth": "1px",
"borderColor": "#c5c5c5"
},
"privacyTerms": {
"defaultCheckBoxState":"true",
"textColor": "#8a8b90",
"termsColor": "#1d4788",
"prefix": "我已阅读并同意",
"suffix": "并使用本机号码登录",
"fontSize": "12",
"privacyItems": [
{
"url": "https://",
"title": "用户服务协议"
}
]
}
}
```
uncloud配置
- 开通unclound服务:访问unclound网站,创建uclound文件夹,右键选择创建ucloud空间,新建云函数,在index.js写入以下代码:
javascript // 云函数 module.exports = async(event){ const res = await uniCloud.getPhoneNumber({ appid: '_UNI_ABCDEFG', // 替换成自己开通一键登录的应用的DCloud appid,使用callFunction方式调用时可以不传(会自动取当前客户端的appid),如果使用云函数URL化的方式访问必须传此参数 provider: 'univerify', apiKey: 'xxx', // 在开发者中心开通服务并获取apiKey apiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecret access_token: event.access_token, openid: event.openid }) // 执行入库等操作,正常情况下不要把完整手机号返回给前端 return { code: 0, message: '获取手机号成功' } }
客户端使用以下代码调用云函数:javascript // 客户端 uniCloud.callFunction({ name: 'xxx', // 你的云函数名称 data: { access_token: 'xxx', // 客户端一键登录接口返回的access_token openid: 'xxx' // 客户端一键登录接口返回的openid } }).then(res => { // res.result = { // code: '', // message: '' // } }).catch(err=>{ // 处理错误 })
云函数文件夹右键上传并部署。 - 配置后台编码:参考云函数快速上手。
- 开通url编码化:参考url化编码。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】