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

相关推荐
计算机学姐15 分钟前
基于微信小程序的民宿预订管理系统
java·vue.js·spring boot·后端·mysql·微信小程序·小程序
Swift社区1 小时前
统计文本文件中单词频率的 Swift 与 Bash 实现详解
vue.js·leetcode·机器学习
Jacob程序员2 小时前
leaflet绘制室内平面图
android·开发语言·javascript
eguid_12 小时前
JavaScript图像处理,常用图像边缘检测算法简单介绍说明
javascript·图像处理·算法·计算机视觉
sunly_2 小时前
Flutter:自定义Tab切换,订单列表页tab,tab吸顶
开发语言·javascript·flutter
Zero_pl3 小时前
vue学习路线
vue.js
咔咔库奇3 小时前
【TypeScript】命名空间、模块、声明文件
前端·javascript·typescript
NoneCoder3 小时前
JavaScript系列(42)--路由系统实现详解
开发语言·javascript·网络
寰宇软件3 小时前
PHP防伪溯源一体化管理系统小程序
小程序·uni-app·vue·php
2013crazy3 小时前
Java 基于 SpringBoot+Vue 的校园兼职平台(附源码、部署、文档)
java·vue.js·spring boot·兼职平台·校园兼职·兼职发布平台