阿里云开发uniapp之uni-starter

一、为什么使用uni-starter

uni-starter是集成商用项目常见功能的、云端一体应用快速开发项目模版。

一个应用有很多通用的功能,比如登录注册、个人中心、设置、权限管理、拦截器、banner... uni-starter将这些功能都已经集成好,另外,uni-starter可以直接在前端调用数据库生成页面,节省了大量的js代码。

此外,uni-starter结合uni-admin给用户提供了用户端和管理端的全套模版,对开发人员来说,节省了大量的开发时间。

二、uni-starter如何使用

1,在HBuilderX中创建项目,选择模版uni-starter,选择阿里云,Vue版本2或3都可以,这里我是用Vue3版本,最后点击创建即可。

如下图所示:

2.开通云服务
  • uniCloud控制台登录,按云厂商要求进行实名认证。
  • 在uniCloud认证通过后,创建一个服务空间给本项目使用。选择阿里云。如下图所示:
3.创建并配置uni-id的配置文件
  • 在目录uniCloud/cloudfunctions/common/uni-config-center/下新建uni-id/config.json

  • 参考文档云端配置config.json的说明完成配置

  • 这里尤为重要,后续登录报错提示:Invalid uni-id config file就是这个文件没有创建或者该文件注释没有删除,又或者该文件内容格式有误,总之就是文件没法生效。下面我附上自己的代码,大家复制粘贴即可正常使用,但AppID和secret等内容还需要各自参照官网来配置。

    javascript 复制代码
    {
    	"passwordSecret": [{
    		"type": "sdasd-23",
    		"version": 1
    	}],
    	"passwordStrength": "medium",
    	"tokenSecret": "asd12asd#23",
    	"requestAuthSecret": "",
    	"tokenExpiresIn": 7200,
    	"tokenExpiresThreshold": 3600,
    	"maxTokenLength": 10,
    	"passwordErrorLimit": 6,
    	"passwordErrorRetryTime": 3600,
    	"autoSetInviteCode": false,
    	"forceInviteCode": false,
    	"idCardCertifyLimit": 1,
    	"realNameCertifyLimit": 5,
    	"sensitiveInfoEncryptSecret": "",
    	"frvNeedAlivePhoto": false,
    	"userRegisterDefaultRole": [],
    	"app": {
    		"tokenExpiresIn": 2592000,
    		"tokenExpiresThreshold": 864000,
    		"oauth": {
    
    			"weixin": {
    				"appid": "",
    				"appsecret": ""
    			},
    
    			"qq": {
    				"appid": "",
    				"appsecret": ""
    			},
    			"apple": {
    				"bundleId": ""
    			}
    		}
    	},
    	"web": {
    		"tokenExpiresIn": 7200,
    		"tokenExpiresThreshold": 3600,
    		"oauth": {
    			"weixin-h5": {
    				"appid": "",
    				"appsecret": ""
    			},
    			"weixin-web": {
    				"appid": "",
    				"appsecret": ""
    			}
    		}
    	},
    	"mp-weixin": {
    		"tokenExpiresIn": 259200,
    		"tokenExpiresThreshold": 86400,
    		"oauth": {
    
    			"weixin": {
    				"appid": "",
    				"appsecret": ""
    			}
    		}
    	},
    	"mp-qq": {
    		"tokenExpiresIn": 259200,
    		"tokenExpiresThreshold": 86400,
    		"oauth": {
    
    			"qq": {
    				"appid": "",
    				"appsecret": ""
    			}
    		}
    	},
    	"mp-alipay": {
    		"tokenExpiresIn": 259200,
    		"tokenExpiresThreshold": 86400,
    		"oauth": {
    
    			"alipay": {
    				"appid": "",
    				"privateKey": "",
    				"keyType": "PKCS8"
    			}
    		}
    	},
    	"service": {
    		"sms": {
    			"name": "",
    			"codeExpiresIn": 180,
    			"scene": {
    				"bind-mobile-by-sms": {
    					"templateId": "",
    					"codeExpiresIn": 240
    				}
    			}
    		},
    		"univerify": {
    			"appid": ""
    		}
    	}
    }

    注意:passwordSecret里和type值和tokenSecret值都是自己随意配置的,passwordSecret里和type值一般不随便更改,只改一次,如果后续还需要可以在数组中新增一个对象,把版本号改成2以此类推即可。

4 运行云服务空间初始化向导

如下图所示步骤

5.根据自己需要,修改uni-pages文件内容

该文件格式如下:

├─uni_modules                                         存放uni_module规范的插件。
│    ├─其他module
│    └─uni-id-pages
│        ├─uniCloud
│        │    └─cloudfunctions                        云函数目录
│        │        └─uni-id-co                         集成调用uni-id方法的云对象
│        │            ├─common                        公用逻辑
│        │            ├─config                        配置
│        │            │  └─permission.js              调用接口所需的权限配置
│        │            ├─lang                          国际化目录
│        │            ├─lib                           基础功能,不建议修改此目录下文件
│        │            │  ├─third-party                三方平台接口
│        │            │  └─utils                      基础功能
│        │            ├─middleware                    中间件
│        │            └─module                        分模块存放的云对象方法
│        ├─common
│        │    ├─login-page.scss                       登录页面公共样式
│        │    ├─login-page.mixin.js                   登录页面公共mixin文件
│        │    └─loginSuccess.js                       登录成功后执行的文件
│        ├─components
│        │    ├─cloud-image                           uniCloud云存储图片解析组件
│        │    │    └─cloud-image.vue
│        │    ├─uni-id-pages-agreements               同意用户服务协议&隐私政策条款组件
│        │    │    └─uni-id-pages-agreements.vue
│        │    ├─uni-id-pages-avatar                   用户头像组件
│        │    │    └─uni-id-pages-avatar.vue
│        │    ├─uni-id-pages-bind-mobile              通过微信获取手机号码绑定个人资料
│        │    │    └─uni-id-pages-bind-mobile.vue
│        │    ├─uni-id-pages-email-form               邮箱验证码组件
│        │    │    └─uni-id-pages-email-form.vue
│        │    ├─uni-id-pages-fab-login                悬浮的切换登录方式组件
│        │    │    └─uni-id-pages-fab-login.vue
│        │    ├─uni-id-pages-sms-form                 获取短信验证码组件
│        │    │    └─uni-id-pages-sms-form.vue
│        │    └─uni-id-pages-user-profile             获取用户信息组件
│        │        └─uni-id-pages-user-profile.vue
│        ├─pages
│        │    ├─common
│        │    │    └─webview                          用于实现应用内浏览或打开《用户协议和隐私协议》URL链接页面
│        │    │        └─webview.vue
│        │    ├─login                        
│        │    │    ├─login-smscode.vue                短信验证码登录
│        │    │    ├─login-withoutpwd.vue             免密码登录
│        │    │    └─login-withpwd.vue                密码登录
│        │    ├─register                    
│        │    │    ├─register.vue                     通过用户名密码注册账号
│        │    │    ├─register-admin.vue               创建超级管理员
│        │    │    ├─register-by-email.vue            通过邮箱验证码注册账号
│        │    │    └─validator.js                     注册账号页的表单验证规则文件
│        │    ├─retrieve                              
│        │    │    ├─retrieve-by-email.vue            通过邮箱验证码重置密码
│        │    │    └─retrieve.vue					            通过手机验证码重置密码
│        │    └─userinfo
│        │        ├─bind-mobile.vue                   绑定手机号码
│        │        ├─change_pwd.vue                    修改密码
│        │        ├─cropImage.vue                     裁剪图片
│        │        ├─deactivate.vue                    注销账号
│        │        ├─set-pwd.vue                       设置密码
│        │        ├─realname-verify                   实名认证
│        │        └─userinfo.js                       注册账号页的表单验证规则文件
│        ├─static                                     静态资源目录
│        ├─changelog.md                               更新日志
│        ├─config.js                                  uni-id-pages的配置文件
│        ├─init.js                                    初始化文件
│        ├─package.json                               包管理文件
│        └─readme.md                                  插件自述文件
这里补充细节:

具体看官方文档:简介@intro | uniCloud

javascript 复制代码
//这是导入云函数,后续直接uniIdCo.即可访问该云函数方法,具体看官网云函数和云对象
const uniIdCo = uniCloud.importObject("uni-id-co", {
					errorOptions: {
						type: 'toast'
					}
				})

此外还有 调用云数据库,使用Vuex等操作,如下:

javascript 复制代码
	const db = uniCloud.database();//这是导入云数据库
6.更多配置

如果项目运行出错,请检查manifest.json文件中的配置还有config.json文件中APPID配置是否正确,如果还有问题,查看微信开放平台和微信公众平台中AppID是否有权限。

相关推荐
小阮的学习笔记4 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜5 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=5 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧8 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck10 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!30 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。36 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼42 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
阿伟来咯~1 小时前
一些 uniapp相关bug
uni-app·bug