README.md 28.8 KB
Newer Older
DCloud_JSON's avatar
DCloud_JSON 已提交
1
#### 看一段视频:
2
<a target="_blank" href="https://www.bilibili.com/video/BV17p4y1a71x?p=11">
DCloud_JSON's avatar
DCloud_JSON 已提交
3
    <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;">
4
</a>
DCloud_JSON's avatar
DCloud_JSON 已提交
5

DCloud_JSON's avatar
DCloud_JSON 已提交
6 7
#### 简介
`uni-starter`,是一个集成了大量商用项目常见功能的,云端一体应用快速开发基本项目模版。
DCloud_JSON's avatar
DCloud_JSON 已提交
8

DCloud_JSON's avatar
DCloud_JSON 已提交
9
APP有很多通用的功能,比如登录注册、头像、设置、拦截器、banner...`uni-starter`将这些功能都已经集成好。
DCloud_JSON's avatar
DCloud_JSON 已提交
10

DCloud_JSON's avatar
DCloud_JSON 已提交
11
在hbuilderx新建项目选择`uni-starter`模板,即可在此基础上快速开发自己的特色业务。
DCloud_JSON's avatar
DCloud_JSON 已提交
12

DCloud_JSON's avatar
DCloud_JSON 已提交
13
有了uni-starter,再加上schema2code生成前端页面,一个简单应用就可以快速完成。
DCloud_JSON's avatar
DCloud_JSON 已提交
14

15
如果说[uniCloud admin](https://uniapp.dcloud.io/uniCloud/admin)是管理端项目的基础模板,那么uni-starter则是用户端、尤其是移动端的基础项目模板。
DCloud_JSON's avatar
DCloud_JSON 已提交
16

DCloud_JSON's avatar
DCloud_JSON 已提交
17 18
uni-starter + uniCloud admin,提供了用户端和管理端的基础模板,应用开发从未如此简单快捷!

DCloud_JSON's avatar
DCloud_JSON 已提交
19 20
##### 扫码体验: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;">
21

22
### uni-starter集成的功能包括:
23 24
 1. 用户账户:登录注册(含用户名密码登录、手机号验证码登录、app一键登录、微信登录、Apple登录、微信小程序登录)、修改密码、忘记密码、头像更换(集成图片裁剪)、昵称修改、积分查看、退出登录
 2. 设置:App更新(整包升级、wgt升级、强制升级,后台搭配uniCloud admin的升级中心插件管理)、推送开关(app)、指纹解锁(app)、人脸解锁(app)、清除缓存(app)、用户协议、隐私协议、问题与反馈、分享推荐、关于
25 26 27 28 29 30
 3. 启动引导:iOS初次启动被用户禁止网络权限后引导开启、Android弹出隐私协议后再申请权限
 4. 权限引导:应用无访问摄像头/相册权限,引导跳到设置界面
 5. 首页集成banner(后台搭配uniCloud admin的banner插件管理)、搜索、列表、详情、分享,均为云端一体。实际使用中将clientDB的表名更改为自己业务表名即可
 6. 首页采用nvue,fast编译模式,加快App端启动速度
 7. 内置联网失败的重试页面(不是错误弹框,页面有重试按钮)、更漂亮的分享菜单页面
 8. 内置拦截器:
DCloud_JSON's avatar
DCloud_JSON 已提交
31
	- 页面路由拦截,配置需强制登录的页面;打开时检测,如果token无效就自动跳转到登录页
DCloud_JSON's avatar
DCloud_JSON 已提交
32
	- 优雅实现:自动引导打开`选择图片`所需要的权限。当调用`uni.chooseImage`时检测到无权限自动开启引导。并不是在每次调用接口时处理这类问题,你可以参考该例子做更多该类场景的处理。uni-starter也会持续完善
33 34 35 36 37 38
 9. h5版在页面顶部(全局悬浮)引导用户`点击下载App`
 10. 营销裂变:点击“分销推荐”,生成带用户inviteCode参数的应用下载页(H5),一键分享到微信或微信朋友圈等。被邀请人打开下载页面点击下载,设备剪贴板的内容会被设置为邀请者的inviteCode。被邀请人下载app之后通过任何方式登陆(含:注册并登陆),uni-starter框架会自动获取设备剪切板中的inviteCode提交到服务端绑定关联关系。
 11. 自动完成:
	- 自动重连由网络导致失败的请求。操作注册/登陆操作自动获取客户端设备:push_clientid、imei、oaid、idfa新增/更新到数据表uni-id-device
	- 为迎合苹果App Store的规则,登陆与分享功能项显示之前自动检测是否安装了对应客户端。比如:设备未安装微信则不显示微信快捷登陆和微信分享选项
	- 分析uniCloud.callfunction和clientDB操作的响应体,判断code执行对应的操作如跳转到登陆页,自动续期token
DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
39

DCloud_JSON's avatar
DCloud_JSON 已提交
40 41 42 43 44
* 更多功能模块会不断更新,请持续关注本插件 

## 快速体验部署流程
#### 1. 开通uniCloud
- 开通`uniCloud`:本项目是云端一体的,它的云端代码需要部署在uniCloud云服务空间里,需要开通uniCloud。在[https://unicloud.dcloud.net.cn/](https://unicloud.dcloud.net.cn/)登录,按云厂商要求进行实名认证。
45
- 在uniCloud认证通过后,创建一个服务空间给本项目使用。选择阿里云或腾讯云均可,两种服务空间差异[详情](https://uniapp.dcloud.net.cn/uniCloud/price)
DCloud_JSON's avatar
DCloud_JSON 已提交
46

47 48 49 50
#### 2. 运行云服务空间初始化向导
<img class="cloud" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/472d8525-4e64-4a86-a77a-8c37c4379610.jpg" />
<img class="cloud" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/78b3f17c-cf70-4cdf-9ada-1796753ffeac.jpg" />
<img class="cloud" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/09916d79-4753-4baa-9b95-baa831f1a873.jpg" />
DCloud_JSON's avatar
DCloud_JSON 已提交
51 52 53



DCloud_JSON's avatar
DCloud_JSON 已提交
54
### 功能模块介绍
DCloud_JSON's avatar
DCloud_JSON 已提交
55 56 57 58
#### 1. 路由控制
传统的路由管理方式是对uni-app框架路由写法的二次封装,自定义的写法不支持ide的代码提示。
另外不同插件作者封装不同的路由管理方式,这样做出来的插件与用户的项目结合时,路由写法不统一的差异需要去磨平。
用拦截器(下文有详细介绍)实现路由管理并不需要改变原来路由的写法。
59 60
为此`uni-starter`基于`uni.addInterceptor`(拦截器)实现路由管理。

DCloud_JSON's avatar
DCloud_JSON 已提交
61
你只需要在项目根目录的框架配置文件:`uni-starter.config.js``router`->`needLogin``login`中配置完整的路由名称即可:
62
```js
DCloud_JSON's avatar
DCloud_JSON 已提交
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
"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"],
}
DCloud_JSON's avatar
DCloud_JSON 已提交
78
```
79 80 81

##### 注意:
- 首页需要强制登陆才能访问的场景,不由路由控制。而是uni-starter的callFunction拦截器,根据响应体决定是否跳转到登陆页。
82
- uni-starter框架不能将登陆页面设置为首页,否则由拦截器实现的路由管理将生效。
83
- 拦截器实现的路由控制,是在路由跳转未完成之前触发。路由切换方式(navigateTo、redirectTo、reLaunch、switchTab)URL参数必须使用绝对路径路
DCloud_JSON's avatar
DCloud_JSON 已提交
84

DCloud_JSON's avatar
DCloud_JSON 已提交
85
#### 2.登录配置详解
DCloud_JSON's avatar
DCloud_JSON 已提交
86
- 使用方式:在 `uni-starter.config.js`->`router`->`login`下完全列举你需要的登录方式。这里支持用[条件编译](https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91)因此你可以配置在不同平台下拥有的登录方式。
87
- uni-start集成的登录方式有:验证码登录(smsCode)、读取手机SIM卡一键登录(univerify)、账号密码登录(username)、微信登录(weixin)、苹果登录(apple)
88 89
- 优先级策略:
	如果:配置内容为:["username","smsCode"],用户执行如下代码:
90
	```js
91 92 93 94
	uni.navigateTo({
		url: "/pages/ucenter/login-page/index/index"
	})
	```
95 96 97
	访问登录页面,会被拦截器自动切换到"配置的第0项(这里是`username`)的登录方式对应的页面”,即`账户登录`方式页面,路径:`/pages/ucenter/login-page/pwd-login/pwd-login`
- 生效策略:登陆方式有如上5种,你希望有几种登陆方式就在配置中列举几种。有的登陆方式可能因为设备环境问题而不被支持;比如你正确地配置了微信登陆,但是用户的手机并没有安装微信,这样微信登陆功能就无法使用,并且如果出现这种情况你的app会被iOS的App Store拒绝上架。所以在这里,我们的生效策略在检测:你是否有列举到某个配置项为前提的情况下,增加了检测当前环境是否支持,如果不支持会自动隐藏。
- 其他配置:
98
	+ 服务端:uni-starter服务端使用[uni-config-center](https://ext.dcloud.net.cn/plugin?id=4425)统一管理这些配置,文件路径`/uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json`详情下文[目录结构](#id=catalogue)[uni-id配置说明](https://uniapp.dcloud.io/uniCloud/uni-id?id=configjson%e7%9a%84%e8%af%b4%e6%98%8e)
99
	+ 应用模块:`manifest.json` App模块配置 --> OAuth(登录鉴权)--> 勾选并配置你所需要的模块
100 101 102
- 短信登陆:
	+ 使用本功能需要在[DCloud开发者中心](https://dev.dcloud.net.cn/uniSms)开通并充值
	+ 教程参考[短信服务开通指南](https://ask.dcloud.net.cn/article/37534)
103
	+ 修改短信注册/登陆发生验证码的模板id,在文件`/uniCloud-aliyun/cloudfunctions/uni-id-cf/index.js` 搜索 `const templateId = '11753'` 替换为自己申请的模板id
104 105 106
- 一键登录:
	+ [开通配置](https://dev.dcloud.net.cn/uniLogin)
	+ [使用指南](https://uniapp.dcloud.io/univerify)
DCloud_JSON's avatar
DCloud_JSON 已提交
107
-  [苹果登陆集成指南](https://ask.dcloud.net.cn/article/36651) 
DCloud_JSON's avatar
DCloud_JSON 已提交
108 109
#### 3.h5版在页面顶部引导用户`点击下载App`
- 把h5端用户引流到APP端是一个非常常用的功能,相对于h5,APP端有更高的用户留存和更好的产品体验。
110
- 这同时也是一个演示开发者如何在h5端做全局悬浮块的例子。你可以在`/common/openApp.js`中修改他的样式等代码等,注意他只支持普通js语法。
DCloud_JSON's avatar
DCloud_JSON 已提交
111 112

#### 4.分享模块
113
- 应用配置:`manifest.json` App模块配置 --> Share --> 勾选并配置你所需要的模块
DCloud_JSON's avatar
DCloud_JSON 已提交
114 115 116 117
- 分享功能配置参数,随着应用的业务场景决定,在各场景调用的时候配置。参考uni-starter的`/pages/list/detail.vue``methods -> shareClick`
- 更多`uni-share`的介绍 [详情](https://ext.dcloud.net.cn/plugin?id=4860)

#### 5.升级中心相关
118 119
为了解决开发者维护多个 App 升级繁琐,重复逻辑过多,管理不便的问题,升级中心`uni-upgrade-center`应运而生。
提供了简单、易用、统一的 App 管理、App 版本管理、安装包发布管理,升级检测更新管理。
DCloud_JSON's avatar
DCloud_JSON 已提交
120
- 升级中心分为两个部分:`uni-upgrade-center` Admin管理后台和`uni-upgrade-center - Admin`前台检测更新。
121
- `uni-upgrade-center`的介绍 [详情](https://ext.dcloud.net.cn/plugin?id=4542)
DCloud_JSON's avatar
DCloud_JSON 已提交
122
- `uni-upgrade-center - Admin`的介绍 [详情](https://ext.dcloud.net.cn/plugin?id=4470)
DCloud_JSON's avatar
DCloud_JSON 已提交
123

DCloud_JSON's avatar
DCloud_JSON 已提交
124 125 126 127 128
#### 6.意见反馈
- 客户端[详情](https://ext.dcloud.net.cn/plugin?id=50)
- admin端[详情](https://ext.dcloud.net.cn/plugin?id=4992)

#### 7.指纹识别模块
DCloud_JSON's avatar
DCloud_JSON 已提交
129 130
- `manifest.json` App模块配置 --> `Fingerprint`指纹识别

DCloud_JSON's avatar
DCloud_JSON 已提交
131
#### 8.消息推送模块
DCloud_JSON's avatar
DCloud_JSON 已提交
132 133
- `manifest.json` App模块配置 --> `push`消息推送

DCloud_JSON's avatar
DCloud_JSON 已提交
134 135 136 137 138 139 140 141
#### 9.隐私政策弹框
根据工业和信息化部关于开展APP侵害用户权益专项整治要求,App提交到应用市场必须满足以下条件:
- 应用启动运行时需弹出隐私政策协议,说明应用采集用户数据
- 应用不能强制要求用户授予权限,即不能“不给权限不让用”
+ 如不希望应用启动时申请“读写手机存储”和“访问设备信息”权限,请参考:https://ask.dcloud.net.cn/article/36549

配置弹出“隐私协议和政策”打开项目的manifest.json文件,切换到“源码视图”项
`manifest.json` -> `app-plus` -> `privacy` 节点下添加 prompt节点
142
```js
DCloud_JSON's avatar
DCloud_JSON 已提交
143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
"privacy" : {
	"prompt" : "template",
	"template" : {
		"title" : "服务协议和隐私政策",
		"message" : "  请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href=\"https://ask.dcloud.net.cn/protocol.html\">《服务协议》</a>和<a href=\"https://ask.dcloud.net.cn/protocol.html\">《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
		"buttonAccept" : "同意",
		"buttonRefuse" : "暂不同意"
	}
}
```
- prompt
  字符串类型,必填,隐私政策提示框配置策略,可取值template、custom、none,默认值为none
  + template
     使用原生提示框模板,可自定义标题、内容已经按钮上的文本
  + custom
     自定义隐私政策提示框,uni-app项目中推荐使用nvue页面进行自定义,5+ APP使用html页面进行自定义
  + none
    不弹出隐私政策提示框
- template
  json格式,可选,模板提示框上显示的内容
	+ title
	  模板提示框上的标题,默认为“服务协议和隐私政策”
	+ message
	  模板提示框上的内容,richtext类型字符串,支持a/font/br等节点,点击a链接会调用内置页面打开其href属性中链接地址。
	  **注意:务必配置此提示内容,或参考上面示例内容并修改《服务协议》和《隐私政策》链接地址**
	+ buttonAccept
	  模板提示框上接受按钮的文本,默认值为“我知道了”
	+ buttonRefuse
	  模板提示框上拒绝按钮的文本,默认不显示此按钮
	+ second
	  HBuilderX3.1.12+版本新增支持隐私提示框二次确认提示,用于配置二次确认提示框显示内容,message属性值不为空时弹出二次确认提示框
		+ title 二次确认提示框上的标题
		+ message 二次确认提示框上的内容,支持richtext类型字符串
		+ buttonAccept 二次确认提示框上接受按钮的文本
		+ buttonRefuse 二次确认提示框上拒绝按钮的文本
DCloud_JSON's avatar
DCloud_JSON 已提交
178

DCloud_JSON's avatar
DCloud_JSON 已提交
179
> 更多Android平台隐私与政策提示框配置方法,[详情](https://ask.dcloud.net.cn/article/36937)
DCloud_JSON's avatar
DCloud_JSON 已提交
180

DCloud_JSON's avatar
DCloud_JSON 已提交
181
##### 注意:
DCloud_JSON's avatar
DCloud_JSON 已提交
182 183
1. 最新的华为应用市场要求,隐私政策提示框上接受按钮的文本,必须为“同意”而不能是其他有歧义的文字。
2. 配置后提交云端打包后生效。理论上绝大部分和`manifest.json`生效相关的配置均需要提交云打包后生效
DCloud_JSON's avatar
DCloud_JSON 已提交
184

185
#### 10.拦截器改造后的uniCloud
186
1. Debug,调试期间开启Debug。接口一旦fail就会弹出真实错误信息。否则将弹出,系统错误请稍后再试!
187
```js
188 189 190 191 192 193 194 195 196 197 198 199
	if(Debug){
		console.log(e);
		uni.showModal({
			content: JSON.stringify(e),
			showCancel: false
		});
	}
```
2. 断网自动重试,当callFunction为fail时检测是否因断网引起。如果是会提醒用户并且会在恢复网络之后自动重新发起请求
3. 常规的errCoder自动执行对应程序,如token无效/过期自动跳转到登陆页面。
4. token自动续期。

DCloud_JSON's avatar
DCloud_JSON 已提交
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273
#### 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);
			},
		})
	})
```

274 275 276 277 278 279 280 281
### 12. 关于升级
- 项目升级

	uni-starter遵循uni-app的插件模块化规范,即:[uni_modules](https://uniapp.dcloud.io/uni_modules) 。他是个项目类型的插件。在项目的根目录下有一个符合uni_modules规范的package.json文件,在这个文件右键-从插件市场更新即可更新该插件。
	
- 插件升级

	非项目类型的uni_modules插件,是项目根目录下的uni_modules目录下。以插件ID为插件文件夹命名,在该目录右键也会看到“从插件市场更新”选项,点击即可更新该插件。
282

DCloud_JSON's avatar
DCloud_JSON 已提交
283 284
### 应用启动时序介绍
文件路径: App.vue
285
```js
DCloud_JSON's avatar
DCloud_JSON 已提交
286 287 288 289 290 291 292 293 294
	import initApp from '@/common/appInit.js';
	export default {
		onLaunch: function() {
			initApp();
		}
	}
```
onLaunch生命周期执行了
1. 全局监听clientDB的err事件,
DCloud_JSON's avatar
DCloud_JSON 已提交
295 296 297
	- 判断是否为token过期失效等需要重新登录的问题。自动跳转到登录页面
	- 检测本地的token是否有效(存在且并未过期)否则跳转到登录页面
2. 预登录一键登录功能
DCloud_JSON's avatar
DCloud_JSON 已提交
298 299 300 301 302 303
3. 执行了initApp()包含以下操作
	1. 读取uni-starter.config并挂载到globalData的config下
	2. 读取应用版本号,并存到globalData下
	3. 检查是否有可更新的应用版本,决定是否启动在线更新版本
	4. 监听设备的网络变化并以uni.showToast APi的方式提醒用户
	5. 使用[拦截器](https://uniapp.dcloud.io/api/interceptor?id=addinterceptor) 实现
DCloud_JSON's avatar
DCloud_JSON 已提交
304
		- 页面路由拦截,配置需强制登录的页面;打开时检测,如果token无效就自动跳转到登录页
DCloud_JSON's avatar
DCloud_JSON 已提交
305 306 307
		- 优雅实现:自动引导打开`选择图片`所需要的权限。当调用`uni.chooseImage`时检测到无权限自动开启引导。并不是在每次调用接口时处理这类问题,你可以参考该例子做更多该类场景的处理。uni-starter也会持续完善


DCloud_JSON's avatar
DCloud_JSON 已提交
308 309
##### 配置文件
uni-starter提供了uni-starter.config.js,可指定该应用是否强制登录才能进入首页,可配置选择登录注册方式以及不同方式的优先级等。配置项内容如下:
310
```js
DCloud_JSON's avatar
DCloud_JSON 已提交
311 312 313 314 315 316 317 318
module.exports = {
	"h5": {
		"url": "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com", //	前端网页托管的域名
		 // 在h5端全局悬浮引导用户下载app的功能 更多自定义要求在/common/openApp.js中修改
		"openApp": {
			//点击悬浮下载栏后打开的网页链接
			"openUrl": 'https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.android.qqdownloader&info=6646FD239A6EBA9E2DEE5DFC7E18D867',
			//左侧显示的应用名称
319
			"appname": 'uni-starter',
DCloud_JSON's avatar
DCloud_JSON 已提交
320 321 322 323 324 325 326
			//应用的图标
			"logo": './static/logo.png',
		}
	},
	"mp": {
		"weixin": {
			//微信小程序原始id,微信小程序分享时
DCloud_JSON's avatar
DCloud_JSON 已提交
327
			"id": "gh_132465798"
DCloud_JSON's avatar
DCloud_JSON 已提交
328 329 330
		}
	},
	"router": {
DCloud_JSON's avatar
DCloud_JSON 已提交
331
		//配置需要路由拦截的页面地址,在打开这些页面之前会自动检查(无需联网)uni_id_token的值,如果token无效就自动跳转到登录页
DCloud_JSON's avatar
DCloud_JSON 已提交
332 333 334 335
		"needLogin": [
			"/pages/ucenter/userinfo/userinfo",
			"/uni_modules/uni-news-favorite/pages/uni-news-favorite/list",
		],
DCloud_JSON's avatar
DCloud_JSON 已提交
336
		"login": ["smsCode","univerify", "username", "weixin", "apple"],
DCloud_JSON's avatar
DCloud_JSON 已提交
337
		/* 
DCloud_JSON's avatar
DCloud_JSON 已提交
338 339
			这里会根据数组的第0项,决定登录方式的第一优先级是哪种登录方式。
			所有你希望拥有的登录方式这里都需要一一列举,未列举到的或设备环境不支持的登录方式将被隐藏。
DCloud_JSON's avatar
DCloud_JSON 已提交
340
			如果你需要在不同平台有不同的配置,直接用条件编译即可。
DCloud_JSON's avatar
DCloud_JSON 已提交
341 342 343 344 345
		*/
	},
	//关于应用
	"about": {
		//应用名称
346
		"appName": "uni-starter",
DCloud_JSON's avatar
DCloud_JSON 已提交
347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373
		//应用logo
		"logo": "/static/logo.png",
		//公司名称
		"company": "数字天堂(北京)网络技术有限公司",
		//口号
		"slogan": "为开发而生",
		//政策协议
		"agreements": [{
				"title": "用户服务协议", //协议名称
				"url": "https://ask.dcloud.net.cn/protocol.html" //对应的网络链接
			},
			{
				"title": "隐私政策",
				"url": "https://ask.dcloud.net.cn/protocol.html"
			}
		],
		//应用的链接,用于分享到第三方平台和生成关于我们页的二维码
		"download": "https://m3w.cn/uniapp"
	},
	//用于打开应用市场评分界面
	"marketId":{
		"ios":"id1417078253",
		"android":"123456"
	}
}
```

DCloud_JSON's avatar
DCloud_JSON 已提交
374
#### 目录结构@catalogue
DCloud_JSON's avatar
DCloud_JSON 已提交
375
<pre>
376
uni-starter
DCloud_JSON's avatar
DCloud_JSON 已提交
377 378 379
├─uniCloud-aliyun	
│	├─cloudfunctions 云函数目录
│	|	├─common 公共模块
380
│	│	|	├─uni-config-center		uni-starter的服务端配置中心,项目所有云函数的配置在这里填写 <a target="_blank" href="https://ext.dcloud.net.cn/plugin?id=4425">详情</a>
DCloud_JSON's avatar
DCloud_JSON 已提交
381 382
│	│	|	|	├─index.js			config-center入口文件
│	│	|	|	└─uni-id			uni-id模块配置目录
DCloud_JSON's avatar
DCloud_JSON 已提交
383
│	│	|	|		├─config.json	uni-id对应的配置数据:微信登录、一键登录、短信验证码登录等key都在这里填写<a target="_blank" href="https://ext.dcloud.net.cn/plugin?id=4425">详情</a>
DCloud_JSON's avatar
DCloud_JSON 已提交
384 385 386
│	│	|	|		└─file.cert		uni-id依赖的配置文件,假如你使用微信发红包功能,需要的证书文件就是放到这里
│	|	|	└───uni-id				uni-id用户体系 <a target="_blank" href="https://uniapp.dcloud.io/uniCloud/uni-id">详情</a>
│	|	├─uni-analyse-searchhot		云端一体搜索模板依赖的云函数 <a target="_blank" href="https://ext.dcloud.net.cn/plugin?id=3851">详情</a>
387
│	|	└─uni-id-cf				用户中心云函数,实现用户注册、修改密码、发送验证码、快捷登录(微信、短信、账户、一键登录)
DCloud_JSON's avatar
DCloud_JSON 已提交
388 389
│	└──database						云数据目录
│		├─db_init.json				db_init.json初始化数据库文件,其中不再包含schema <a target="_blank" href="https://uniapp.dcloud.net.cn/uniCloud/hellodb?id=db-init">详情</a>
390 391 392 393 394 395 396 397 398 399
│		├─opendb-app-versions.schema.json		应用版本,表结构文件
│		├─opendb-banner.schema.json	        	横幅数据表,表结构文件
│		├─opendb-feedback.schema.json	        意见反馈表,表结构文件
│		├─opendb-news-articles.schema.json	    新闻文章表,表结构文件
│		├─opendb-news-categories.schema.json	新闻分类表,表结构文件
│		├─opendb-news-comments.schema.json		新闻评论表,表结构文件
│		├─opendb-news-favorite.schema.json		新闻收藏表,表结构文件
│		├─opendb-search-hot.schema.json			热门搜索表,表结构文件
│		├─opendb-search-log.schema.json			搜索记录表,表结构文件
│		├─opendb-verify-codes.schema.json		验证码表,表结构文件
DCloud_JSON's avatar
DCloud_JSON 已提交
400
│		├─uni-id-log.schema.json	        	登录日志表,表结构文件
401 402
│		├─uni-id-scores.schema.json	        	用户积分表,表结构文件
│		└─uni-id-users.schema.json	        	用户表,表结构文件
DCloud_JSON's avatar
DCloud_JSON 已提交
403
├─pages										业务页面文件存放的目录
DCloud_JSON's avatar
DCloud_JSON 已提交
404
│	├─common						
DCloud_JSON's avatar
DCloud_JSON 已提交
405 406
│	│	└─webview							webview目录
│	│		└─webview.vue					webview页面	用于实现跨端的web页面浏览
DCloud_JSON's avatar
DCloud_JSON 已提交
407
│	├─grid
DCloud_JSON's avatar
DCloud_JSON 已提交
408
│	│	└─grid.vue	 						带宫格和banner的示例页面
DCloud_JSON's avatar
DCloud_JSON 已提交
409
│	├─list
DCloud_JSON's avatar
DCloud_JSON 已提交
410
│	│	├─list.vue	 						新闻列表
DCloud_JSON's avatar
DCloud_JSON 已提交
411
│	│	├─search
DCloud_JSON's avatar
DCloud_JSON 已提交
412 413
│	│	│	└─search						云端一体搜索插件
│	│	└─detail.vue						新闻详情
DCloud_JSON's avatar
DCloud_JSON 已提交
414
│	├─ucenter
DCloud_JSON's avatar
DCloud_JSON 已提交
415
│	│	├─about								关于我们
DCloud_JSON's avatar
DCloud_JSON 已提交
416
│	│	│	└─about
DCloud_JSON's avatar
DCloud_JSON 已提交
417 418
│	│	├─login-page						登录模块
│	|	|	├─common						登录模块公共库
DCloud_JSON's avatar
DCloud_JSON 已提交
419 420
│	│	│	│	├─login-page.css			公共样式库
│	│	│	│	├─login-page.mixin.js		公共mixin
DCloud_JSON's avatar
DCloud_JSON 已提交
421 422 423 424
│	│	│	│	└─loginSuccess.js			公共登录成功后操作
│	|	|	├─index							短信验证码登录,手机号码输入页面
│	|	|	├─phone-code					短信验证码登录,验证码输入页面
│	|	|	├─pwd-login						账户密码登录
DCloud_JSON's avatar
DCloud_JSON 已提交
425 426
│	|	|	├─pwd-retrieve					密码重置
│	│	│	└─register						注册账户模块
DCloud_JSON's avatar
DCloud_JSON 已提交
427 428
│	│	│		├─validator.js
│	│	│		└─register.vue
DCloud_JSON's avatar
DCloud_JSON 已提交
429
│	│	├─read-news-log						新闻阅读记录
DCloud_JSON's avatar
DCloud_JSON 已提交
430
│	│	│	└─read-news-log
DCloud_JSON's avatar
DCloud_JSON 已提交
431
│	│	├─settings						
DCloud_JSON's avatar
DCloud_JSON 已提交
432
│	│	│	├─dc-push
DCloud_JSON's avatar
DCloud_JSON 已提交
433 434 435
│	│	│	│	└─push.js					push权限操作SDK
│	│	│	└─settings.vue					app设置
│	│	├─userinfo							用户个人信息
DCloud_JSON's avatar
DCloud_JSON 已提交
436
│	│	│	├─bind-mobile
DCloud_JSON's avatar
DCloud_JSON 已提交
437 438
│	│	│	│	└─bind-mobile.vue			绑定手机号码
│	│	│	├─limeClipper					图片裁剪插件,来源[limeClipper](https://ext.dcloud.net.cn/plugin?id=3594) @作者: 陌上华年
DCloud_JSON's avatar
DCloud_JSON 已提交
439 440 441 442 443 444 445 446
│	│	│	│	├─images
│	│	│	│	│	├─photo.svg
│	│	│	│	│	└─rotate.svg
│	│	│	│	├─index.css
│	│	│	│	├─limeClipper.vue
│	│	│	│	├─README.md
│	│	│	│	└─utils.js
│	│	│	├─main.js
447
│	│	│	├─cropImage.vue	引用limeClipper的图片裁剪模块,为了方便二开可能会出现兼容`vue``nvue`,所以做成了`页面`而不是`组件`
DCloud_JSON's avatar
DCloud_JSON 已提交
448
│	│	│	└─userinfo.vue
DCloud_JSON's avatar
DCloud_JSON 已提交
449
│	|	└─ucenter.vue						用户中心
DCloud_JSON's avatar
DCloud_JSON 已提交
450 451 452
│	|
├─static	 						存放应用引用的本地静态资源(如图片、视频等)的目录,<b>注意:</b>静态资源只能存放于此
├─uni_modules						存放[uni_module](/uni_modules)规范的插件。
453
├─uni_modules_tools					uni_modules插件上传辅助脚本 <a href="https://ext.dcloud.net.cn/plugin?id=5256">详情</a>
DCloud_JSON's avatar
DCloud_JSON 已提交
454 455
├─main.js							Vue初始化入口文件
├─App.vue							应用配置,用来配置App全局样式以及监听 <a href="/collocation/frame/lifecycle?id=应用生命周期">应用生命周期</a>
DCloud_JSON's avatar
DCloud_JSON 已提交
456
├─uni-starter.config				uni-starter的前端的配置文件,项目所有模块的配置在这里填写。详见该文件的代码注释。
DCloud_JSON's avatar
DCloud_JSON 已提交
457 458
├─manifest.json	 					配置应用名称、appid、logo、版本等打包信息,<a href="/collocation/manifest">详见</a>
└─pages.json						配置页面路由、导航条、选项卡等页面类信息,<a href="/collocation/pages">详见</a>
DCloud_JSON's avatar
DCloud_JSON 已提交
459
</pre>
460
完整的uni-app目录结构[详情](https://uniapp.dcloud.io/frame?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84)
DCloud_JSON's avatar
DCloud_JSON 已提交
461

462 463 464 465 466
### 常见API示范
1. 判断当前用户是否拥有某角色`uniIDHasRole` 演示页面:`/pages/grid/grid` [API文档详情:](https://uniapp.dcloud.io/api/global?id=uniidhasrole)
2. 指纹解锁、人脸解锁  演示页面:`/pages/ucenter/settings/settings` [API文档详情:](https://uniapp.dcloud.io/api/system/authentication)


DCloud_JSON's avatar
DCloud_JSON 已提交
467 468
### 注意事项
1. 真机运行需要制作自定义基座,制作后选择运行到自定义基座
469
2. 苹果登录的图标,需要满足苹果应用市场的审核规范请勿随便修改;如需修改请先阅读:[Sign in with Apple Button](https://appleid.apple.com/signinwithapple/button)
DCloud_JSON's avatar
DCloud_JSON 已提交
470
3. 应用登录功能,默认不勾选同意隐私权限是响应安卓应用市场的规范;请勿修改该逻辑。
DCloud_JSON's avatar
DCloud_JSON 已提交
471

DCloud_JSON's avatar
DCloud_JSON 已提交
472
### FAQ:常见问题
DCloud_JSON's avatar
DCloud_JSON 已提交
473
1. 提示“公共模块uni-id缺少配置信息”解决方案:在cloudfunctions右键‘上传所有云函数、公共模块及actions’之后,需要在cloudfunctions -> common -> uni-config-center 目录单独上传一次,右键‘上传公共模块’。
DCloud_JSON's avatar
DCloud_JSON 已提交
474 475 476
2. 本项目代码可以商用,无需为DCloud付费。但不能把本项目的代码改造用于非uni-app和uniCloud的技术体系。即,不能将后台改成php、java等其他后台,这将违反使用许可协议。

### 第三方插件(感谢插件作者,排名不分前后):
DCloud_JSON's avatar
DCloud_JSON 已提交
477
1. 图片裁剪 [limeClipper](https://ext.dcloud.net.cn/plugin?id=3594) @作者: 陌上华年
DCloud_JSON's avatar
DCloud_JSON 已提交
478
2. 二维码生成 [Sansnn-uQRCode](https://ext.dcloud.net.cn/plugin?id=1287) @作者: 3snn
479
3. clipboard.js [clipboard](https://clipboardjs.com/)