阿里云开发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是否有权限。

相关推荐
燃先生._.2 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖3 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
black^sugar4 小时前
纯前端实现更新检测
开发语言·前端·javascript
2401_857600955 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600955 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL5 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据5 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
轻口味5 小时前
Vue.js 核心概念:模板、指令、数据绑定
vue.js
2402_857583495 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js