Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
一个会的不多的人
uni-starter
提交
fd4e1059
U
uni-starter
项目概览
一个会的不多的人
/
uni-starter
与 Fork 源项目一致
Fork自
DCloud / uni-starter
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-starter
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fd4e1059
编写于
7月 02, 2021
作者:
DCloud_JSON
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
优化项目文档
上级
9af45fa8
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
130 addition
and
119 deletion
+130
-119
README.md
README.md
+122
-113
changelog.md
changelog.md
+2
-0
package.json
package.json
+1
-1
uni-starter.config.js
uni-starter.config.js
+5
-5
未找到文件。
README.md
浏览文件 @
fd4e1059
### 介绍
`uni-starter`
,是一个集成了商用项目开发常见功能的云端一体应用快速开发基本项目模版。
如果说uniCloud admin是管理端项目的基础模板,那么uni-starter则是用户端、尤其是移动端的基础项目模板。
在这个模板基础之上快速填充自己的业务,即可快速完成一个应用。
##### 演示效果
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/0625ae17-1262-45cb-a713-cdbf02df5c0a.png
)
> h5版演示链接:[https://uni-starter.dcloud.net.cn](https://uni-starter.dcloud.net.cn)
#### 视频教程:
#### 看一段视频:
<a
target=
"_blank"
href=
"https://www.bilibili.com/video/BV17p4y1a71x?p=11"
>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/71d310a5-ef69-4ca5-88c8-9a3abf8fb8e3.png"
alt=
"腾讯课堂uniCloud视频教程"
style=
"width: 70%;"
>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/71d310a5-ef69-4ca5-88c8-9a3abf8fb8e3.png"
alt=
"腾讯课堂uniCloud视频教程"
style=
"width: 70%;
margin-bottom:26px;
"
>
</a>
####
项目背景
一个应用,其实有很多通用的功能,比如登录注册、头像、设置、拦截器、banner...
####
简介
`uni-starter`
,是一个集成了大量商用项目常见功能的,云端一体应用快速开发基本项目模版。
`uni-starter`
将这些功能都已经集成好。
APP有很多通用的功能,比如登录注册、头像、设置、拦截器、banner...
`uni-starter`
将这些功能都已经集成好。
新建项目选择
`uni-starter`
模板,即可在此基础上快速开发自己的特色业务。
在hbuilderx
新建项目选择
`uni-starter`
模板,即可在此基础上快速开发自己的特色业务。
有了uni-starter,再加上schema2code生成前端页面,一个简单应用就可以快速完成。
如果说uniCloud admin是管理端项目的基础模板,那么uni-starter则是用户端、尤其是移动端的基础项目模板。
uni-starter + uniCloud admin,提供了用户端和管理端的基础模板,应用开发从未如此简单快捷!
### 界面效果
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/c2362519-8131-4071-b08a-8175e11b9341.jpg"
/>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/61e0f3d3-d726-4973-865c-e6ee0bdd0870.jpg"
/>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/644bab3c-1f90-46ba-a920-f464b52d0e36.jpg"
/>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/97db3e92-c3b3-4e32-bfb8-c348f9c9cd61.jpg"
/>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/a1d53005-5d45-45d1-b048-a7260a478edf.jpg"
/>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/d41b871f-d47f-4e86-b2f1-2b1a74a8a4bd.jpg"
/>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/b0d7f5e7-2e16-4b3e-a123-6e9cd97582d7.jpg"
/>
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/e03ad65d-11bb-4697-81b2-d13af42f0441.jpg"
/>
##### 扫码体验:h5版演示效果(链接:[https://uni-starter.dcloud.net.cn](https://uni-starter.dcloud.net.cn))
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/0625ae17-1262-45cb-a713-cdbf02df5c0a.png"
style=
"width: 120px;"
>
### uni-starter集成的功能包括:
1.
用户账户:登录注册(含用户名密码登录、手机号验证码登录、app一键登录、微信登录、Apple登录、微信小程序登录)、修改密码、忘记密码、头像更换(集成图片裁剪)、昵称修改、积分查看、退出登录
...
...
@@ -53,86 +37,49 @@ uni-starter + uniCloud admin,提供了用户端和管理端的基础模板,
-
为迎合苹果App Store的规则,登陆与分享功能项显示之前自动检测是否安装了对应客户端。比如:设备未安装微信则不显示微信快捷登陆和微信分享选项
-
分析uniCloud.callfunction和clientDB操作的响应体,判断code执行对应的操作如跳转到登陆页,自动续期token
*
更多功能模块会不断更新,请持续关注本插件
## 快速体验部署流程
#### 1. 开通uniCloud
-
开通
`uniCloud`
:本项目是云端一体的,它的云端代码需要部署在uniCloud云服务空间里,需要开通uniCloud。在
[
https://unicloud.dcloud.net.cn/
](
https://unicloud.dcloud.net.cn/
)
登录,按云厂商要求进行实名认证。
-
在uniCloud认证通过后,创建一个服务空间给本项目使用。选择阿里云或腾讯云均可。
[
参考
](
https://uniapp.dcloud.net.cn/uniCloud/price
)
-
使用HBuilderX 3.1以上版本(最好是最新版),把本项目导入到HBuilderX中,在项目根目录uniCloud上点右键菜单,关联服务空间 -> 选择之前创建的服务空间
#### 2. 关联项目与云服务空间
<img
class=
"cloud"
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/f3f36e4a-77e6-495c-bb85-5fc6999e29e1.jpg"
/>
<img
class=
"cloud"
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/dd39dfcc-60c8-4f9f-a4d7-6b08f39e737e.jpg"
/>
<img
class=
"cloud"
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/350f5e46-976e-4c5b-be49-e5c3908b03f4.jpg"
/>
#### 3.根目录`/uniCloud/database` 右键上传`上传所有DB Schema及扩展校验函数`
### 功能模块介绍
#### 1. 拦截器与路由控制
传统的路由管理方式是对uni-app框架路由写法的二次封装,自定义的写法不支持ide的代码提示。另外不同插件作者封装不同的路由管理方式,这样做出来的插件与用户的项目结合时,路由写法不统一的差异需要去磨平。用拦截器实现路由管理并不需要改变原来路由的写法。
#### 1. 路由控制
传统的路由管理方式是对uni-app框架路由写法的二次封装,自定义的写法不支持ide的代码提示。
另外不同插件作者封装不同的路由管理方式,这样做出来的插件与用户的项目结合时,路由写法不统一的差异需要去磨平。
用拦截器(下文有详细介绍)实现路由管理并不需要改变原来路由的写法。
为此
`uni-starter`
基于
`uni.addInterceptor`
(拦截器)实现路由管理。
拦截器顾名思义,是在框架方法执行的各个环节(包含:拦截前触发、成功回调拦截、失败回调拦截、完成回调拦截)插入逻辑,篡改数据或终止运行。
比如你希望在打开用户中心等页面之前,都检查一下该用户是否登陆,否则就重定向到登陆页面。使用拦截器你可以用以下写法在应用入口定义全局生效:
你只需要在项目根目录的框架配置文件:
`uni-starter.config.js`
的
`router`
->
`needLogin`
和
`login`
中配置完整的路由名称即可:
```
js
//定义各个页面,这里为了演示uni-starter框架是把该定义写在全局配置uni-starter.config.js中
let
needLogin
=
[
"
/pages/ucenter/userinfo/userinfo
"
,
...
]
uni
.
addInterceptor
(
"
navigateTo
"
,
{
invoke
(
e
)
{
// 调用前拦截
//获取用户的token
const
token
=
uni
.
getStorageSync
(
'
uni_id_token
'
)
//获取当前页面路径(即url去掉"?"和"?"后的参数)
const
url
=
e
.
url
.
split
(
'
?
'
)[
0
]
//判断要打开的页面是否需要验证登陆
if
(
needLogin
.
includes
(
url
)
&&
token
==
''
)
{
uni
.
showToast
({
title
:
'
该页面需要登录才能访问,请先登录
'
,
icon
:
'
none
'
})
uni
.
navigateTo
({
url
:
"
/pages/ucenter/login-page/index/index
"
})
return
false
}
},
fail
(
err
)
{
// 失败回调拦截
console
.
log
(
err
);
},
})
```
-
而路由跳转方法不仅有
`uni.navigateTo`
还有
`uni.redirectTo`
,
`uni.reLaunch`
,
`uni.switchTab`
;
-
另外我们还希望控制直接跳转至哪种登陆类型
所以在uni-starter框架中我们这样定义:
> uni-starter/common/appInit.js 的第228-280行
```
js
const
{
"
router
"
:
{
needLogin
,
login
}
}
=
uniStarterConfig
//需要登录的页面
let
list
=
[
"
navigateTo
"
,
"
redirectTo
"
,
"
reLaunch
"
,
"
switchTab
"
];
list
.
forEach
(
item
=>
{
//用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
uni
.
addInterceptor
(
item
,
{
invoke
(
e
)
{
// 调用前拦截
//获取用户的token
const
token
=
uni
.
getStorageSync
(
'
uni_id_token
'
)
//获取当前页面路径(即url去掉"?"和"?"后的参数)
const
url
=
e
.
url
.
split
(
'
?
'
)[
0
]
//判断要打开的页面是否需要验证登陆
if
(
needLogin
.
includes
(
url
)
&&
token
==
''
)
{
uni
.
showToast
({
title
:
'
该页面需要登录才能访问,请先登录
'
,
icon
:
'
none
'
})
uni
.
navigateTo
({
url
:
"
/pages/ucenter/login-page/index/index
"
})
return
false
}
//控制登录优先级
if
(
url
==
'
/pages/ucenter/login-page/index/index
'
)
{
//一键登录(univerify)、账号(username)、验证码登录(短信smsCode)
if
(
login
[
0
]
==
'
univerify
'
)
{
if
(
e
.
url
==
url
)
{
e
.
url
+=
'
?
'
}
//添加参数之前判断是否带了`?`号如果没有就补上,因为当开发场景本身有参数的情况下是已经带了`?`号
e
.
url
+=
"
univerify_first=true
"
}
else
if
(
login
[
0
]
==
'
username
'
)
{
e
.
url
=
"
/pages/ucenter/login-page/pwd-login/pwd-login
"
}
}
return
true
},
fail
(
err
)
{
// 失败回调拦截
console
.
log
(
err
);
},
})
})
"
router
"
:
{
//needLogin:配置强制需要登陆的页面,在打开这些页面之前会自动检查(前端校验)uni_id_token的值是否有效,如果无效会自动跳转到登陆页面
"
needLogin
"
:
[
"
/pages/ucenter/userinfo/userinfo
"
,
"
/uni_modules/uni-news-favorite/pages/uni-news-favorite/list
"
,
"
/uni_modules/uni-feedback/pages/uni-feedback/add
"
],
/*
login:配置登陆类型与优先级
未列举到的,或设备环境不支持的选项,将被隐藏。如果你需要在不同平台有不同的配置,直接用条件编译即可
根据数组的第0项,决定登录方式的第一优先级。
详情下文:2.登录配置详解
*/
"
login
"
:
[
"
username
"
,
"
smsCode
"
,
"
univerify
"
,
"
weixin
"
,
"
apple
"
],
}
```
#### 2.登录
功能配置
#### 2.登录
配置详解
-
使用方式:在
`uni-starter.config.js`
->
`router`
->
`login`
下完全列举你需要的登录方式。这里支持用
[
条件编译
](
https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91
)
因此你可以配置在不同平台下拥有的登录方式。
-
uni-start集成的登录方式有:验证码登录(smsCode)、读取手机SIM卡一键登录(univerify)、账号密码登录(username)、微信登录(weixin)、苹果登录(apple)
-
优先级策略:
...
...
@@ -228,7 +175,7 @@ uni-starter + uniCloud admin,提供了用户端和管理端的基础模板,
> 更多Android平台隐私与政策提示框配置方法,[详情](https://ask.dcloud.net.cn/article/36937)
#### 注意:
####
#
注意:
1.
最新的华为应用市场要求,隐私政策提示框上接受按钮的文本,必须为“同意”而不能是其他有歧义的文字。
2.
配置后提交云端打包后生效。理论上绝大部分和
`manifest.json`
生效相关的配置均需要提交云打包后生效
...
...
@@ -247,6 +194,80 @@ uni-starter + uniCloud admin,提供了用户端和管理端的基础模板,
3.
常规的errCoder自动执行对应程序,如token无效/过期自动跳转到登陆页面。
4.
token自动续期。
#### 11.举例路由控制原理,深入了解拦截器的使用
比如你希望在打开用户中心等页面之前,都检查一下该用户是否登陆,否则就重定向到登陆页面。使用拦截器你可以用以下写法在应用入口定义全局生效:
```
js
//定义各个页面,这里为了演示uni-starter框架是把该定义写在全局配置uni-starter.config.js中
let
needLogin
=
[
"
/pages/ucenter/userinfo/userinfo
"
,
...
]
uni
.
addInterceptor
(
"
navigateTo
"
,
{
invoke
(
e
)
{
// 调用前拦截
//获取用户的token
const
token
=
uni
.
getStorageSync
(
'
uni_id_token
'
)
//获取当前页面路径(即url去掉"?"和"?"后的参数)
const
url
=
e
.
url
.
split
(
'
?
'
)[
0
]
//判断要打开的页面是否需要验证登陆
if
(
needLogin
.
includes
(
url
)
&&
token
==
''
)
{
uni
.
showToast
({
title
:
'
该页面需要登录才能访问,请先登录
'
,
icon
:
'
none
'
})
uni
.
navigateTo
({
url
:
"
/pages/ucenter/login-page/index/index
"
})
return
false
}
},
fail
(
err
)
{
// 失败回调拦截
console
.
log
(
err
);
},
})
```
-
而路由跳转方法不仅有
`uni.navigateTo`
还有
`uni.redirectTo`
,
`uni.reLaunch`
,
`uni.switchTab`
;
-
另外我们还希望控制直接跳转至哪种登陆类型
所以在uni-starter框架中我们这样定义:
> uni-starter/common/appInit.js 的第228-280行
```
js
const
{
"
router
"
:
{
needLogin
,
login
}
}
=
uniStarterConfig
//需要登录的页面
let
list
=
[
"
navigateTo
"
,
"
redirectTo
"
,
"
reLaunch
"
,
"
switchTab
"
];
list
.
forEach
(
item
=>
{
//用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
uni
.
addInterceptor
(
item
,
{
invoke
(
e
)
{
// 调用前拦截
//获取用户的token
const
token
=
uni
.
getStorageSync
(
'
uni_id_token
'
)
//获取当前页面路径(即url去掉"?"和"?"后的参数)
const
url
=
e
.
url
.
split
(
'
?
'
)[
0
]
//判断要打开的页面是否需要验证登陆
if
(
needLogin
.
includes
(
url
)
&&
token
==
''
)
{
uni
.
showToast
({
title
:
'
该页面需要登录才能访问,请先登录
'
,
icon
:
'
none
'
})
uni
.
navigateTo
({
url
:
"
/pages/ucenter/login-page/index/index
"
})
return
false
}
//控制登录优先级
if
(
url
==
'
/pages/ucenter/login-page/index/index
'
)
{
//一键登录(univerify)、账号(username)、验证码登录(短信smsCode)
if
(
login
[
0
]
==
'
univerify
'
)
{
if
(
e
.
url
==
url
)
{
e
.
url
+=
'
?
'
}
//添加参数之前判断是否带了`?`号如果没有就补上,因为当开发场景本身有参数的情况下是已经带了`?`号
e
.
url
+=
"
univerify_first=true
"
}
else
if
(
login
[
0
]
==
'
username
'
)
{
e
.
url
=
"
/pages/ucenter/login-page/pwd-login/pwd-login
"
}
}
return
true
},
fail
(
err
)
{
// 失败回调拦截
console
.
log
(
err
);
},
})
})
```
### 应用启动时序介绍
文件路径: App.vue
...
...
@@ -272,18 +293,6 @@ onLaunch生命周期执行了
-
页面路由拦截,配置需强制登录的页面;打开时检测,如果token无效就自动跳转到登录页
-
优雅实现:自动引导打开
`选择图片`
所需要的权限。当调用
`uni.chooseImage`
时检测到无权限自动开启引导。并不是在每次调用接口时处理这类问题,你可以参考该例子做更多该类场景的处理。uni-starter也会持续完善
## 快速体验部署流程
#### 1. 开通uniCloud
-
开通
`uniCloud`
:本项目是云端一体的,它的云端代码需要部署在uniCloud云服务空间里,需要开通uniCloud。在
[
https://unicloud.dcloud.net.cn/
](
https://unicloud.dcloud.net.cn/
)
登录,按云厂商要求进行实名认证。
-
在uniCloud认证通过后,创建一个服务空间给本项目使用。选择阿里云或腾讯云均可。
[
参考
](
https://uniapp.dcloud.net.cn/uniCloud/price
)
-
使用HBuilderX 3.1以上版本(最好是最新版),把本项目导入到HBuilderX中,在项目根目录uniCloud上点右键菜单,关联服务空间 -> 选择之前创建的服务空间
#### 2. 关联项目与云服务空间
<img
class=
"cloud"
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/f3f36e4a-77e6-495c-bb85-5fc6999e29e1.jpg"
/>
<img
class=
"cloud"
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/dd39dfcc-60c8-4f9f-a4d7-6b08f39e737e.jpg"
/>
<img
class=
"cloud"
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e/350f5e46-976e-4c5b-be49-e5c3908b03f4.jpg"
/>
#### 3.根目录`/uniCloud/database` 右键上传`上传所有DB Schema及扩展校验函数`
##### 配置文件
uni-starter提供了uni-starter.config.js,可指定该应用是否强制登录才能进入首页,可配置选择登录注册方式以及不同方式的优先级等。配置项内容如下:
...
...
changelog.md
浏览文件 @
fd4e1059
## 1.0.31(2021-07-02)
优化项目文档
## 1.0.30(2021-07-01)
1.
简化宫格页面写法,方便理解如何控制不同状态角色的用户是否可见哪些元素。
2.
uni-id-cf发送短信验证码api,默认注释掉:虚拟发送短信验证码的代码块。
...
...
package.json
浏览文件 @
fd4e1059
{
"id"
:
"uni-starter"
,
"displayName"
:
"uni-starter"
,
"version"
:
"1.0.3
0
"
,
"version"
:
"1.0.3
1
"
,
"description"
:
"云端一体应用快速开发基本项目模版"
,
"keywords"
:
[
"uni-starter"
,
...
...
uni-starter.config.js
浏览文件 @
fd4e1059
...
...
@@ -19,18 +19,18 @@ module.exports = {
}
},
"
router
"
:
{
//
配置需要路由拦截的页面地址,在打开这些页面之前会自动检查(不联网)uni_id_token的值是否存在/过期等
//
needLogin:配置强制需要登陆的页面,在打开这些页面之前会自动检查(前端校验)uni_id_token的值是否有效,如果无效会自动跳转到登陆页面
"
needLogin
"
:
[
"
/pages/ucenter/userinfo/userinfo
"
,
"
/uni_modules/uni-news-favorite/pages/uni-news-favorite/list
"
,
"
/uni_modules/uni-feedback/pages/uni-feedback/add
"
],
"
login
"
:
[
"
username
"
,
"
smsCode
"
,
"
univerify
"
,
"
weixin
"
,
"
apple
"
],
/*
/*
login:配置登陆类型与优先级
未列举到的,或设备环境不支持的选项,将被隐藏。如果你需要在不同平台有不同的配置,直接用条件编译即可
根据数组的第0项,决定登录方式的第一优先级。
未列举到的,或设备环境不支持的选项,将被隐藏。
如果你需要在不同平台有不同的配置,直接用条件编译即可
*/
"
login
"
:
[
"
username
"
,
"
smsCode
"
,
"
univerify
"
,
"
weixin
"
,
"
apple
"
],
},
//关于应用
"
about
"
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录