├── .gitattributes
├── App.vue
├── README.md
├── common
    ├── uni.css
    └── util.js
├── main.js
├── manifest.json
├── pages.json
├── pages
    ├── addFunction
    │   └── addFunction.vue
    ├── chooseLib
    │   └── chooseLib.vue
    ├── databaseGuide
    │   └── databaseGuide.vue
    ├── deployFunctions
    │   └── deployFunctions.vue
    ├── index
    │   └── index.vue
    ├── openapi
    │   └── openapi.vue
    ├── storageConsole
    │   └── storageConsole.vue
    └── userConsole
    │   └── userConsole.vue
├── static
    ├── code-db-inc-dec.png
    ├── code-db-onAdd.png
    ├── code-db-onQuery.png
    ├── code-db-onRemove.png
    ├── code-func-sum.png
    ├── console-entrance.png
    ├── create-collection.png
    ├── logo.png
    └── user-unlogin.png
├── store
    └── index.js
└── style
    └── guide.wxss


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 | 	onLaunch: function() {
 4 | 		console.log('App Launch');
 5 | 		if (!wx.cloud) {
 6 | 			console.error('请使用 2.2.3 或以上的基础库以使用云能力');
 7 | 		} else {
 8 | 			wx.cloud.init({
 9 | 				traceUser: true
10 | 			});
11 | 		}
12 | 	},
13 | 	onShow: function() {
14 | 		console.log('App Show');
15 | 	},
16 | 	onHide: function() {
17 | 		console.log('App Hide');
18 | 	}
19 | };
20 | </script>
21 | 
22 | <style>
23 | /*每个页面公共css */
24 | /* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
25 | @import './common/uni.css';
26 | 
27 | .flexBox {
28 | 	display: flex;
29 | }
30 | 
31 | .flex-center {
32 | 	align-items: center;
33 | 	justify-content: center;
34 | }
35 | 
36 | .flexItem {
37 | 	flex: 1;
38 | }
39 | 
40 | .uni-input {
41 | 	border: 1upx solid #ccc;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 微信小程序云开发DEMO的uni-app版本
 2 | 
 3 | 因近期在开发一个微信小程序，涉及到微信小程序云开发，搜索DCloud社区，并无相关案例。
 4 | 
 5 | 经过一番折腾，解决方案如下：
 6 | 第一步：使用微信开发者工具，创建一个云开发的项目，创建云函数并上传（此项目作为开发云函数专用）；
 7 | 
 8 | 第二步：创建uni-app项目，并将上面云函数项目的**appid**，填入到此项目里，即可关联并直接使用wx云函数。
 9 | 
10 | 至此，就可以正常使用HbuilderX愉快的开发啦~
11 | 
12 | 为了方便理解，我将微信小程序云开发DMEO，转换成uni-app版本，大家可以参考一下（见文末：miniprogram_cloud.zip）。
13 | 
14 | 下载后，填入对应微信小程序appid即可（**运行前，需新建或使用原小程序项目，配置云开发环境，不然无法使用云函数，切记~**）
15 | 
16 | 与小程序开发异同：
17 | **相同之处：** 云函数的使用，与小程序里面完全一致。
18 | **不同之处：** uni-app里没有const app = getApp()，因此我修改为vuex来存储opendid及其他信息
19 | 
20 | 最后，如果有问题，欢迎指正或回帖~~~
21 | 
22 |  
23 | 
24 | 
25 |   
26 | 


--------------------------------------------------------------------------------
/common/uni.css:
--------------------------------------------------------------------------------
   1 | @font-face {
   2 | 	font-family: uniicons;
   3 | 	font-weight: normal;
   4 | 	font-style: normal;
   5 | 	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
   6 | }
   7 | 
   8 | /*通用 */
   9 | view{
  10 | 	font-size:28upx; 
  11 | 	line-height:1.8;
  12 | }
  13 | progress, checkbox-group{
  14 | 	width: 100%;
  15 | }
  16 | form {
  17 | 	width: 100%;
  18 | }
  19 | .uni-flex {
  20 | 	display: flex;
  21 | 	flex-direction: row;
  22 | }
  23 | .uni-flex-item {
  24 | 	flex: 1;
  25 | }
  26 | .uni-row {
  27 | 	flex-direction: row;
  28 | }
  29 | .uni-column {
  30 | 	flex-direction: column;
  31 | }
  32 | .uni-link{
  33 | 	color:#576B95;
  34 | 	font-size:26upx;
  35 | }
  36 | .uni-center{
  37 | 	text-align:center;
  38 | }
  39 | .uni-inline-item{
  40 | 	display: flex;
  41 | 	flex-direction: row;
  42 | 	align-items:center;
  43 | }
  44 | .uni-inline-item text{
  45 | 	margin-right: 20upx;
  46 | }
  47 | .uni-inline-item text:last-child{
  48 | 	margin-right: 0upx;
  49 | 	margin-left: 20upx;
  50 | }
  51 | 
  52 | /* page */
  53 | .uni-page-head{
  54 | 	padding:35upx; 
  55 | 	text-align: center;
  56 | }
  57 | .uni-page-head-title {
  58 | 	display: inline-block;
  59 | 	padding: 0 40upx;
  60 | 	font-size: 30upx;
  61 | 	height: 88upx;
  62 | 	line-height: 88upx;
  63 | 	color: #BEBEBE;
  64 | 	box-sizing: border-box;
  65 | 	border-bottom: 2upx solid #D8D8D8;
  66 | }
  67 | .uni-page-body {
  68 | 	width: 100%;
  69 | 	flex-grow: 1;
  70 | 	overflow-x: hidden;
  71 | }
  72 | .uni-padding-wrap{
  73 | 	width:690upx;
  74 | 	padding:0 30upx;
  75 | }
  76 | .uni-word {
  77 | 	text-align: center;
  78 | 	padding:200upx 100upx;
  79 | }
  80 | .uni-title {
  81 | 	font-size:30upx;
  82 | 	font-weight:500;
  83 | 	padding:20upx 0;
  84 | 	line-height:1.5;
  85 | }
  86 | .uni-text{
  87 | 	font-size:28upx;
  88 | }
  89 | .uni-title text{
  90 | 	font-size:24upx; 
  91 | 	color:#888;
  92 | }
  93 | 
  94 | .uni-text-gray{
  95 | 	color: #ccc;
  96 | }
  97 | .uni-text-small {
  98 | 	font-size:24upx;
  99 | }
 100 | .uni-common-mb{
 101 | 	margin-bottom:30upx;
 102 | }
 103 | .uni-common-pb{
 104 | 	padding-bottom:30upx;
 105 | }
 106 | .uni-common-pl{
 107 | 	padding-left:30upx;
 108 | }
 109 | .uni-common-mt{
 110 | 	margin-top:30upx;
 111 | }
 112 | /* 背景色 */
 113 | .uni-bg-red{
 114 | 	background:#F76260; color:#FFF;
 115 | }
 116 | .uni-bg-green{
 117 | 	background:#09BB07; color:#FFF;
 118 | }
 119 | .uni-bg-blue{
 120 | 	background:#007AFF; color:#FFF;
 121 | }
 122 | /* 标题 */
 123 | .uni-h1 {font-size: 80upx; font-weight:700;}
 124 | .uni-h2 {font-size: 60upx; font-weight:700;}
 125 | .uni-h3 {font-size: 48upx; font-weight:700;}
 126 | .uni-h4 {font-size: 36upx; font-weight:700;}
 127 | .uni-h5 {font-size: 28upx; color: #8f8f94;}
 128 | .uni-h6 {font-size: 24upx; color: #8f8f94;}
 129 | .uni-bold{font-weight:bold;}
 130 | 
 131 | /* 文本溢出隐藏 */
 132 | .uni-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
 133 | 
 134 | /* 竖向百分百按钮 */
 135 | .uni-btn-v{
 136 | 	padding:10upx 0;
 137 | }
 138 | .uni-btn-v button{margin:20upx 0;}
 139 | 
 140 | /* 表单 */
 141 | .uni-form-item{
 142 | 	display:flex;
 143 | 	width:100%;
 144 | 	padding:10upx 0;
 145 | }
 146 | .uni-form-item .title{
 147 | 	padding:10upx 25upx;
 148 | }
 149 | .uni-label {
 150 | 	width: 210upx;
 151 | 	word-wrap: break-word;
 152 | 	word-break: break-all;
 153 | 	text-indent:20upx;
 154 | }
 155 | .uni-input {
 156 | 	height: 50upx;
 157 | 	padding: 15upx 25upx;
 158 | 	line-height:50upx;
 159 | 	font-size:28upx;
 160 | 	background:#FFF;
 161 | 	flex: 1;
 162 | }
 163 | radio-group, checkbox-group{
 164 | 	width:100%;
 165 | }
 166 | radio-group label, checkbox-group label{
 167 | 	padding-right:20upx;
 168 | }
 169 | .uni-form-item .with-fun{
 170 | 	display:flex; 
 171 | 	flex-wrap:nowrap; 
 172 | 	background:#FFFFFF;
 173 | }
 174 | .uni-form-item .with-fun .uni-icon{
 175 | 	width:40px; 
 176 | 	height:80upx; 
 177 | 	line-height:80upx; 
 178 | 	flex-shrink:0;
 179 | }
 180 | 
 181 | /* loadmore */
 182 | .uni-loadmore{
 183 | 	height:80upx;
 184 | 	line-height:80upx;
 185 | 	text-align:center;
 186 | 	padding-bottom:30upx;
 187 | }
 188 | /*数字角标*/
 189 | .uni-badge,
 190 | .uni-badge-default {
 191 | 	font-family: 'Helvetica Neue', Helvetica, sans-serif;
 192 | 	font-size: 12px;
 193 | 	line-height: 1;
 194 | 	display: inline-block;
 195 | 	padding: 3px 6px;
 196 | 	color: #333;
 197 | 	border-radius: 100px;
 198 | 	background-color: rgba(0, 0, 0, .15);
 199 | }
 200 | .uni-badge.uni-badge-inverted {
 201 | 	padding: 0 5px 0 0;
 202 | 	color: #929292;
 203 | 	background-color: transparent
 204 | }
 205 | .uni-badge-primary {
 206 | 	color: #fff;
 207 | 	background-color: #007aff
 208 | }
 209 | .uni-badge-blue.uni-badge-inverted,
 210 | .uni-badge-primary.uni-badge-inverted {
 211 | 	color: #007aff;
 212 | 	background-color: transparent
 213 | }
 214 | .uni-badge-green,
 215 | .uni-badge-success {
 216 | 	color: #fff;
 217 | 	background-color: #4cd964;
 218 | }
 219 | .uni-badge-green.uni-badge-inverted,
 220 | .uni-badge-success.uni-badge-inverted {
 221 | 	color: #4cd964;
 222 | 	background-color: transparent
 223 | }
 224 | .uni-badge-warning,
 225 | .uni-badge-yellow {
 226 | 	color: #fff;
 227 | 	background-color: #f0ad4e
 228 | }
 229 | .uni-badge-warning.uni-badge-inverted,
 230 | .uni-badge-yellow.uni-badge-inverted {
 231 | 	color: #f0ad4e;
 232 | 	background-color: transparent
 233 | }
 234 | .uni-badge-danger,
 235 | .uni-badge-red {
 236 | 	color: #fff;
 237 | 	background-color: #dd524d
 238 | }
 239 | .uni-badge-danger.uni-badge-inverted,
 240 | .uni-badge-red.uni-badge-inverted {
 241 | 	color: #dd524d;
 242 | 	background-color: transparent
 243 | }
 244 | .uni-badge-purple,
 245 | .uni-badge-royal {
 246 | 	color: #fff;
 247 | 	background-color: #8a6de9
 248 | }
 249 | .uni-badge-purple.uni-badge-inverted,
 250 | .uni-badge-royal.uni-badge-inverted {
 251 | 	color: #8a6de9;
 252 | 	background-color: transparent
 253 | }
 254 | 
 255 | /*折叠面板 */
 256 | .uni-collapse-content {
 257 | 	height: 0;
 258 | 	width: 100%;
 259 | 	overflow: hidden;
 260 | }
 261 | .uni-collapse-content.uni-active {
 262 | 	height: auto;
 263 | }
 264 | 
 265 | /*卡片视图 */
 266 | .uni-card {
 267 | 	background: #fff;
 268 | 	border-radius: 8upx;
 269 | 	margin:20upx 0;
 270 | 	position: relative;
 271 | 	box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3);
 272 | }
 273 | .uni-card-content {
 274 | 	font-size: 30upx;
 275 | }
 276 | .uni-card-content.image-view{
 277 |     width: 100%;
 278 |     margin: 0;
 279 | }
 280 | .uni-card-content-inner {
 281 | 	position: relative;
 282 | 	padding: 30upx;
 283 | }
 284 | .uni-card-footer,
 285 | .uni-card-header {
 286 | 	position: relative;
 287 | 	display: flex;
 288 | 	min-height: 50upx;
 289 | 	padding: 20upx 30upx;
 290 | 	justify-content: space-between;
 291 | 	align-items: center;
 292 | }
 293 | .uni-card-header {
 294 | 	font-size: 36upx;
 295 | }
 296 | .uni-card-footer {
 297 | 	color: #6d6d72;
 298 | }
 299 | .uni-card-footer:before,
 300 | .uni-card-header:after {
 301 | 	position: absolute;
 302 | 	top: 0;
 303 | 	right: 0;
 304 | 	left: 0;
 305 | 	height: 2upx;
 306 | 	content: '';
 307 | 	-webkit-transform: scaleY(.5);
 308 | 	transform: scaleY(.5);
 309 | 	background-color: #c8c7cc;
 310 | }
 311 | .uni-card-header:after {
 312 | 	top: auto;
 313 | 	bottom: 0;
 314 | }
 315 | .uni-card-media {
 316 | 	justify-content: flex-start;
 317 | }
 318 | .uni-card-media-logo {
 319 | 	height: 84upx;
 320 | 	width: 84upx;
 321 | 	margin-right: 20upx;
 322 | }
 323 | .uni-card-media-body {
 324 | 	height: 84upx;
 325 | 	display: flex;
 326 | 	flex-direction: column;
 327 | 	justify-content: space-between;
 328 | 	align-items: flex-start;
 329 | }
 330 | .uni-card-media-text-top {
 331 | 	line-height: 36upx;
 332 | 	font-size: 34upx;
 333 | }
 334 | .uni-card-media-text-bottom {
 335 | 	line-height: 30upx;
 336 | 	font-size: 28upx;
 337 | 	color: #8f8f94;
 338 | }
 339 | .uni-card-link {
 340 | 	color: #007AFF;
 341 | }
 342 | 
 343 | /* 列表 */
 344 | .uni-list {
 345 | 	background-color: #FFFFFF;
 346 | 	position: relative;
 347 | 	width: 100%;
 348 | 	display: flex;
 349 | 	flex-direction: column;
 350 | }
 351 | .uni-list:after {
 352 | 	position: absolute;
 353 | 	z-index: 10;
 354 | 	right: 0;
 355 | 	bottom: 0;
 356 | 	left: 0;
 357 | 	height: 1px;
 358 | 	content: '';
 359 | 	-webkit-transform: scaleY(.5);
 360 | 	transform: scaleY(.5);
 361 | 	background-color: #c8c7cc;
 362 | }
 363 | .uni-list::before {
 364 | 	position: absolute;
 365 | 	z-index: 10;
 366 | 	right: 0;
 367 | 	top: 0;
 368 | 	left: 0;
 369 | 	height: 1px;
 370 | 	content: '';
 371 | 	-webkit-transform: scaleY(.5);
 372 | 	transform: scaleY(.5);
 373 | 	background-color: #c8c7cc;
 374 | }
 375 | .uni-list-cell {
 376 | 	position: relative;
 377 | 	display: flex;
 378 | 	flex-direction: row;
 379 | 	justify-content: space-between;
 380 | 	align-items: center;
 381 | }
 382 | .uni-list-cell-hover {
 383 | 	background-color: #eee;
 384 | }
 385 | .uni-list-cell-pd {
 386 | 	padding: 22upx 30upx;
 387 | }
 388 | .uni-list-cell-left {
 389 | 	font-size:28upx;
 390 | 	padding: 0 30upx;
 391 | }
 392 | .uni-list-cell-db,
 393 | .uni-list-cell-right {
 394 | 	flex: 1;
 395 | }
 396 | .uni-list-cell::after {
 397 | 	position: absolute;
 398 |   z-index: 3;
 399 | 	right: 0;
 400 | 	bottom: 0;
 401 | 	left: 30upx;
 402 | 	height: 1px;
 403 | 	content: '';
 404 | 	-webkit-transform: scaleY(.5);
 405 | 	transform: scaleY(.5);
 406 | 	background-color: #c8c7cc;
 407 | }
 408 | .uni-list .uni-list-cell:last-child::after {
 409 | 	height: 0upx;
 410 | }
 411 | .uni-list-cell-last.uni-list-cell::after {
 412 | 	height: 0upx;
 413 | }
 414 | .uni-list-cell-divider {
 415 | 	position: relative;
 416 | 	display: flex;
 417 | 	color: #999;
 418 | 	background-color: #f7f7f7;
 419 | 	padding:15upx 20upx;
 420 | }
 421 | .uni-list-cell-divider::before {
 422 | 	position: absolute;
 423 | 	right: 0;
 424 | 	top: 0;
 425 | 	left: 0;
 426 | 	height: 1px;
 427 | 	content: '';
 428 | 	-webkit-transform: scaleY(.5);
 429 | 	transform: scaleY(.5);
 430 | 	background-color: #c8c7cc;
 431 | }
 432 | .uni-list-cell-divider::after {
 433 | 	position: absolute;
 434 | 	right: 0;
 435 | 	bottom: 0;
 436 | 	left: 0upx;
 437 | 	height: 1px;
 438 | 	content: '';
 439 | 	-webkit-transform: scaleY(.5);
 440 | 	transform: scaleY(.5);
 441 | 	background-color: #c8c7cc;
 442 | }
 443 | .uni-list-cell-navigate {
 444 | 	font-size:30upx;
 445 | 	padding: 22upx 30upx;
 446 | 	line-height: 48upx;
 447 | 	position: relative;
 448 | 	display: flex;
 449 | 	box-sizing: border-box;
 450 | 	width: 100%;
 451 | 	flex: 1;
 452 | 	justify-content: space-between;
 453 | 	align-items: center;
 454 | }
 455 | .uni-list-cell-navigate {
 456 | 	padding-right: 36upx;
 457 | }
 458 | .uni-navigate-badge {
 459 | 	padding-right: 50upx;
 460 | }
 461 | .uni-list-cell-navigate.uni-navigate-right:after {
 462 | 	font-family: uniicons;
 463 | 	content: '\e583';
 464 | 	position: absolute;
 465 | 	right: 24upx;
 466 | 	top: 50%;
 467 | 	color: #bbb;
 468 | 	-webkit-transform: translateY(-50%);
 469 | 	transform: translateY(-50%);
 470 | }
 471 | .uni-list-cell-navigate.uni-navigate-bottom:after {
 472 | 	font-family: uniicons;
 473 | 	content: '\e581';
 474 | 	position: absolute;
 475 | 	right: 24upx;
 476 | 	top: 50%;
 477 | 	color: #bbb;
 478 | 	-webkit-transform: translateY(-50%);
 479 | 	transform: translateY(-50%);
 480 | }
 481 | .uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
 482 | 	font-family: uniicons;
 483 | 	content: '\e580';
 484 | 	position: absolute;
 485 | 	right: 24upx;
 486 | 	top: 50%;
 487 | 	color: #bbb;
 488 | 	-webkit-transform: translateY(-50%);
 489 | 	transform: translateY(-50%);
 490 | }
 491 | .uni-collapse.uni-list-cell {
 492 | 	flex-direction: column;
 493 | }
 494 | .uni-list-cell-navigate.uni-active {
 495 | 	background: #eee;
 496 | }
 497 | .uni-list.uni-collapse {
 498 | 	box-sizing: border-box;
 499 | 	height: 0;
 500 | 	overflow: hidden;
 501 | }
 502 | .uni-collapse .uni-list-cell {
 503 | 	padding-left: 20upx;
 504 | }
 505 | .uni-collapse .uni-list-cell::after {
 506 | 	left: 52upx;
 507 | }
 508 | .uni-list.uni-active {
 509 | 	height: auto;
 510 | }
 511 | 
 512 | /* 三行列表 */
 513 | .uni-triplex-row {
 514 | 	display: flex;
 515 | 	flex: 1;
 516 | 	width: 100%;
 517 | 	box-sizing: border-box;
 518 | 	flex-direction: row;
 519 | 	padding: 22upx 30upx;
 520 | }
 521 | .uni-triplex-right,
 522 | .uni-triplex-left {
 523 | 	display: flex;
 524 | 	flex-direction: column;
 525 | }
 526 | .uni-triplex-left {
 527 | 	width: 84%;
 528 | }
 529 | .uni-triplex-left .uni-title{
 530 | 	padding:8upx 0;
 531 | }
 532 | .uni-triplex-left .uni-text, .uni-triplex-left .uni-text-small{color:#999999;}
 533 | .uni-triplex-right {
 534 | 	width: 16%;
 535 | 	text-align: right;
 536 | }
 537 | 
 538 | /* 图文列表 */
 539 | .uni-media-list {
 540 | 	padding: 22upx 30upx;
 541 | 	box-sizing: border-box;
 542 | 	display: flex;
 543 | 	width: 100%;
 544 | 	flex-direction: row;
 545 | }
 546 | .uni-navigate-right.uni-media-list {
 547 | 	padding-right: 74upx;
 548 | }
 549 | .uni-pull-right {
 550 | 	flex-direction: row-reverse;
 551 | }
 552 | .uni-pull-right>.uni-media-list-logo {
 553 | 	margin-right: 0upx;
 554 | 	margin-left: 20upx;
 555 | }
 556 | .uni-media-list-logo {
 557 | 	height: 84upx;
 558 | 	width: 84upx;
 559 | 	margin-right: 20upx;
 560 | }
 561 | .uni-media-list-logo image {
 562 | 	height: 100%;
 563 | 	width: 100%;
 564 | }
 565 | .uni-media-list-body {
 566 | 	height: 84upx;
 567 | 	display: flex;
 568 | 	flex: 1;
 569 | 	flex-direction: column;
 570 | 	justify-content: space-between;
 571 | 	align-items: flex-start;
 572 | 	overflow: hidden;
 573 | }
 574 | .uni-media-list-text-top {
 575 | 	width: 100%;
 576 | 	line-height: 36upx;
 577 | 	font-size: 30upx;
 578 | }
 579 | .uni-media-list-text-bottom {
 580 | 	width: 100%;
 581 | 	line-height: 30upx;
 582 | 	font-size: 26upx;
 583 | 	color: #8f8f94;
 584 | }
 585 | 
 586 | /* 九宫格 */
 587 | .uni-grid-9 {
 588 | 	background: #f2f2f2;
 589 | 	width: 750upx;
 590 | 	display: flex;
 591 | 	flex-direction: row;
 592 | 	flex-wrap: wrap;
 593 | 	border-top: 2upx solid #eee;
 594 | }
 595 | .uni-grid-9-item {
 596 | 	width: 250upx;
 597 | 	height: 200upx;
 598 | 	display: flex;
 599 | 	flex-direction: column;
 600 | 	align-items: center;
 601 | 	justify-content: center;
 602 | 	border-bottom: 2upx solid;
 603 | 	border-right: 2upx solid;
 604 | 	border-color: #eee;
 605 | 	box-sizing: border-box;
 606 | }
 607 | .no-border-right {
 608 | 	border-right: none;
 609 | }
 610 | .uni-grid-9-image {
 611 | 	width: 100upx;
 612 | 	height: 100upx;
 613 | }
 614 | .uni-grid-9-text {
 615 | 	width: 250upx;
 616 | 	line-height: 4upx;
 617 | 	height: 40upx;
 618 | 	text-align: center;
 619 | 	font-size: 30upx;
 620 | }
 621 | .uni-grid-9-item-hover {
 622 | 	background: rgba(0, 0, 0, 0.1);
 623 | }
 624 | 
 625 | /* 上传 */
 626 | .uni-uploader {
 627 | 	flex: 1;
 628 | 	flex-direction: column;
 629 | }
 630 | .uni-uploader-head {
 631 | 	display: flex;
 632 | 	flex-direction: row;
 633 | 	justify-content: space-between;
 634 | }
 635 | .uni-uploader-info {
 636 | 	color: #B2B2B2;
 637 | }
 638 | .uni-uploader-body {
 639 | 	margin-top: 16upx;
 640 | }
 641 | .uni-uploader__files {
 642 | 	display: flex;
 643 | 	flex-direction: row;
 644 | 	flex-wrap: wrap;
 645 | }
 646 | .uni-uploader__file {
 647 | 	margin: 10upx;
 648 | 	width: 210upx;
 649 | 	height: 210upx;
 650 | }
 651 | .uni-uploader__img {
 652 | 	display: block;
 653 | 	width: 210upx;
 654 | 	height: 210upx;
 655 | }
 656 | .uni-uploader__input-box {
 657 | 	position: relative;
 658 | 	margin:10upx;
 659 | 	width: 208upx;
 660 | 	height: 208upx;
 661 | 	border: 2upx solid #D9D9D9;
 662 | }
 663 | .uni-uploader__input-box:before,
 664 | .uni-uploader__input-box:after {
 665 | 	content: " ";
 666 | 	position: absolute;
 667 | 	top: 50%;
 668 | 	left: 50%;
 669 | 	-webkit-transform: translate(-50%, -50%);
 670 | 	transform: translate(-50%, -50%);
 671 | 	background-color: #D9D9D9;
 672 | }
 673 | .uni-uploader__input-box:before {
 674 | 	width: 4upx;
 675 | 	height: 79upx;
 676 | }
 677 | .uni-uploader__input-box:after {
 678 | 	width: 79upx;
 679 | 	height: 4upx;
 680 | }
 681 | .uni-uploader__input-box:active {
 682 | 	border-color: #999999;
 683 | }
 684 | .uni-uploader__input-box:active:before,
 685 | .uni-uploader__input-box:active:after {
 686 | 	background-color: #999999;
 687 | }
 688 | .uni-uploader__input {
 689 | 	position: absolute;
 690 | 	z-index: 1;
 691 | 	top: 0;
 692 | 	left: 0;
 693 | 	width: 100%;
 694 | 	height: 100%;
 695 | 	opacity: 0;
 696 | }
 697 | 
 698 | /*问题反馈*/
 699 | .feedback-title {
 700 | 	display: flex;
 701 | 	flex-direction: row;
 702 | 	justify-content: space-between;
 703 | 	align-items: center;
 704 | 	padding: 20upx;
 705 | 	color: #8f8f94;
 706 | 	font-size: 28upx;
 707 | }
 708 | .feedback-star-view.feedback-title {
 709 | 	justify-content: flex-start;
 710 | 	margin: 0;
 711 | }
 712 | .feedback-quick {
 713 | 	position: relative;
 714 | 	padding-right: 40upx;
 715 | }
 716 | .feedback-quick:after {
 717 | 	font-family: uniicons;
 718 | 	font-size: 40upx;
 719 | 	content: '\e581';
 720 | 	position: absolute;
 721 | 	right: 0;
 722 | 	top: 50%;
 723 | 	color: #bbb;
 724 | 	-webkit-transform: translateY(-50%);
 725 | 	transform: translateY(-50%);
 726 | }
 727 | .feedback-body {
 728 | 	background: #fff;
 729 | }
 730 | .feedback-textare {
 731 | 	height: 200upx;
 732 | 	font-size: 34upx;
 733 | 	line-height: 50upx;
 734 | 	width: 100%;
 735 | 	box-sizing: border-box;
 736 | 	padding: 20upx 30upx 0;
 737 | }
 738 | .feedback-input {
 739 | 	font-size: 34upx;
 740 | 	height: 50upx;
 741 | 	min-height: 50upx;
 742 | 	padding: 15upx 20upx;
 743 | 	line-height: 50upx;
 744 | }
 745 | .feedback-uploader {
 746 | 	padding: 22upx 20upx;
 747 | }
 748 | .feedback-star {
 749 | 	font-family: uniicons;
 750 | 	font-size: 40upx;
 751 | 	margin-left: 6upx;
 752 | }
 753 | .feedback-star-view {
 754 | 	margin-left: 20upx;
 755 | }
 756 | .feedback-star:after {
 757 | 	content: '\e408';
 758 | }
 759 | .feedback-star.active {
 760 | 	color: #FFB400;
 761 | }
 762 | .feedback-star.active:after {
 763 | 	content: '\e438';
 764 | }
 765 | .feedback-submit {
 766 | 	background: #007AFF;
 767 | 	color: #FFFFFF;
 768 | 	margin: 20upx;
 769 | }
 770 | 
 771 | /* input group */
 772 | .uni-input-group {
 773 | 	position: relative;
 774 | 	padding: 0;
 775 | 	border: 0;
 776 | 	background-color: #fff;
 777 | }
 778 | 
 779 | .uni-input-group:before {
 780 | 	position: absolute;
 781 | 	top: 0;
 782 | 	right: 0;
 783 | 	left: 0;
 784 | 	height: 2upx;
 785 | 	content: '';
 786 | 	transform: scaleY(.5);
 787 | 	background-color: #c8c7cc;
 788 | }
 789 | 
 790 | .uni-input-group:after {
 791 | 	position: absolute;
 792 | 	right: 0;
 793 | 	bottom: 0;
 794 | 	left: 0;
 795 | 	height: 2upx;
 796 | 	content: '';
 797 | 	transform: scaleY(.5);
 798 | 	background-color: #c8c7cc;
 799 | }
 800 | 
 801 | .uni-input-row {
 802 | 	position: relative;
 803 | 	display: flex;
 804 | 	flex-direction: row;
 805 | 	font-size:28upx;
 806 | 	padding: 22upx 30upx;
 807 | 	justify-content: space-between;
 808 | }
 809 | 
 810 | .uni-input-group .uni-input-row:after {
 811 | 	position: absolute;
 812 | 	right: 0;
 813 | 	bottom: 0;
 814 | 	left: 30upx;
 815 | 	height: 2upx;
 816 | 	content: '';
 817 | 	transform: scaleY(.5);
 818 | 	background-color: #c8c7cc;
 819 | }
 820 | 
 821 | .uni-input-row label {
 822 | 	line-height: 70upx;
 823 | }
 824 | 
 825 | /* textarea */
 826 | .uni-textarea{
 827 | 	width:100%;
 828 | 	background:#FFF;
 829 | }
 830 | .uni-textarea textarea{
 831 | 	width:96%;
 832 | 	padding:18upx 2%;
 833 | 	line-height:1.6;
 834 | 	font-size:28upx;
 835 | 	height:150upx;
 836 | }
 837 | 
 838 | /* tab bar */
 839 | .uni-tab-bar {
 840 | 	display: flex;
 841 | 	flex: 1;
 842 | 	flex-direction: column;
 843 | 	overflow: hidden;
 844 | 	height: 100%;
 845 | }
 846 | 
 847 | .uni-tab-bar .list {
 848 | 	width: 750upx;
 849 | 	height: 100%;
 850 | }
 851 | 
 852 | .uni-swiper-tab {
 853 | 	width: 100%;
 854 | 	white-space: nowrap;
 855 | 	line-height: 100upx;
 856 | 	height: 100upx;
 857 | 	border-bottom: 1px solid #c8c7cc;
 858 | }
 859 | 
 860 | .swiper-tab-list {
 861 | 	font-size: 30upx;
 862 | 	width: 150upx;
 863 | 	display: inline-block;
 864 | 	text-align: center;
 865 | 	color: #555;
 866 | }
 867 | 
 868 | .uni-tab-bar .active {
 869 | 	color: #007AFF;
 870 | }
 871 | 
 872 | .uni-tab-bar .swiper-box {
 873 | 	flex: 1;
 874 | 	width: 100%;
 875 | 	height: calc(100% - 100upx);
 876 | }
 877 | 
 878 | .uni-tab-bar-loading{
 879 | 	padding:20upx 0;
 880 | }
 881 | 
 882 | /* comment */
 883 | .uni-comment{padding:5rpx 0; display: flex; flex-grow:1; flex-direction: column;}
 884 | .uni-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0; width:100%; display: flex;}
 885 | .uni-comment-face{width:70upx; height:70upx; border-radius:100%; margin-right:20upx; flex-shrink:0; overflow:hidden;}
 886 | .uni-comment-face image{width:100%; border-radius:100%;}
 887 | .uni-comment-body{width:100%;}
 888 | .uni-comment-top{line-height:1.5em; justify-content:space-between;}
 889 | .uni-comment-top text{color:#0A98D5; font-size:24upx;}
 890 | .uni-comment-date{line-height:38upx; flex-direction:row; justify-content:space-between; display:flex !important; flex-grow:1;}
 891 | .uni-comment-date view{color:#666666; font-size:24upx; line-height:38upx;}
 892 | .uni-comment-content{line-height:1.6em; font-size:28upx; padding:8rpx 0;}
 893 | .uni-comment-replay-btn{background:#FFF; font-size:24upx; line-height:28upx; padding:5rpx 20upx; border-radius:30upx; color:#333 !important; margin:0 10upx;}
 894 | 
 895 | /* swiper msg */
 896 | .uni-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap; display:flex;}
 897 | .uni-swiper-msg-icon{width:50upx; margin-right:20upx;}
 898 | .uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
 899 | .uni-swiper-msg swiper{width:100%; height:50upx;}
 900 | .uni-swiper-msg swiper-item{line-height:50upx;}
 901 | 
 902 | /* product */
 903 | .uni-product-list {
 904 |     display: flex;
 905 |     width: 100%;
 906 |     flex-wrap: wrap;
 907 |     flex-direction: row;
 908 | }
 909 | 
 910 | .uni-product {
 911 |     padding: 20upx;
 912 |     display: flex;
 913 |     flex-direction: column;
 914 | }
 915 | 
 916 | .image-view {
 917 |     height: 330upx;
 918 |     width: 330upx;
 919 | 	margin:12upx 0;
 920 | }
 921 | 
 922 | .uni-product-image {
 923 |     height: 330upx;
 924 |     width: 330upx;
 925 | }
 926 | 
 927 | .uni-product-title {
 928 |     width: 300upx;
 929 |     word-break: break-all;
 930 |     display: -webkit-box;
 931 |     overflow: hidden;
 932 | 	line-height:1.5;
 933 |     text-overflow: ellipsis;
 934 |     -webkit-box-orient: vertical;
 935 |     -webkit-line-clamp: 2;
 936 | }
 937 | 
 938 | .uni-product-price {
 939 | 	margin-top:10upx;
 940 |     font-size: 28upx;
 941 | 	line-height:1.5;
 942 |     position: relative;
 943 | }
 944 | 
 945 | .uni-product-price-original {
 946 |     color: #e80080;
 947 | }
 948 | 
 949 | .uni-product-price-favour {
 950 |     color: #888888;
 951 |     text-decoration: line-through;
 952 |     margin-left: 10upx;
 953 | }
 954 | 
 955 | .uni-product-tip {
 956 |     position: absolute;
 957 |     right: 10upx;
 958 |     background-color: #ff3333;
 959 |     color: #ffffff;
 960 |     padding: 0 10upx;
 961 |     border-radius: 5upx;
 962 | }
 963 | 
 964 | /* timeline */
 965 | .uni-timeline {
 966 | 		margin: 35upx 0;
 967 | 		display: flex;
 968 | 		flex-direction: column;
 969 | 		position: relative;
 970 | 	}
 971 | 
 972 | 
 973 | 	.uni-timeline-item {
 974 | 		display: flex;
 975 | 		flex-direction: row;
 976 | 		position: relative;
 977 | 		padding-bottom: 20upx;
 978 | 		box-sizing: border-box;
 979 | 		overflow: hidden;
 980 | 
 981 | 	}
 982 | 
 983 | 	.uni-timeline-item .uni-timeline-item-keynode {
 984 | 		width: 160upx;
 985 | 		flex-shrink: 0;
 986 | 		box-sizing: border-box;
 987 | 		padding-right: 20upx;
 988 | 		text-align: right;
 989 | 		line-height: 65upx;
 990 | 	}
 991 | 
 992 | 	.uni-timeline-item .uni-timeline-item-divider {
 993 | 		flex-shrink: 0;
 994 | 		position: relative;
 995 | 		width: 30upx;
 996 | 		height: 30upx;
 997 | 		top: 15upx;
 998 | 		border-radius: 50%;
 999 | 		background-color: #bbb;
1000 | 	}
1001 | 
1002 | 
1003 | 
1004 | 	.uni-timeline-item-divider::before,
1005 | 	.uni-timeline-item-divider::after {
1006 | 		position: absolute;
1007 | 		left: 15upx;
1008 | 		width: 1upx;
1009 | 		height: 100vh;
1010 | 		content: '';
1011 | 		background: inherit;
1012 | 	}
1013 | 
1014 | 	.uni-timeline-item-divider::before {
1015 | 		bottom: 100%;
1016 | 	}
1017 | 
1018 | 	.uni-timeline-item-divider::after {
1019 | 		top: 100%;
1020 | 	}
1021 | 
1022 | 
1023 | 	.uni-timeline-last-item .uni-timeline-item-divider:after {
1024 | 		display: none;
1025 | 	}
1026 | 
1027 | 	.uni-timeline-first-item .uni-timeline-item-divider:before {
1028 | 		display: none;
1029 | 	}
1030 | 
1031 | 	.uni-timeline-item .uni-timeline-item-content {
1032 | 		padding-left: 20upx;
1033 | 	}
1034 | 	
1035 | 	.uni-timeline-last-item .bottom-border::after{
1036 | 		display: none;
1037 | 	}
1038 | 	
1039 | 	.uni-timeline-item-content .datetime{
1040 | 		color: #CCCCCC;
1041 | 	}
1042 | 	
1043 | 	/* 自定义节点颜色 */
1044 | 	.uni-timeline-last-item .uni-timeline-item-divider{
1045 | 		background-color: #1AAD19;
1046 | 	}
1047 |   
1048 |   
1049 | /* uni-icon */
1050 | 
1051 | .uni-icon {
1052 | 	font-family: uniicons;
1053 | 	font-size: 24px;
1054 | 	font-weight: normal;
1055 | 	font-style: normal;
1056 | 	line-height: 1;
1057 | 	display: inline-block;
1058 | 	text-decoration: none;
1059 | 	-webkit-font-smoothing: antialiased;
1060 | }
1061 | 
1062 | .uni-icon.uni-active {
1063 | 	color: #007aff;
1064 | }
1065 | 
1066 | .uni-icon-contact:before {
1067 | 	content: '\e100';
1068 | }
1069 | 
1070 | .uni-icon-person:before {
1071 | 	content: '\e101';
1072 | }
1073 | 
1074 | .uni-icon-personadd:before {
1075 | 	content: '\e102';
1076 | }
1077 | 
1078 | .uni-icon-contact-filled:before {
1079 | 	content: '\e130';
1080 | }
1081 | 
1082 | .uni-icon-person-filled:before {
1083 | 	content: '\e131';
1084 | }
1085 | 
1086 | .uni-icon-personadd-filled:before {
1087 | 	content: '\e132';
1088 | }
1089 | 
1090 | .uni-icon-phone:before {
1091 | 	content: '\e200';
1092 | }
1093 | 
1094 | .uni-icon-email:before {
1095 | 	content: '\e201';
1096 | }
1097 | 
1098 | .uni-icon-chatbubble:before {
1099 | 	content: '\e202';
1100 | }
1101 | 
1102 | .uni-icon-chatboxes:before {
1103 | 	content: '\e203';
1104 | }
1105 | 
1106 | .uni-icon-phone-filled:before {
1107 | 	content: '\e230';
1108 | }
1109 | 
1110 | .uni-icon-email-filled:before {
1111 | 	content: '\e231';
1112 | }
1113 | 
1114 | .uni-icon-chatbubble-filled:before {
1115 | 	content: '\e232';
1116 | }
1117 | 
1118 | .uni-icon-chatboxes-filled:before {
1119 | 	content: '\e233';
1120 | }
1121 | 
1122 | .uni-icon-weibo:before {
1123 | 	content: '\e260';
1124 | }
1125 | 
1126 | .uni-icon-weixin:before {
1127 | 	content: '\e261';
1128 | }
1129 | 
1130 | .uni-icon-pengyouquan:before {
1131 | 	content: '\e262';
1132 | }
1133 | 
1134 | .uni-icon-chat:before {
1135 | 	content: '\e263';
1136 | }
1137 | 
1138 | .uni-icon-qq:before {
1139 | 	content: '\e264';
1140 | }
1141 | 
1142 | .uni-icon-videocam:before {
1143 | 	content: '\e300';
1144 | }
1145 | 
1146 | .uni-icon-camera:before {
1147 | 	content: '\e301';
1148 | }
1149 | 
1150 | .uni-icon-mic:before {
1151 | 	content: '\e302';
1152 | }
1153 | 
1154 | .uni-icon-location:before {
1155 | 	content: '\e303';
1156 | }
1157 | 
1158 | .uni-icon-mic-filled:before,
1159 | .uni-icon-speech:before {
1160 | 	content: '\e332';
1161 | }
1162 | 
1163 | .uni-icon-location-filled:before {
1164 | 	content: '\e333';
1165 | }
1166 | 
1167 | .uni-icon-micoff:before {
1168 | 	content: '\e360';
1169 | }
1170 | 
1171 | .uni-icon-image:before {
1172 | 	content: '\e363';
1173 | }
1174 | 
1175 | .uni-icon-map:before {
1176 | 	content: '\e364';
1177 | }
1178 | 
1179 | .uni-icon-compose:before {
1180 | 	content: '\e400';
1181 | }
1182 | 
1183 | .uni-icon-trash:before {
1184 | 	content: '\e401';
1185 | }
1186 | 
1187 | .uni-icon-upload:before {
1188 | 	content: '\e402';
1189 | }
1190 | 
1191 | .uni-icon-download:before {
1192 | 	content: '\e403';
1193 | }
1194 | 
1195 | .uni-icon-close:before {
1196 | 	content: '\e404';
1197 | }
1198 | 
1199 | .uni-icon-redo:before {
1200 | 	content: '\e405';
1201 | }
1202 | 
1203 | .uni-icon-undo:before {
1204 | 	content: '\e406';
1205 | }
1206 | 
1207 | .uni-icon-refresh:before {
1208 | 	content: '\e407';
1209 | }
1210 | 
1211 | .uni-icon-star:before {
1212 | 	content: '\e408';
1213 | }
1214 | 
1215 | .uni-icon-plus:before {
1216 | 	content: '\e409';
1217 | }
1218 | 
1219 | .uni-icon-minus:before {
1220 | 	content: '\e410';
1221 | }
1222 | 
1223 | .uni-icon-circle:before,
1224 | .uni-icon-checkbox:before {
1225 | 	content: '\e411';
1226 | }
1227 | 
1228 | .uni-icon-close-filled:before,
1229 | .uni-icon-clear:before {
1230 | 	content: '\e434';
1231 | }
1232 | 
1233 | .uni-icon-refresh-filled:before {
1234 | 	content: '\e437';
1235 | }
1236 | 
1237 | .uni-icon-star-filled:before {
1238 | 	content: '\e438';
1239 | }
1240 | 
1241 | .uni-icon-plus-filled:before {
1242 | 	content: '\e439';
1243 | }
1244 | 
1245 | .uni-icon-minus-filled:before {
1246 | 	content: '\e440';
1247 | }
1248 | 
1249 | .uni-icon-circle-filled:before {
1250 | 	content: '\e441';
1251 | }
1252 | 
1253 | .uni-icon-checkbox-filled:before {
1254 | 	content: '\e442';
1255 | }
1256 | 
1257 | .uni-icon-closeempty:before {
1258 | 	content: '\e460';
1259 | }
1260 | 
1261 | .uni-icon-refreshempty:before {
1262 | 	content: '\e461';
1263 | }
1264 | 
1265 | .uni-icon-reload:before {
1266 | 	content: '\e462';
1267 | }
1268 | 
1269 | .uni-icon-starhalf:before {
1270 | 	content: '\e463';
1271 | }
1272 | 
1273 | .uni-icon-spinner:before {
1274 | 	content: '\e464';
1275 | }
1276 | 
1277 | .uni-icon-spinner-cycle:before {
1278 | 	content: '\e465';
1279 | }
1280 | 
1281 | .uni-icon-search:before {
1282 | 	content: '\e466';
1283 | }
1284 | 
1285 | .uni-icon-plusempty:before {
1286 | 	content: '\e468';
1287 | }
1288 | 
1289 | .uni-icon-forward:before {
1290 | 	content: '\e470';
1291 | }
1292 | 
1293 | .uni-icon-back:before,
1294 | .uni-icon-left-nav:before {
1295 | 	content: '\e471';
1296 | }
1297 | 
1298 | .uni-icon-checkmarkempty:before {
1299 | 	content: '\e472';
1300 | }
1301 | 
1302 | .uni-icon-home:before {
1303 | 	content: '\e500';
1304 | }
1305 | 
1306 | .uni-icon-navigate:before {
1307 | 	content: '\e501';
1308 | }
1309 | 
1310 | .uni-icon-gear:before {
1311 | 	content: '\e502';
1312 | }
1313 | 
1314 | .uni-icon-paperplane:before {
1315 | 	content: '\e503';
1316 | }
1317 | 
1318 | .uni-icon-info:before {
1319 | 	content: '\e504';
1320 | }
1321 | 
1322 | .uni-icon-help:before {
1323 | 	content: '\e505';
1324 | }
1325 | 
1326 | .uni-icon-locked:before {
1327 | 	content: '\e506';
1328 | }
1329 | 
1330 | .uni-icon-more:before {
1331 | 	content: '\e507';
1332 | }
1333 | 
1334 | .uni-icon-flag:before {
1335 | 	content: '\e508';
1336 | }
1337 | 
1338 | .uni-icon-home-filled:before {
1339 | 	content: '\e530';
1340 | }
1341 | 
1342 | .uni-icon-gear-filled:before {
1343 | 	content: '\e532';
1344 | }
1345 | 
1346 | .uni-icon-info-filled:before {
1347 | 	content: '\e534';
1348 | }
1349 | 
1350 | .uni-icon-help-filled:before {
1351 | 	content: '\e535';
1352 | }
1353 | 
1354 | .uni-icon-more-filled:before {
1355 | 	content: '\e537';
1356 | }
1357 | 
1358 | .uni-icon-settings:before {
1359 | 	content: '\e560';
1360 | }
1361 | 
1362 | .uni-icon-list:before {
1363 | 	content: '\e562';
1364 | }
1365 | 
1366 | .uni-icon-bars:before {
1367 | 	content: '\e563';
1368 | }
1369 | 
1370 | .uni-icon-loop:before {
1371 | 	content: '\e565';
1372 | }
1373 | 
1374 | .uni-icon-paperclip:before {
1375 | 	content: '\e567';
1376 | }
1377 | 
1378 | .uni-icon-eye:before {
1379 | 	content: '\e568';
1380 | }
1381 | 
1382 | .uni-icon-arrowup:before {
1383 | 	content: '\e580';
1384 | }
1385 | 
1386 | .uni-icon-arrowdown:before {
1387 | 	content: '\e581';
1388 | }
1389 | 
1390 | .uni-icon-arrowleft:before {
1391 | 	content: '\e582';
1392 | }
1393 | 
1394 | .uni-icon-arrowright:before {
1395 | 	content: '\e583';
1396 | }
1397 | 
1398 | .uni-icon-arrowthinup:before {
1399 | 	content: '\e584';
1400 | }
1401 | 
1402 | .uni-icon-arrowthindown:before {
1403 | 	content: '\e585';
1404 | }
1405 | 
1406 | .uni-icon-arrowthinleft:before {
1407 | 	content: '\e586';
1408 | }
1409 | 
1410 | .uni-icon-arrowthinright:before {
1411 | 	content: '\e587';
1412 | }
1413 | 
1414 | .uni-icon-pulldown:before {
1415 | 	content: '\e588';
1416 | }
1417 | 
1418 | .uni-icon-scan:before {
1419 |     content: "\e612";
1420 | }
1421 | 
1422 | /* 分界线 */
1423 | .uni-divider{
1424 |     height: 110upx;
1425 |     display: flex;
1426 |     align-items:center;
1427 |     justify-content: center;
1428 |     position: relative;
1429 | }
1430 | .uni-divider__content{
1431 |     font-size: 28upx;
1432 |     color: #999;
1433 |     padding: 0 20upx;
1434 |     position: relative;
1435 |     z-index: 101;
1436 |     background: #F4F5F6;
1437 | }
1438 | .uni-divider__line{
1439 |     background-color: #CCCCCC;
1440 |     height: 1px;
1441 |     width: 100%;
1442 |     position: absolute;
1443 |     z-index: 100;
1444 |     top: 50%;
1445 |     left: 0;
1446 |     transform: translateY(50%);
1447 | }


--------------------------------------------------------------------------------
/common/util.js:
--------------------------------------------------------------------------------
 1 | function formatTime(time) {
 2 | 	if (typeof time !== 'number' || time < 0) {
 3 | 		return time
 4 | 	}
 5 | 
 6 | 	var hour = parseInt(time / 3600)
 7 | 	time = time % 3600
 8 | 	var minute = parseInt(time / 60)
 9 | 	time = time % 60
10 | 	var second = time
11 | 
12 | 	return ([hour, minute, second]).map(function (n) {
13 | 		n = n.toString()
14 | 		return n[1] ? n : '0' + n
15 | 	}).join(':')
16 | }
17 | 
18 | function formatLocation(longitude, latitude) {
19 | 	if (typeof longitude === 'string' && typeof latitude === 'string') {
20 | 		longitude = parseFloat(longitude)
21 | 		latitude = parseFloat(latitude)
22 | 	}
23 | 
24 | 	longitude = longitude.toFixed(2)
25 | 	latitude = latitude.toFixed(2)
26 | 
27 | 	return {
28 | 		longitude: longitude.toString().split('.'),
29 | 		latitude: latitude.toString().split('.')
30 | 	}
31 | }
32 | var dateUtils = {
33 | 	UNITS: {
34 | 		'年': 31557600000,
35 | 		'月': 2629800000,
36 | 		'天': 86400000,
37 | 		'小时': 3600000,
38 | 		'分钟': 60000,
39 | 		'秒': 1000
40 | 	},
41 | 	humanize: function (milliseconds) {
42 | 		var humanize = '';
43 | 		for (var key in this.UNITS) {
44 | 			if (milliseconds >= this.UNITS[key]) {
45 | 				humanize = Math.floor(milliseconds / this.UNITS[key]) + key + '前';
46 | 				break;
47 | 			}
48 | 		}
49 | 		return humanize || '刚刚';
50 | 	},
51 | 	format: function (dateStr) {
52 | 		var date = this.parse(dateStr)
53 | 		var diff = Date.now() - date.getTime();
54 | 		if (diff < this.UNITS['天']) {
55 | 			return this.humanize(diff);
56 | 		}
57 | 		var _format = function (number) {
58 | 			return (number < 10 ? ('0' + number) : number);
59 | 		};
60 | 		return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' +
61 | 			_format(date.getHours()) + ':' + _format(date.getMinutes());
62 | 	},
63 | 	parse: function (str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
64 | 		var a = str.split(/[^0-9]/);
65 | 		return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
66 | 	}
67 | };
68 | 
69 | module.exports = {
70 | 	formatTime: formatTime,
71 | 	formatLocation: formatLocation,
72 | 	dateUtils: dateUtils
73 | }
74 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import store from './store'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | Vue.prototype.$store = store
 8 | 
 9 | App.mpType = 'app'
10 | 
11 | const app = new Vue({
12 |     ...App
13 | })
14 | app.$mount()
15 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "Miniprogram cloud",
 3 |     "appid" : "__UNI__5F0789C",
 4 |     "description" : "",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "transformPx" : false,
 8 |     "app-plus" : {
 9 |         /* 5+App特有相关 */
10 |         "usingComponents" : true,
11 |         "splashscreen" : {
12 |             "alwaysShowBeforeRender" : true,
13 |             "waiting" : true,
14 |             "autoclose" : true,
15 |             "delay" : 0
16 |         },
17 |         "modules" : {},
18 |         /* 模块配置 */
19 |         "distribute" : {
20 |             /* 应用发布信息 */
21 |             "android" : {
22 |                 /* android打包配置 */
23 |                 "permissions" : [
24 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
25 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
26 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
27 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
28 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
30 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
31 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
32 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
33 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
34 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
35 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
36 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
37 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
38 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
39 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
40 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
41 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
42 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
43 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
44 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
45 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
46 |                 ]
47 |             },
48 |             "ios" : {},
49 |             /* ios打包配置 */
50 |             "sdkConfigs" : {}
51 |         }
52 |     },
53 |     /* SDK配置 */
54 |     "quickapp" : {},
55 |     /* 快应用特有相关 */
56 |     "mp-weixin" : {
57 |         /* 小程序特有相关 */
58 |         "appid" : "",
59 |         "setting" : {
60 |             "urlCheck" : false
61 |         },
62 |         "usingComponents" : true
63 |     }
64 | }
65 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 3 | 		{
 4 | 			"path": "pages/index/index",
 5 | 			"style": {
 6 | 				"navigationBarTitleText": "uni-app"
 7 | 			}
 8 | 		}, {
 9 | 			"path": "pages/addFunction/addFunction",
10 | 			"style": {
11 | 				"navigationBarTitleText": "云函数指引"
12 | 			}
13 | 		}, {
14 | 			"path": "pages/chooseLib/chooseLib",
15 | 			"style": {
16 | 				"navigationBarTitleText": "选择基础库"
17 | 			}
18 | 		}, {
19 | 			"path": "pages/databaseGuide/databaseGuide",
20 | 			"style": {
21 | 				"navigationBarTitleText": "数据库指引"
22 | 			}
23 | 		}, {
24 | 			"path": "pages/deployFunctions/deployFunctions",
25 | 			"style": {
26 | 				"navigationBarTitleText": "部署云函数"
27 | 			}
28 | 		}, {
29 | 			"path": "pages/openapi/openapi",
30 | 			"style": {
31 | 				"navigationBarTitleText": "uni-app"
32 | 			}
33 | 		
34 | 		}, {
35 | 			"path": "pages/storageConsole/storageConsole",
36 | 			"style": {
37 | 				"navigationBarTitleText": "文件存储指引"
38 | 			}
39 | 		},
40 | 		{
41 | 			"path": "pages/userConsole/userConsole",
42 | 			"style": {
43 | 				"navigationBarTitleText": "用户管理指引"
44 | 			}
45 | 		}
46 | 		
47 | 	],
48 | 	"globalStyle": {
49 | 		"navigationBarTextStyle": "black",
50 | 		"navigationBarTitleText": "uni-app",
51 | 		"navigationBarBackgroundColor": "#F8F8F8",
52 | 		"backgroundColor": "#F8F8F8"
53 | 	}
54 | 	//配置了这里的tabar会导致页面上面的跳转失效，因此屏蔽
55 | 	// "tabBar": {
56 | 	// 	"color": "#7A7E83",
57 | 	// 	"selectedColor": "#007AFF",
58 | 	// 	"borderStyle": "black",
59 | 	// 	"backgroundColor": "#ffffff",
60 | 	// 	"list": [{
61 | 	// 			"pagePath": "pages/index/index",
62 | 	// 			// "iconPath": "static/component.png",
63 | 	// 			// "selectedIconPath": "static/componentHL.png",
64 | 	// 			"text": "首页"
65 | 	// 		},
66 | 	// 		{
67 | 	// 			"pagePath": "pages/addFunction/addFunction",
68 | 	// 			// "iconPath": "static/api.png",
69 | 	// 			// "selectedIconPath": "static/apiHL.png",
70 | 	// 			"text": "云函数指引"
71 | 	// 		},
72 | 	// 		{
73 | 	// 			"pagePath": "pages/databaseGuide/databaseGuide",
74 | 	// 			// "iconPath": "static/template.png",
75 | 	// 			// "selectedIconPath": "static/templateHL.png",
76 | 	// 			"text": "数据库指引"
77 | 	// 		}
78 | 	// 	]
79 | 	// }
80 | }
81 | 


--------------------------------------------------------------------------------
/pages/addFunction/addFunction.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<!--pages/addFunction/addFunction.wxml-->
  3 | 	<view class="container">
  4 | 		<view class="list">
  5 | 			<view class="list-item" @tap="testFunction"><text>测试云函数</text></view>
  6 | 			<view class="list-item"><text class="request-text">期望输出：{"sum":3}</text></view>
  7 | 			<view class="list-item" v-if="result">
  8 | 				<text class="request-text">调用结果：{{ result }}</text>
  9 | 			</view>
 10 | 		</view>
 11 | 
 12 | 		<view class="guide">
 13 | 			<text class="headline">新增云函数</text>
 14 | 			<text class="p">1. 在云函数根目录 cloudfunctions 上右键选择新建云函数，命名为 sum</text>
 15 | 			<text class="p">2. 在创建的 cloudfunctions/sum/index.js 文件中添加如下代码</text>
 16 | 			<image class="image1" src="../../static/code-func-sum.png" mode="aspectFit"></image>
 17 | 			<button class="copyBtn" v-if="canIUseClipboard" @tap="copyCode">复制代码</button>
 18 | 			<text class="p">3. 在 cloudfunctions/sum 目录上右键上传并部署</text>
 19 | 			<text class="p">4. 点击测试云函数测试</text>
 20 | 			<text class="p">5. 打开云开发云函数管理页，选择 sum 云函数</text>
 21 | 			<text class="p">6. 查看 sum 的调用日志</text>
 22 | 			<text class="p">进阶：可在云函数中使用 wx-server-sdk 操作数据库，文件存储和调用其他云函数，详见文档</text>
 23 | 		</view>
 24 | 	</view>
 25 | </template>
 26 | <script>
 27 | const code = `// 云函数入口函数
 28 | exports.main = (event, context) => {
 29 |   console.log(event)
 30 |   console.log(context)
 31 |   return {
 32 |     sum: event.a + event.b
 33 |   }
 34 | }`;
 35 | 
 36 | import { mapState, mapMutations } from 'vuex';
 37 | 
 38 | export default {
 39 | 	computed: mapState(['openid', 'userInfo']),
 40 | 	data() {
 41 | 		return {
 42 | 			result: '',
 43 | 			canIUseClipboard: wx.canIUse('setClipboardData')
 44 | 		};
 45 | 	},
 46 | 	onLoad: function(options) {
 47 | 		console.log("addfunct");
 48 | 	},
 49 | 	methods: {
 50 | 		setData: function(obj) {
 51 | 			let that = this;
 52 | 			let keys = [];
 53 | 			let val, data;
 54 | 			Object.keys(obj).forEach(function(key) {
 55 | 				keys = key.split('.');
 56 | 				val = obj[key];
 57 | 				data = that.$data;
 58 | 				keys.forEach(function(key2, index) {
 59 | 					if (index + 1 == keys.length) {
 60 | 						that.$set(data, key2, val);
 61 | 					} else {
 62 | 						if (!data[key2]) {
 63 | 							that.$set(data, key2, {});
 64 | 						}
 65 | 					}
 66 | 					data = data[key2];
 67 | 				});
 68 | 			});
 69 | 		},
 70 | 		copyCode: function() {
 71 | 			wx.setClipboardData({
 72 | 				data: code,
 73 | 				success: function() {
 74 | 					wx.showToast({
 75 | 						title: '复制成功'
 76 | 					});
 77 | 				}
 78 | 			});
 79 | 		},
 80 | 		testFunction() {
 81 | 			wx.cloud.callFunction({
 82 | 				name: 'sum',
 83 | 				data: {
 84 | 					a: 1,
 85 | 					b: 2
 86 | 				},
 87 | 				success: res => {
 88 | 					wx.showToast({
 89 | 						title: '调用成功'
 90 | 					});
 91 | 					this.setData({
 92 | 						result: JSON.stringify(res.result)
 93 | 					});
 94 | 				},
 95 | 				fail: err => {
 96 | 					wx.showToast({
 97 | 						icon: 'none',
 98 | 						title: '调用失败'
 99 | 					});
100 | 					console.error('[云函数] [sum] 调用失败：', err);
101 | 				}
102 | 			});
103 | 		}
104 | 	}
105 | };
106 | </script>
107 | 
108 | <style>
109 | @import '../../style/guide.wxss';
110 | </style>
111 | 


--------------------------------------------------------------------------------
/pages/chooseLib/chooseLib.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<!--pages/chooseLib/chooseLib.wxml-->
 3 | <view class="container">
 4 | 
 5 |   <view class="list">
 6 |     <view class="list-item">
 7 |       <text class="black">初始化失败</text>
 8 |     </view>
 9 |     <view class="list-item">
10 |       <text class="request-text">请使用 2.2.3 或以上的基础库以使用云能力</text>
11 |     </view>
12 |   </view>
13 | 
14 | </view>
15 | </template>
16 | <script>
17 | 
18 | import { mapState } from 'vuex';
19 | 
20 | export default {
21 | 	computed: mapState(['openid']),
22 | 	data() {
23 | 		return {};
24 | 	},
25 | 	/**
26 | 	 * 生命周期函数--监听页面加载
27 | 	 */
28 | 	onLoad: function(options) {
29 | 		console.log(this.openid);
30 | 	},
31 | 	methods: {},
32 | 	/**
33 | 	 * 生命周期函数--监听页面初次渲染完成
34 | 	 */
35 | 	onReady: function() {},
36 | 
37 | 	/**
38 | 	 * 生命周期函数--监听页面显示
39 | 	 */
40 | 	onShow: function() {},
41 | 
42 | 	/**
43 | 	 * 生命周期函数--监听页面隐藏
44 | 	 */
45 | 	onHide: function() {},
46 | 
47 | 	/**
48 | 	 * 生命周期函数--监听页面卸载
49 | 	 */
50 | 	onUnload: function() {},
51 | 
52 | 	/**
53 | 	 * 页面相关事件处理函数--监听用户下拉动作
54 | 	 */
55 | 	onPullDownRefresh: function() {},
56 | 
57 | 	/**
58 | 	 * 页面上拉触底事件的处理函数
59 | 	 */
60 | 	onReachBottom: function() {},
61 | 
62 | 	/**
63 | 	 * 用户点击右上角分享
64 | 	 */
65 | 	onShareAppMessage: function() {}
66 | };
67 | </script>
68 | 
69 | <style>
70 | 	@import "../../style/guide.wxss";
71 | 	
72 | 	.black {
73 | 	  color: black;
74 | 	}
75 | </style>


--------------------------------------------------------------------------------
/pages/databaseGuide/databaseGuide.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<!--pages/databaseGuide/databaseGuide.wxml-->
  3 | 	<view class="container">
  4 | 		<!-- 导航 -->
  5 | 		<view class="list">
  6 | 			<view class="list-item"><text class="request-text">数据库指引</text></view>
  7 | 			<view class="list-item">
  8 | 				<text class="request-text" v-for="(item, index) in 7" :key="index" style="color:(step === index + 1 ? 'red': 'black')">{{ index + 1 }}</text>
  9 | 			</view>
 10 | 			<view class="list-item" v-if="openid">
 11 | 				<text class="request-text">openid：{{ openid }}</text>
 12 | 			</view>
 13 | 			<view class="list-item" v-if="counterId">
 14 | 				<text class="request-text">当前记录 ID：{{ counterId }}</text>
 15 | 			</view>
 16 | 		</view>
 17 | 
 18 | 		<!-- 快速操作数据库指引 -->
 19 | 
 20 | 		<!-- 简介 -->
 21 | 		<view class="guide" v-if="step === 1">
 22 | 			<text class="headline">示例介绍</text>
 23 | 			<text class="p">1. 以计数器为例，在此演示如何操作数据库</text>
 24 | 			<text class="p">2. 数据库操作大多需要用户 openid，需先配置好 login 云函数，如已配置好，点击下一步，获取用户 openid 并开始我们的指引</text>
 25 | 			<div class="nav"><button class="next" size="mini" type="default" @tap="nextStep">下一步</button></div>
 26 | 		</view>
 27 | 
 28 | 		<!-- 新建集合 -->
 29 | 		<view class="guide" v-if="step === 2">
 30 | 			<text class="headline">新建集合</text>
 31 | 			<text class="p">1. 打开云开发控制台，进入到数据库管理页</text>
 32 | 			<image class="image1" src="../../static/console-entrance.png" mode="aspectFit"></image>
 33 | 			<text class="p">2. 选择添加集合，集合名为 counters</text>
 34 | 			<image class="flat-image" src="../../static/create-collection.png" mode="aspectFit"></image>
 35 | 			<text class="p">3. 可以看到 counters 集合出现在左侧集合列表中</text>
 36 | 			<text class="p">注：集合必须在云开发控制台中创建</text>
 37 | 
 38 | 			<div class="nav">
 39 | 				<button class="prev" size="mini" type="default" @tap="prevStep">上一步</button>
 40 | 				<button class="next" size="mini" type="default" @tap="nextStep">下一步</button>
 41 | 			</div>
 42 | 		</view>
 43 | 
 44 | 		<!-- 新增记录 -->
 45 | 		<view class="guide" v-if="step === 3">
 46 | 			<text class="headline">新增记录</text>
 47 | 			<text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onAdd 方法</text>
 48 | 			<text class="p">2. 把注释掉的代码解除注释</text>
 49 | 			<image class="code-image" src="../../static/code-db-onAdd.png" mode="aspectFit"></image>
 50 | 			<text class="p">3. onAdd 方法会往 counters 集合新增一个记录，新增如下格式的一个 JSON 记录</text>
 51 | 			<text class="code">{ "_id": "数据库自动生成记录 ID 字段", "_openid": "数据库自动插入记录创建者的 openid", "count": 1 }</text>
 52 | 			<text class="p">4. 点击按钮</text>
 53 | 			<button size="mini" type="default" @tap="onAdd">新增记录</button>
 54 | 			<text class="p" v-if="counterId">新增的记录 _id 为：{{ counterId }}</text>
 55 | 			<text class="p">5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text>
 56 | 
 57 | 			<div class="nav">
 58 | 				<button class="prev" size="mini" type="default" @tap="prevStep">上一步</button>
 59 | 				<button class="next" size="mini" type="default" @tap="nextStep" v-if="counterId">下一步</button>
 60 | 			</div>
 61 | 		</view>
 62 | 
 63 | 		<!-- 查询记录 -->
 64 | 		<view class="guide" v-if="step === 4">
 65 | 			<text class="headline">查询记录</text>
 66 | 			<text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onQuery 方法</text>
 67 | 			<text class="p">2. 把注释掉的代码解除注释，onQuery 方法会在下方按钮被点击时触发</text>
 68 | 			<image class="code-image" src="../../static/code-db-onQuery.png" mode="aspectFit"></image>
 69 | 			<text class="p">3. 点击按钮</text>
 70 | 			<button size="mini" type="default" @tap="onQuery">查询记录</button>
 71 | 			<text class="code" v-if="queryResult">{{ queryResult }}</text>
 72 | 
 73 | 			<div class="nav">
 74 | 				<button class="prev" size="mini" type="default" @tap="prevStep">上一步</button>
 75 | 				<button class="next" size="mini" type="default" @tap="nextStep">下一步</button>
 76 | 			</div>
 77 | 		</view>
 78 | 
 79 | 		<!-- 更新记录 -->
 80 | 		<view class="guide" v-if="step === 5">
 81 | 			<text class="headline">更新记录</text>
 82 | 			<text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onCounterInc 和 onCounterDec 方法</text>
 83 | 			<text class="p">2. 把注释掉的代码解除注释</text>
 84 | 			<image class="code-image" src="../../static/code-db-inc-dec.png" mode="aspectFit"></image>
 85 | 			<text class="p">3. 点击下方按钮更新计数器</text>
 86 | 			<div class="counter">
 87 | 				<button class="minus" size="mini" type="default" @tap="onCounterDec">-</button>
 88 | 				<text class="p">{{ count }}</text>
 89 | 				<button class="plus" size="mini" type="default" @tap="onCounterInc">+</button>
 90 | 			</div>
 91 | 
 92 | 			<div class="nav">
 93 | 				<button class="prev" size="mini" type="default" @tap="prevStep">上一步</button>
 94 | 				<button class="next" size="mini" type="default" @tap="nextStep">下一步</button>
 95 | 			</div>
 96 | 		</view>
 97 | 
 98 | 		<!-- 删除记录 -->
 99 | 		<view class="guide" v-if="step === 6">
100 | 			<text class="headline">删除记录</text>
101 | 			<text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onRemove 方法</text>
102 | 			<text class="p">2. 把注释掉的代码解除注释</text>
103 | 			<image class="code-image" src="../../static/code-db-onRemove.png" mode="aspectFit"></image>
104 | 			<text class="p">3. 点击下方按钮删除计数器</text>
105 | 			<button size="mini" type="default" @tap="onRemove">删除记录</button>
106 | 
107 | 			<div class="nav">
108 | 				<button class="prev" size="mini" type="default" @tap="prevStep" v-if="counterId">上一步</button>
109 | 				<button class="next" size="mini" type="default" @tap="nextStep">下一步</button>
110 | 			</div>
111 | 		</view>
112 | 
113 | 		<!-- 结语 -->
114 | 		<view class="guide" v-if="step === 7">
115 | 			<text class="headline">完成指引 !</text>
116 | 			<text class="p">恭喜你，至此已完成数据库操作入门基础，可以点击调试器中的链接，查看详尽的数据库文档</text>
117 | 
118 | 			<div class="nav">
119 | 				<button class="prev" size="mini" type="default" @tap="prevStep">上一步</button>
120 | 				<button class="next" size="mini" type="default" @tap="goHome">回到首页</button>
121 | 			</div>
122 | 		</view>
123 | 	</view>
124 | </template>
125 | 
126 | <script>
127 | import { mapState } from 'vuex';
128 | 
129 | export default {
130 | 	computed: mapState(['openid']),
131 | 
132 | 	data() {
133 | 		return {
134 | 			step: 1,
135 | 			counterId: '',
136 | 			count: null,
137 | 			queryResult: ''
138 | 		};
139 | 	},
140 | 
141 | 	onLoad: function(options) {
142 | 		console.log(this.openid);
143 | 	},
144 | 	methods: {
145 | 		setData: function(obj) {
146 | 			let that = this;
147 | 			let keys = [];
148 | 			let val, data;
149 | 			Object.keys(obj).forEach(function(key) {
150 | 				keys = key.split('.');
151 | 				val = obj[key];
152 | 				data = that.$data;
153 | 				keys.forEach(function(key2, index) {
154 | 					if (index + 1 == keys.length) {
155 | 						that.$set(data, key2, val);
156 | 					} else {
157 | 						if (!data[key2]) {
158 | 							that.$set(data, key2, {});
159 | 						}
160 | 					}
161 | 					data = data[key2];
162 | 				});
163 | 			});
164 | 		},
165 | 		onAdd: function() {
166 | 			const db = wx.cloud.database();
167 | 			db.collection('counters').add({
168 | 				data: {
169 | 					count: 1
170 | 				},
171 | 				success: res => {
172 | 					// 在返回结果中会包含新创建的记录的 _id
173 | 					this.setData({
174 | 						counterId: res._id,
175 | 						count: 1
176 | 					});
177 | 					wx.showToast({
178 | 						title: '新增记录成功'
179 | 					});
180 | 					console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id);
181 | 				},
182 | 				fail: err => {
183 | 					wx.showToast({
184 | 						icon: 'none',
185 | 						title: '新增记录失败'
186 | 					});
187 | 					console.error('[数据库] [新增记录] 失败：', err);
188 | 				}
189 | 			});
190 | 		},
191 | 
192 | 		onQuery: function() {
193 | 			const db = wx.cloud.database();
194 | 			// 查询当前用户所有的 counters
195 | 			db.collection('counters')
196 | 				.where({
197 | 					_openid: this.openid
198 | 				})
199 | 				.get({
200 | 					success: res => {
201 | 						this.setData({
202 | 							queryResult: JSON.stringify(res.data, null, 2)
203 | 						});
204 | 						console.log('[数据库] [查询记录] 成功: ', res);
205 | 					},
206 | 					fail: err => {
207 | 						wx.showToast({
208 | 							icon: 'none',
209 | 							title: '查询记录失败'
210 | 						});
211 | 						console.error('[数据库] [查询记录] 失败：', err);
212 | 					}
213 | 				});
214 | 		},
215 | 
216 | 		onCounterInc: function() {
217 | 			const db = wx.cloud.database();
218 | 			const newCount = this.count + 1;
219 | 			db.collection('counters')
220 | 				.doc(this.counterId)
221 | 				.update({
222 | 					data: {
223 | 						count: newCount
224 | 					},
225 | 					success: res => {
226 | 						this.setData({
227 | 							count: newCount
228 | 						});
229 | 					},
230 | 					fail: err => {
231 | 						icon: 'none', console.error('[数据库] [更新记录] 失败：', err);
232 | 					}
233 | 				});
234 | 		},
235 | 
236 | 		onCounterDec: function() {
237 | 			const db = wx.cloud.database();
238 | 			const newCount = this.count - 1;
239 | 			db.collection('counters')
240 | 				.doc(this.counterId)
241 | 				.update({
242 | 					data: {
243 | 						count: newCount
244 | 					},
245 | 					success: res => {
246 | 						this.setData({
247 | 							count: newCount
248 | 						});
249 | 					},
250 | 					fail: err => {
251 | 						icon: 'none', console.error('[数据库] [更新记录] 失败：', err);
252 | 					}
253 | 				});
254 | 		},
255 | 
256 | 		onRemove: function() {
257 | 			if (this.counterId) {
258 | 				const db = wx.cloud.database();
259 | 				db.collection('counters')
260 | 					.doc(this.counterId)
261 | 					.remove({
262 | 						success: res => {
263 | 							wx.showToast({
264 | 								title: '删除成功'
265 | 							});
266 | 							this.setData({
267 | 								counterId: '',
268 | 								count: null
269 | 							});
270 | 						},
271 | 						fail: err => {
272 | 							wx.showToast({
273 | 								icon: 'none',
274 | 								title: '删除失败'
275 | 							});
276 | 							console.error('[数据库] [删除记录] 失败：', err);
277 | 						}
278 | 					});
279 | 			} else {
280 | 				wx.showToast({
281 | 					title: '无记录可删，请见创建一个记录'
282 | 				});
283 | 			}
284 | 		},
285 | 
286 | 		nextStep: function() {
287 | 			// 在第一步，需检查是否有 openid，如无需获取
288 | 			if (this.step === 1 && !this.openid) {
289 | 				wx.cloud.callFunction({
290 | 					name: 'login',
291 | 					data: {},
292 | 					success: res => {
293 | 						this.$store.setOpenId(res.result.openid);
294 | 						this.setData({
295 | 							step: 2,
296 | 						});
297 | 					},
298 | 					fail: err => {
299 | 						wx.showToast({
300 | 							icon: 'none',
301 | 							title: '获取 openid 失败，请检查是否有部署 login 云函数'
302 | 						});
303 | 						console.log('[云函数] [login] 获取 openid 失败，请检查是否有部署云函数，错误信息：', err);
304 | 					}
305 | 				});
306 | 			} else {
307 | 				const callback =
308 | 					this.step !== 6
309 | 						? function() {}
310 | 						: function() {
311 | 								console.group('数据库文档');
312 | 								console.log('https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html');
313 | 								console.groupEnd();
314 | 						  };
315 | 
316 | 				this.setData(
317 | 					{
318 | 						step: this.step + 1
319 | 					},
320 | 					callback
321 | 				);
322 | 			}
323 | 		},
324 | 
325 | 		prevStep: function() {
326 | 			this.setData({
327 | 				step: this.step - 1
328 | 			});
329 | 		},
330 | 
331 | 		goHome: function() {
332 | 			const pages = getCurrentPages();
333 | 			if (pages.length === 2) {
334 | 				wx.navigateBack();
335 | 			} else if (pages.length === 1) {
336 | 				wx.redirectTo({
337 | 					url: '../index/index'
338 | 				});
339 | 			} else {
340 | 				wx.reLaunch({
341 | 					url: '../index/index'
342 | 				});
343 | 			}
344 | 		}
345 | 	}
346 | };
347 | </script>
348 | 
349 | <style>
350 | @import '../../style/guide.wxss';
351 | 
352 | .guide .counter {
353 | 	margin-top: 50rpx;
354 | 	display: flex;
355 | 	flex-direction: row;
356 | 	align-content: space-between;
357 | }
358 | </style>
359 | 


--------------------------------------------------------------------------------
/pages/deployFunctions/deployFunctions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<!--pages/deployFunctions/deployFunctions.wxml-->
 3 | 	<view class="container">
 4 | 		<view class="list">
 5 | 			<view class="list-item"><text class="black">调用失败</text></view>
 6 | 			<view class="list-item"><text class="request-text">请检查 login 云函数是否已部署</text></view>
 7 | 		</view>
 8 | 
 9 | 		<view class="guide">
10 | 			<text class="headline">部署 login 云函数</text>
11 | 			<text class="p">1. 确保已通过工具栏云开发入口开通云开发</text>
12 | 			<text class="p">2. 在 cloudfunctions/login 目录上右键上传并部署</text>
13 | 			<text class="p">3. 回到首页，重新点击获取 openid</text>
14 | 		</view>
15 | 	</view>
16 | </template>
17 | <script>
18 | // pages/deployFunctions/deployFunctions.js
19 | 
20 | import { mapState } from 'vuex';
21 | 
22 | export default {
23 | 	computed: mapState(['openid']),
24 | 	data() {
25 | 		return {};
26 | 	},
27 | 	/**
28 | 	 * 生命周期函数--监听页面加载
29 | 	 */
30 | 	onLoad: function(options) {
31 | 		console.log(this.openid);
32 | 	},
33 | 	methods: {},
34 | 	/**
35 | 	 * 生命周期函数--监听页面初次渲染完成
36 | 	 */
37 | 	onReady: function() {},
38 | 
39 | 	/**
40 | 	 * 生命周期函数--监听页面显示
41 | 	 */
42 | 	onShow: function() {},
43 | 
44 | 	/**
45 | 	 * 生命周期函数--监听页面隐藏
46 | 	 */
47 | 	onHide: function() {},
48 | 
49 | 	/**
50 | 	 * 生命周期函数--监听页面卸载
51 | 	 */
52 | 	onUnload: function() {},
53 | 
54 | 	/**
55 | 	 * 页面相关事件处理函数--监听用户下拉动作
56 | 	 */
57 | 	onPullDownRefresh: function() {},
58 | 
59 | 	/**
60 | 	 * 页面上拉触底事件的处理函数
61 | 	 */
62 | 	onReachBottom: function() {},
63 | 
64 | 	/**
65 | 	 * 用户点击右上角分享
66 | 	 */
67 | 	onShareAppMessage: function() {}
68 | };
69 | </script>
70 | <style>
71 | @import '../../style/guide.wxss';
72 | 
73 | .black {
74 | 	color: black;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<!--index.wxml-->
  3 | 	<view class="container">
  4 | 		<!-- 用户 openid -->
  5 | 		<view class="userinfo">
  6 | 			<button open-type="getPhoneNumber" @getuserinfo="onGetUserInfo" class="userinfo-avatar" :style="'background-image: url(' + avatarUrl + ')'"></button>
  7 | 			<view><button class="userinfo-nickname" @tap="onGetOpenid">点击获取 openid</button></view>
  8 | 		</view>
  9 | 
 10 | 		<!-- 上传图片 -->
 11 | 		<view class="uploader">
 12 | 			<view class="uploader-text" @tap="doUpload"><text>上传图片</text></view>
 13 | 			<view class="uploader-container" v-if="imgUrl"><image class="uploader-image" :src="imgUrl" mode="aspectFit" @tap="previewImg"></image></view>
 14 | 		</view>
 15 | 
 16 | 		<!-- 操作数据库 -->
 17 | 		<view class="uploader">
 18 | 			<navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text"><text>前端操作数据库</text></navigator>
 19 | 		</view>
 20 | 
 21 | 		<!-- 新建云函数 -->
 22 | 		<view class="uploader">
 23 | 			<navigator url="../addFunction/addFunction" open-type="navigate" class="uploader-text"><text>快速新建云函数</text></navigator>
 24 | 		</view>
 25 | 
 26 | 		<!-- 云调用 -->
 27 | 		<view class="uploader">
 28 | 			<navigator url="../openapi/openapi" open-type="navigate" class="uploader-text"><text>云调用</text></navigator>
 29 | 		</view>
 30 | 
 31 | 		<view v-if="!canIUse && showShouquan" style="height:100vh;width:100vw;opacity:.5;position:absolute;top:0"></view>
 32 | 		<view v-if="!canIUse && showShouquan" style="color:#333333;position:absolute;top:340rpx;width:70vw;left:9vw;padding:6vw">
 33 | 			<view style="font-size:42rpx">微信授权</view>
 34 | 			<view style="font-size:30rpx;font-weight:bold;text-align:center;padding:20rpx;border-bottom:1px solid #e9e9e9">....网络科技申请获取以下权限：</view>
 35 | 			<view style="font-size:26rpx;text-align:center;margin:30rpx 30rpx 70rpx 30rpx"><text>获得你的公开信息（昵称、头像等）</text></view>
 36 | 			<view style="font-size:28rpx;float:right;margin-top:10rpx">
 37 | 				<text
 38 | 					v-if="!canIUse && showShouquan"
 39 | 					@tap="hidthis"
 40 | 					style="color:#999999;margin-left:60rpx;height:60rpx;line-height:60rpx;font-size:30rpx;border:none;position:absolute;top:300rpx;left:300rpx"
 41 | 				>
 42 | 					拒绝
 43 | 				</text>
 44 | 				<button
 45 | 					v-if="!canIUse"
 46 | 					open-type="getUserInfo"
 47 | 					@getuserinfo="bindGetUserInfo"
 48 | 					style="color:#31B531;margin-left:60rpx;height:60rpx;line-height:60rpx;font-size:30rpx;border:none;position:absolute;top:300rpx;left:400rpx"
 49 | 				>
 50 | 					允许
 51 | 				</button>
 52 | 			</view>
 53 | 			<!-- userInfo:getApp().globalData.userInfo -->
 54 | 		</view>
 55 | 	</view>
 56 | </template>
 57 | 
 58 | <script>
 59 | import { mapState, mapMutations } from 'vuex';
 60 | 
 61 | export default {
 62 | 	computed: mapState(['openid', 'userInfo']),
 63 | 	data() {
 64 | 		return {
 65 | 			avatarUrl: '../../static/user-unlogin.png',
 66 | 			logged: false,
 67 | 			takeSession: false,
 68 | 			requestResult: '',
 69 | 			canIUse: wx.canIUse('button.open-type.getUserInfo'),
 70 | 			showShouquan: true
 71 | 		};
 72 | 	},
 73 | 	onLoad() {
 74 | 		console.log('--onload, ', this.$store);
 75 | 		wx.getSetting({
 76 | 			success: function(res) {
 77 | 				console.log(res.authSetting['scope.userInfo']);
 78 | 				if (res.authSetting['scope.userInfo']) {
 79 | 					// 已经授权，可以直接调用 getUserInfo 获取头像昵称
 80 | 					wx.getUserInfo({
 81 | 						success: function(res) {
 82 | 							console.log(res);
 83 | 							//getApp().globalData.userInfo = res.userInfo; //将授权信息传递给全局变量
 84 | 						}
 85 | 					});
 86 | 				}
 87 | 			}
 88 | 		});
 89 | 		console.log(wx.cloud);
 90 | 		if (!wx.cloud) {
 91 | 			wx.redirectTo({
 92 | 				url: '../chooseLib/chooseLib'
 93 | 			});
 94 | 			return;
 95 | 		}
 96 | 
 97 | 		// 获取用户信息
 98 | 		wx.getSetting({
 99 | 			success: res => {
100 | 				if (res.authSetting['scope.userInfo']) {
101 | 					// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
102 | 					wx.getUserInfo({
103 | 						success: res => {
104 | 							this.setData({
105 | 								avatarUrl: res.userInfo.avatarUrl
106 | 							});
107 | 							this.setUserInfo(res.userInfo);
108 | 						}
109 | 					});
110 | 				}
111 | 			}
112 | 		});
113 | 	},
114 | 	methods: {
115 | 		...mapMutations(['setOpenId', 'setUserInfo', 'setFileID', 'setCloudPath', 'setImagePath']),
116 | 		setData: function(obj) {
117 | 			let that = this;
118 | 			let keys = [];
119 | 			let val, data;
120 | 			Object.keys(obj).forEach(function(key) {
121 | 				keys = key.split('.');
122 | 				val = obj[key];
123 | 				data = that.$data;
124 | 				keys.forEach(function(key2, index) {
125 | 					if (index + 1 == keys.length) {
126 | 						that.$set(data, key2, val);
127 | 					} else {
128 | 						if (!data[key2]) {
129 | 							that.$set(data, key2, {});
130 | 						}
131 | 					}
132 | 					data = data[key2];
133 | 				});
134 | 			});
135 | 		},
136 | 		onGetUserInfo: function(e) {
137 | 			//获取用户授权
138 | 			// getApp().globalData.userInfo = e.detail.userInfo; //将授权信息传递给全局变量
139 | 
140 | 			this.setUserInfo(e.detail.userInfo);
141 | 
142 | 			console.log(getApp().globalData.userInfo);
143 | 
144 | 			if (!this.logged && e.detail.userInfo) {
145 | 				this.setData({
146 | 					logged: true,
147 | 					avatarUrl: e.detail.userInfo.avatarUrl
148 | 				});
149 | 			}
150 | 		},
151 | 
152 | 		onGetOpenid: function() {
153 | 			// 调用云函数
154 | 			wx.cloud.callFunction({
155 | 				name: 'login',
156 | 				data: {},
157 | 				success: res => {
158 | 					console.log('[云函数] [login] user openid: ', res.result.openid);
159 | 					// app.globalData.openid = res.result.openid;
160 | 					this.setOpenId(res.result.openid);
161 | 					wx.navigateTo({
162 | 						url: '../userConsole/userConsole'
163 | 					});
164 | 				},
165 | 				fail: err => {
166 | 					console.error('[云函数] [login] 调用失败', err);
167 | 					wx.navigateTo({
168 | 						url: '../deployFunctions/deployFunctions'
169 | 					});
170 | 				}
171 | 			});
172 | 		},
173 | 
174 | 		// 上传图片
175 | 		doUpload: function() {
176 | 			// 选择图片
177 | 			wx.chooseImage({
178 | 				count: 1,
179 | 				sizeType: ['compressed'],
180 | 				sourceType: ['album', 'camera'],
181 | 				success: function(res) {
182 | 					wx.showLoading({
183 | 						title: '上传中'
184 | 					});
185 | 
186 | 					const filePath = res.tempFilePaths[0];
187 | 
188 | 					// 上传图片
189 | 					const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0];
190 | 					wx.cloud.uploadFile({
191 | 						cloudPath,
192 | 						filePath,
193 | 						success: res => {
194 | 							console.log('[上传文件] 成功：', res);
195 | 
196 | 							// app.globalData.fileID = res.fileID;
197 | 							// app.globalData.cloudPath = cloudPath;
198 | 							// app.globalData.imagePath = filePath;
199 | 
200 | 							wx.navigateTo({
201 | 								url: '../storageConsole/storageConsole'
202 | 							});
203 | 						},
204 | 						fail: e => {
205 | 							console.error('[上传文件] 失败：', e);
206 | 							wx.showToast({
207 | 								icon: 'none',
208 | 								title: '上传失败'
209 | 							});
210 | 						},
211 | 						complete: () => {
212 | 							wx.hideLoading();
213 | 						}
214 | 					});
215 | 				},
216 | 				fail: e => {
217 | 					console.error(e);
218 | 				}
219 | 			});
220 | 		}
221 | 	}
222 | };
223 | </script>
224 | 
225 | <style lang="scss">
226 | /**index.wxss**/
227 | 
228 | page {
229 | 	background: #f6f6f6;
230 | 	display: flex;
231 | 	flex-direction: column;
232 | 	justify-content: flex-start;
233 | }
234 | 
235 | .userinfo,
236 | .uploader,
237 | .tunnel {
238 | 	margin-top: 40rpx;
239 | 	height: 140rpx;
240 | 	width: 100%;
241 | 	background: #fff;
242 | 	border: 1px solid rgba(0, 0, 0, 0.1);
243 | 	border-left: none;
244 | 	border-right: none;
245 | 	display: flex;
246 | 	flex-direction: row;
247 | 	align-items: center;
248 | 	transition: all 300ms ease;
249 | }
250 | 
251 | .userinfo-avatar {
252 | 	width: 100rpx;
253 | 	height: 100rpx;
254 | 	margin: 20rpx;
255 | 	border-radius: 50%;
256 | 	background-size: cover;
257 | 	background-color: white;
258 | }
259 | 
260 | .userinfo-avatar:after {
261 | 	border: none;
262 | }
263 | 
264 | .userinfo-nickname {
265 | 	font-size: 32rpx;
266 | 	color: #007aff;
267 | 	background-color: white;
268 | 	background-size: cover;
269 | }
270 | 
271 | .userinfo-nickname::after {
272 | 	border: none;
273 | }
274 | 
275 | .uploader,
276 | .tunnel {
277 | 	height: auto;
278 | 	padding: 0 0 0 40rpx;
279 | 	flex-direction: column;
280 | 	align-items: flex-start;
281 | 	box-sizing: border-box;
282 | }
283 | 
284 | .uploader-text,
285 | .tunnel-text {
286 | 	width: 100%;
287 | 	line-height: 52px;
288 | 	font-size: 34rpx;
289 | 	color: #007aff;
290 | }
291 | 
292 | .uploader-container {
293 | 	width: 100%;
294 | 	height: 400rpx;
295 | 	padding: 20rpx 20rpx 20rpx 0;
296 | 	display: flex;
297 | 	align-content: center;
298 | 	justify-content: center;
299 | 	box-sizing: border-box;
300 | 	border-top: 1px solid rgba(0, 0, 0, 0.1);
301 | }
302 | 
303 | .uploader-image {
304 | 	width: 100%;
305 | 	height: 360rpx;
306 | }
307 | 
308 | .tunnel {
309 | 	padding: 0 0 0 40rpx;
310 | }
311 | 
312 | .tunnel-text {
313 | 	position: relative;
314 | 	color: #222;
315 | 	display: flex;
316 | 	flex-direction: row;
317 | 	align-content: center;
318 | 	justify-content: space-between;
319 | 	box-sizing: border-box;
320 | 	border-top: 1px solid rgba(0, 0, 0, 0.1);
321 | }
322 | 
323 | .tunnel-text:first-child {
324 | 	border-top: none;
325 | }
326 | 
327 | .tunnel-switch {
328 | 	position: absolute;
329 | 	right: 20rpx;
330 | 	top: -2rpx;
331 | }
332 | 
333 | .disable {
334 | 	color: #888;
335 | }
336 | 
337 | .service {
338 | 	position: fixed;
339 | 	right: 40rpx;
340 | 	bottom: 40rpx;
341 | 	width: 140rpx;
342 | 	height: 140rpx;
343 | 	border-radius: 50%;
344 | 	background: linear-gradient(#007aff, #0063ce);
345 | 	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
346 | 	display: flex;
347 | 	align-content: center;
348 | 	justify-content: center;
349 | 	transition: all 300ms ease;
350 | }
351 | 
352 | .service-button {
353 | 	position: absolute;
354 | 	top: 40rpx;
355 | }
356 | 
357 | .service:active {
358 | 	box-shadow: none;
359 | }
360 | 
361 | .request-text {
362 | 	padding: 20rpx 0;
363 | 	font-size: 24rpx;
364 | 	line-height: 36rpx;
365 | 	word-break: break-all;
366 | }
367 | </style>
368 | 


--------------------------------------------------------------------------------
/pages/openapi/openapi.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<form class="list" @submit="submitTemplateMessageForm" report-submit>
  4 | 			<button class="list-item" form-type="submit"><text>发送模板消息</text></button>
  5 | 			<view class="list-item" v-if="templateMessageResult">
  6 | 				<text class="request-text">调用结果：{{ templateMessageResult }}</text>
  7 | 			</view>
  8 | 		</form>
  9 | 
 10 | 		<view class="guide">
 11 | 			<text class="headline">测试须知</text>
 12 | 			<text class="p">1. 需在手机上预览测试，工具中无效</text>
 13 | 			<text class="p">2. 需上传 cloudfunctions 目录下的 openapi 云函数</text>
 14 | 			<text class="p">3. 调用成功后返回到微信主界面查看收到的模板消息</text>
 15 | 		</view>
 16 | 
 17 | 		<view class="list">
 18 | 			<view class="list-item" @tap="onGetWXACode"><text>获取小程序码</text></view>
 19 | 			<view class="list-item" v-if="wxacodeResult">
 20 | 				<text class="request-text">{{ wxacodeResult }}</text>
 21 | 				<text class="request-text" v-if="showClearWXACodeCache" @tap="clearWXACodeCache">清除缓存</text>
 22 | 			</view>
 23 | 		</view>
 24 | 
 25 | 		<view class="guide">
 26 | 			<text class="headline">测试须知</text>
 27 | 			<text class="p">1. 需上传 cloudfunctions 目录下的 openapi 云函数</text>
 28 | 			<text class="p">2. 云函数中获取图片后会上传至存储空间并返回至小程序使用和缓存</text>
 29 | 			<text class="p">3. 云存储需设置为公有读</text>
 30 | 		</view>
 31 | 
 32 | 		<view class="guide"><image :src="wxacodeSrc" mode="aspectFit"></image></view>
 33 | 	</view>
 34 | </template>
 35 | <script>
 36 | Page({
 37 | 	data: {
 38 | 		templateMessageResult: '',
 39 | 		wxacodeSrc: '',
 40 | 		wxacodeResult: '',
 41 | 		showClearWXACodeCache: false
 42 | 	},
 43 | 	methods: {
 44 | 		setData: function(obj) {
 45 | 			let that = this;
 46 | 			let keys = [];
 47 | 			let val, data;
 48 | 			Object.keys(obj).forEach(function(key) {
 49 | 				keys = key.split('.');
 50 | 				val = obj[key];
 51 | 				data = that.$data;
 52 | 				keys.forEach(function(key2, index) {
 53 | 					if (index + 1 == keys.length) {
 54 | 						that.$set(data, key2, val);
 55 | 					} else {
 56 | 						if (!data[key2]) {
 57 | 							that.$set(data, key2, {});
 58 | 						}
 59 | 					}
 60 | 					data = data[key2];
 61 | 				});
 62 | 			});
 63 | 		},
 64 | 		submitTemplateMessageForm(e) {
 65 | 			this.setData({
 66 | 				templateMessageResult: ''
 67 | 			});
 68 | 
 69 | 			wx.cloud.callFunction({
 70 | 				name: 'openapi',
 71 | 				data: {
 72 | 					action: 'sendTemplateMessage',
 73 | 					formId: e.detail.formId
 74 | 				},
 75 | 				success: res => {
 76 | 					console.warn('[云函数] [openapi] templateMessage.send 调用成功：', res);
 77 | 					wx.showModal({
 78 | 						title: '发送成功',
 79 | 						content: '请返回微信主界面查看',
 80 | 						showCancel: false
 81 | 					});
 82 | 					wx.showToast({
 83 | 						title: '发送成功，请返回微信主界面查看'
 84 | 					});
 85 | 					this.setData({
 86 | 						templateMessageResult: JSON.stringify(res.result)
 87 | 					});
 88 | 				},
 89 | 				fail: err => {
 90 | 					wx.showToast({
 91 | 						icon: 'none',
 92 | 						title: '调用失败'
 93 | 					});
 94 | 					console.error('[云函数] [openapi] templateMessage.send 调用失败：', err);
 95 | 				}
 96 | 			});
 97 | 		},
 98 | 
 99 | 		onGetWXACode() {
100 | 			this.setData({
101 | 				wxacodeSrc: '',
102 | 				wxacodeResult: '',
103 | 				showClearWXACodeCache: false
104 | 			});
105 | 
106 | 			// 此处为演示，将使用 localStorage 缓存，正常开发中文件 ID 应存在数据库中
107 | 			const fileID = wx.getStorageSync('wxacodeCloudID');
108 | 
109 | 			if (fileID) {
110 | 				// 有云文件 ID 缓存，直接使用该 ID
111 | 				// 如需清除缓存，选择菜单栏中的 “工具 -> 清除缓存 -> 清除数据缓存”，或在 Storage 面板中删掉相应的 key
112 | 				this.setData({
113 | 					wxacodeSrc: fileID,
114 | 					wxacodeResult: `从本地缓存中取得了小程序码的云文件 ID`,
115 | 					showClearWXACodeCache: true
116 | 				});
117 | 				console.log(`从本地缓存中取得了小程序码的云文件 ID：${fileID}`);
118 | 			} else {
119 | 				wx.cloud.callFunction({
120 | 					name: 'openapi',
121 | 					data: {
122 | 						action: 'getWXACode'
123 | 					},
124 | 					success: res => {
125 | 						console.warn('[云函数] [openapi] wxacode.get 调用成功：', res);
126 | 						wx.showToast({
127 | 							title: '调用成功'
128 | 						});
129 | 						this.setData({
130 | 							wxacodeSrc: res.result,
131 | 							wxacodeResult: `云函数获取二维码成功`,
132 | 							showClearWXACodeCache: true
133 | 						});
134 | 						wx.setStorageSync('wxacodeCloudID', res.result);
135 | 					},
136 | 					fail: err => {
137 | 						wx.showToast({
138 | 							icon: 'none',
139 | 							title: '调用失败'
140 | 						});
141 | 						console.error('[云函数] [openapi] wxacode.get 调用失败：', err);
142 | 					}
143 | 				});
144 | 			}
145 | 		},
146 | 
147 | 		clearWXACodeCache() {
148 | 			wx.removeStorageSync('wxacodeCloudID');
149 | 
150 | 			this.setData({
151 | 				wxacodeSrc: '',
152 | 				wxacodeResult: '',
153 | 				showClearWXACodeCache: false
154 | 			});
155 | 
156 | 			wx.showToast({
157 | 				title: '清除成功'
158 | 			});
159 | 		}
160 | 	}
161 | });
162 | </script>
163 | <style>
164 | @import '../../style/guide.wxss';
165 | 
166 | .black {
167 | 	color: black;
168 | }
169 | </style>
170 | 


--------------------------------------------------------------------------------
/pages/storageConsole/storageConsole.vue:
--------------------------------------------------------------------------------
 1 | <!--pages/storageConsole/storageConsole.wxml-->
 2 | <template>
 3 | 	<view class="container">
 4 | 		<view class="list">
 5 | 			<view class="list-item" @tap="testCgi"><text class="black">上传成功</text></view>
 6 | 			<view class="list-item">
 7 | 				<text class="request-text">文件 ID：{{ fileID }}</text>
 8 | 			</view>
 9 | 			<view class="list-item">
10 | 				<text class="request-text">云文件路径：{{ cloudPath }}</text>
11 | 			</view>
12 | 			<view class="list-item"><image class="image1" :src="imagePath" mode="aspectFit"></image></view>
13 | 		</view>
14 | 
15 | 		<view class="guide">
16 | 			<!-- <image class="image1" src="{{imagePath}}" mode="aspectFit"></image> -->
17 | 			<text class="headline">云开发控制台中管理文件</text>
18 | 			<text class="p">1. 打开云开发控制台</text>
19 | 			<image class="image1" src="../../static/console-entrance.png" mode="aspectFit"></image>
20 | 			<text class="p">2. 切换到文件管理标签页</text>
21 | 			<text class="p">3. 可查看文件列表、管理权限</text>
22 | 			<text class="p">4. 详细的教程和 API 文件，可点击调试器中打印的链接查看</text>
23 | 		</view>
24 | 	</view>
25 | </template>
26 | <script>
27 | import { mapState } from 'vuex';
28 | 
29 | export default {
30 | 	computed: mapState(['openid']),
31 | 	data() {
32 | 		return { fileID: '', cloudPath: '', imagePath: '' };
33 | 	},
34 | 	onLoad: function(options) {
35 | // 		const { fileID, cloudPath, imagePath } = app.globalData;
36 | // 
37 | // 		this.setData({
38 | // 			fileID,
39 | // 			cloudPath,
40 | // 			imagePath
41 | // 		});
42 | 
43 | 		console.group('文件存储文档');
44 | 		console.log('https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html');
45 | 		console.groupEnd();
46 | 	},
47 | 	methods: {
48 | 		setData: function(obj) {
49 | 			let that = this;
50 | 			let keys = [];
51 | 			let val, data;
52 | 			Object.keys(obj).forEach(function(key) {
53 | 				keys = key.split('.');
54 | 				val = obj[key];
55 | 				data = that.$data;
56 | 				keys.forEach(function(key2, index) {
57 | 					if (index + 1 == keys.length) {
58 | 						that.$set(data, key2, val);
59 | 					} else {
60 | 						if (!data[key2]) {
61 | 							that.$set(data, key2, {});
62 | 						}
63 | 					}
64 | 					data = data[key2];
65 | 				});
66 | 			});
67 | 		}
68 | 	}
69 | };
70 | </script>
71 | <style>
72 | /* pages/storageConsole/storageConsole.wxss */
73 | 
74 | @import '../../style/guide.wxss';
75 | 
76 | .black {
77 | 	color: black;
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/pages/userConsole/userConsole.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<!--pages/userConsole/userConsole.wxml-->
 3 | 	<view class="container">
 4 | 		<view class="list">
 5 | 			<view class="list-item" @tap="testCgi"><text class="request-text">用户 openid 获取成功</text></view>
 6 | 			<view class="list-item" @tap="testCgi">
 7 | 				<text class="request-text">{{ openid }}</text>
 8 | 			</view>
 9 | 		</view>
10 | 
11 | 		<!-- 云开发用户管理指引 -->
12 | 		<view class="guide">
13 | 			<text class="headline">云开发管理用户</text>
14 | 			<text class="p">1. 打开云开发控制台</text>
15 | 			<image class="image1" src="../../static/console-entrance.png" mode="aspectFit"></image>
16 | 			<text class="p">2. 切换到 "用户管理" 标签页</text>
17 | 			<text class="p">3. 查看访问小程序的用户列表</text>
18 | 		</view>
19 | 	</view>
20 | </template>
21 | <script>
22 | import { mapState } from 'vuex';
23 | 
24 | export default {
25 | 	computed: mapState(['openid']),
26 | 	data() {
27 | 		return {};
28 | 	},
29 | 	onLoad: function(options) {
30 | 		
31 | 	}
32 | };
33 | </script>
34 | <style>
35 | @import '../../style/guide.wxss';
36 | </style>
37 | 


--------------------------------------------------------------------------------
/static/code-db-inc-dec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/code-db-inc-dec.png


--------------------------------------------------------------------------------
/static/code-db-onAdd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/code-db-onAdd.png


--------------------------------------------------------------------------------
/static/code-db-onQuery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/code-db-onQuery.png


--------------------------------------------------------------------------------
/static/code-db-onRemove.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/code-db-onRemove.png


--------------------------------------------------------------------------------
/static/code-func-sum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/code-func-sum.png


--------------------------------------------------------------------------------
/static/console-entrance.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/console-entrance.png


--------------------------------------------------------------------------------
/static/create-collection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/create-collection.png


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/logo.png


--------------------------------------------------------------------------------
/static/user-unlogin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/miniprogram-cloud/567deb3da5adbdb14e902069b597245637a47a62/static/user-unlogin.png


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const store = new Vuex.Store({
 7 | 	state: {
 8 | 		openid: "xxxxx",
 9 | 		userInfo: {},
10 | 		fileID: "",
11 | 		cloudPath: "",
12 | 		imagePath: "",
13 | 	},
14 | 	mutations: {
15 | 		getOpenId(state) {
16 | 			return openid;
17 | 		},
18 | 		setOpenId(state, openid) {
19 | 			state.openid = openid;
20 | 		},
21 | 		setUserInfo(state, userInfo) {
22 | 			state.userInfo = userInfo;
23 | 		},
24 | 		setFileID(state, fileID) {
25 | 			state.fileID = fileID;
26 | 		},
27 | 		setCloudPath(state, cloudPath) {
28 | 			state.cloudPath = cloudPath;
29 | 		},
30 | 		setImagePath(state, imagePath) {
31 | 			state.imagePath = imagePath;
32 | 		},
33 | 	}
34 | })
35 | 
36 | export default store
37 | 


--------------------------------------------------------------------------------
/style/guide.wxss:
--------------------------------------------------------------------------------
  1 | page {
  2 |   background: #f6f6f6;
  3 |   display: flex;
  4 |   flex-direction: column;
  5 |   justify-content: flex-start;
  6 | }
  7 | 
  8 | .list {
  9 |   margin-top: 40rpx;
 10 |   height: auto;
 11 |   width: 100%;
 12 |   background: #fff;
 13 |   padding: 0 40rpx;
 14 |   border: 1px solid rgba(0, 0, 0, 0.1);
 15 |   border-left: none;
 16 |   border-right: none;
 17 |   transition: all 300ms ease;
 18 |   display: flex;
 19 |   flex-direction: column;
 20 |   align-items: stretch;
 21 |   box-sizing: border-box;
 22 | }
 23 | 
 24 | .list-item {
 25 |   width: 100%;
 26 |   padding: 0;
 27 |   line-height: 104rpx;
 28 |   font-size: 34rpx;
 29 |   color: #007aff;
 30 |   border-top: 1px solid rgba(0, 0, 0, 0.1);
 31 |   display: flex;
 32 |   flex-direction: row;
 33 |   align-content: center;
 34 |   justify-content: space-between;
 35 |   box-sizing: border-box;
 36 | }
 37 | 
 38 | .list-item:first-child {
 39 |   border-top: none;
 40 | }
 41 | 
 42 | .list-item image {
 43 |   max-width: 100%;
 44 |   max-height: 20vh;
 45 |   margin: 20rpx 0;
 46 | }
 47 | 
 48 | .request-text {
 49 |   color: #222;
 50 |   padding: 20rpx 0;
 51 |   font-size: 24rpx;
 52 |   line-height: 36rpx;
 53 |   word-break: break-all;
 54 | }
 55 | 
 56 | .guide {
 57 |   width: 100%;
 58 |   padding: 40rpx;
 59 |   box-sizing: border-box;
 60 |   display: flex;
 61 |   flex-direction: column;
 62 | }
 63 | 
 64 | .guide .headline {
 65 |   font-size: 34rpx;
 66 |   font-weight: bold;
 67 |   color: #555;
 68 |   line-height: 40rpx;
 69 | }
 70 | 
 71 | .guide .p {
 72 |   margin-top: 20rpx;
 73 |   font-size: 28rpx;
 74 |   line-height: 36rpx;
 75 |   color: #666;
 76 | }
 77 | 
 78 | .guide .code {
 79 |   margin-top: 20rpx;
 80 |   font-size: 28rpx;
 81 |   line-height: 36rpx;
 82 |   color: #666;
 83 |   background: white;
 84 |   white-space: pre;
 85 | }
 86 | 
 87 | .guide .code-dark {
 88 |   margin-top: 20rpx;
 89 |   background: rgba(0, 0, 0, 0.8);
 90 |   padding: 20rpx;
 91 |   font-size: 28rpx;
 92 |   line-height: 36rpx;
 93 |   border-radius: 6rpx;
 94 |   color: #fff;
 95 |   white-space: pre
 96 | }
 97 | 
 98 | .guide image {
 99 |   max-width: 100%;
100 | }
101 | 
102 | .guide .image1 {
103 |   margin-top: 20rpx;
104 |   max-width: 100%;
105 |   width: 356px;
106 |   height: 47px;
107 | }
108 | 
109 | .guide .image2 {
110 |   margin-top: 20rpx;
111 |   width: 264px;
112 |   height: 100px;
113 | }
114 | 
115 | .guide .flat-image {
116 |   height: 100px;
117 | }
118 | 
119 | .guide .code-image {
120 |   max-width: 100%;
121 | }
122 | 
123 | .guide .copyBtn {
124 |   width: 180rpx;
125 |   font-size: 20rpx;
126 |   margin-top: 16rpx;
127 |   margin-left: 0;
128 | }
129 | 
130 | .guide .nav {
131 |   margin-top: 50rpx;
132 |   display: flex;
133 |   flex-direction: row;
134 |   align-content: space-between;
135 | }
136 | 
137 | .guide .nav .prev {
138 |   margin-left: unset;
139 | }
140 | 
141 | .guide .nav .next {
142 |   margin-right: unset;
143 | }
144 | 
145 | 


--------------------------------------------------------------------------------