Uni-app开发微信小程序的一些基础知识点包括开发工具的安装和项目的初始配置运行（边学边更新）_uni-app微信小程序

1、开发工具

---

首先说明Uni-app是以vue为基础的小程序开发，所以使用uni-app之前需要学习过VUE，知道怎么使用，也需要一些微信小程序的开发经验，这样也能看得懂编译后的代码

Uni-App官网

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1.1 HBuilder X 安装

---

这个工具专门为uni-app做过特别强化，开发起来呢也很方便，下载的话去官网直接下载，官网链接: HBuilder X下载链接
可以直接下载Zip解压即可用
安装好之后长这样：

1.2 微信开发者工具 安装

---

安装步骤：

• 第一步：去官网下载稳定版 微信官方文档·微信开发者工具下载页面
• 第二步：双击下载的exe文件
• 第三步：
  
  
  
  然后点击安装等待安装成功

1.3 HbuilderX 文档

HbuilderX 文档地址：https://hx.dcloud.net.cn/Tutorial/startup

2、创建初始项目运行

---

2.1 创建Uni-app项目

• 点击文件–>新建–>项目
  
• 按下图创建项目
  

2.2 运行

---

2.2.1 微信开发者工具服务端口

选择设置–>通用设置–>安全–>服务端口

2.2.2 将项目运行到微信开发者工具

• 这里可以选择开发者工具也就是在电脑上（我一般选择这个，因为方便）
• 点击运行到微信开发者工具后会弹出选择微信开发者工具的安装位置，这时就需要填写之前安装微信开发者工具的根目录了
  
• 如果要选择真机的话就需要USB和电脑连接，然后进入真机的开发者模式，每款手机的进入开发者模式的方式不一样，需要自己去查一查对应的开发者模式怎么打开。

2.2.3 运行后默认界面

3、初始项目介绍

---

补充说明：
main.js：项目的入口文件，也就是项目加载时，先加载main.js文件
manifest.json：负责管理打包的一些配置，指定应用名称，图标，权限等
pages.json：页面路由，负责设置整个项目的页面(pages)存放路径以及窗口外观(globalStyle)的

这里借用另一个博主的解释再说一遍
https://www.cnblogs.com/Chansea/p/15224176.html
博客园：烈雾风雨城
他是搭了一个空架子，全方位大概都考虑到了

详细

4、边学习边开发代码

---

4.1 生命周期

---

参考官网

<script>
	export default {
		//一开始进入时触发，只触发一次。
		onLaunch: function() {
			console.log('App Launch')
		},
		//显示时，触发onShow(就是显示页面，切回页面时显示)
		onShow: function() {
			console.log('App Show')
		},
		//隐藏时，触发onHide(就是切出页面时等等情况)
		onHide: function() {
			console.log('App Hide')
		},
		//发生异常时，触发onError
		onError: function(err){
			console.log("出现异常了,err")
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.2 配置

---

4.2.1 认识包含所有配置项的page.json

在page.json中

4.2.2 新建页面并配置路由

在pages文件夹中新建目录，并右键新建.vue文件，选择简单模板
，
然后在page.json文件中添加下列代码

{
		"path": "pages/learn/learn",
		"style": {
			"navigationBarTitleText": "学习Uni-app"
		}
}
1
2
3
4
5
6

4.2.3 其他配置

是否下拉刷新"enablePullDownRefresh": true
在H5中也设置下拉刷新

"h5": {
		"pullToRefresh": {
			"color": "#007AFF"
		}
}
1
2
3
4
5

配置TabBar，这里存的images是存在static文件夹中的

整个page.json的完整代码

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/learn/learn"
		},
		{
			"path": "pages/index/index"
		},
		{
			"path": "pages/my/my"
		}
	],
	"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/images/tabs/home.png",
				"selectedIconPath":"static/images/tabs/home-active.png"
			},
			{
				"text": "学习",
				"pagePath":"pages/learn/learn",
				"iconPath":"static/images/tabs/learn.png",
				"selectedIconPath":"static/images/tabs/learn-active.png"
			},
			{
				"text": "我们",
				"pagePath":"pages/my/my",
				"iconPath":"static/images/tabs/my.png",
				"selectedIconPath":"static/images/tabs/my-active.png"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "初步学习小程序",
		"enablePullDownRefresh": true,
		"navigationBarBackgroundColor": "#55aaff",
		"backgroundColor": "#55aaff",
		"h5": {
			"pullToRefresh": {
				"color": "#007AFF"
			}
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

4.3 一些组件的使用

---

这里我仿制国家反诈中心来做一个前端页面的小程序（纯前端）

4.3.1 轮播图

<template>
	<view class="slideshow">
		<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
			easing-function="true" indicator-dots='true'>
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.url"></image>
			</swiper-item>
		</swiper>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10

<script>
	export default {
		data() {
			return {
				bannerList: [{
						url: '../../static/images/slideshow1.png',
						text: 'text1'
					},
					{
						url: '../../static/images/slideshow2.jpg',
						text: 'text2'
					},
					{
						url: '../../static/images/slideshow3.jpg',
						text: 'text3'
					},
					{
						url: 'https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png',
						text: '#text4'
					}
				]
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

属性（搬运官网）

4.3.2 个人中心页面 iconfont 的使用

这个页面涉及iconfont的使用，因为有些icon存在本地显得很冗杂，所以使用阿里的图标库https://www.iconfont.cn/，有些许地一点点的麻烦

（1）官网素材库

可以在官网看到素材库中的图标库
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4

（2）将需要的 icon 加入购物车

点击购物车就能看到这样子

（3）然后将其添加至项目中

（这里可以新建一个项目，如果不会的话，可以去查查，蛮简单的，这里就不赘述了）
新建项目

（4）下载至本地

能在我的项目中找到，找到后点击下载至本地

（5）本地解压

后获得其中两个文件

（6）文件引入项目中

将这两个文件分别放入uni-app项目中的common和项目根目录下（这里我上网查询的时候都是放到static文件夹下，但是我试过了并没有用，所以最后放在了根目录，可能是有哪一步不太对，但是最后能用了(> - <)~~，可就将就了）

（7）在 iconfont.css 里引入 iconfont.ttf

打开iconfont.css，修改@font-face为下面内容，该内容就在文件的头部

@font-face {
  font-family: "iconfont"; /* Project id 3588612 */
  src: url('@/iconfont.ttf'); 
}
1
2
3
4

（8）页面引用CSS文件

在需要使用的页面引用CSS文件（当然，如果懒得话，或者这个是整个项目都使用的Icon的话，那么久全局引用即可）
① 页面引用
在style中写以下代码

@import url('@/common/iconfont.css');
1

②全局引用

<style lang="scss">
	/* 引入iconfont，下面写iconfont.css的存放路径 */
	@import "common/iconfont.css";
</style>

1
2
3
4
5

似乎是一样的，不过我没用全局的，如果使用全局的话自己试试

（9） 页面使用

icon的颜色大小可以重写
是icon的引用代码，是在iconfont中复制过来的

<view class="operation">
				<view class="audio">
					<view class="icon iconfont manual_icon">&#xe61a;</view>
					<view class="operation_text">音频录制</view>
				</view>
				<view class="manual">
					<view class="icon iconfont manual_icon">&#xe6be;</view>
					<view class="operation_text">用户手册</view>
				</view>
			</view>
1
2
3
4
5
6
7
8
9
10

效果图

4.4 页面完整代码和效果图（几乎未封装）

---

4.4.1 首页

代码比较长，没做删减

<template>
	<view class="content">
		<view class="box">
			<view class="head">
				<view class="title">
					<view class="logo">
						<image src="../../static/logo.png"></image>
					</view>
					<view class="title_text">国家反诈中心</view>
				</view>
				<view class="message">
					<image src="../../static/images/message-icon.png"></image>
				</view>
			</view>
			<view class="slideshow">
				<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
					easing-function="true" indicator-dots='true'>
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.url"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 使用for来复写率 -->
			<view class="canDo">
				<view class="onecandobox">
					<view class="oncando" v-for="(item, index) in functionList" :key="index">
						<view>
							<image :src="item.imageUrl" style="width: 110rpx;height: 110rpx;"></image>
						</view>
						<view>{{item.text}}</view>
					</view>
				</view>
			</view>
			<view class="risk">
				<view class="risk_title">风险自查</view>
				<view class="risk_content">
					<view class="risk_content_view">
						<view class="risk_content_view1">
							<view>APP自检</view>
							<view class="risk_content_explain">手机自测可以APP</view>
						</view>
					</view>
					<view class="risk_content_view">
						<view class="risk_content_view1">
							<view>风险查询</view>
							<view class="risk_content_explain">支付社交账号核验</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dynamic">
				<view class="dynamic_title">最新动态</view>
				<view class="dynamic_content" v-for="(item, index) in dynamicNewList" :key="index">
					<view class="dynamic_content_view">
						<view class="dynamic_content_text">
							<view>{{item.title}}</view>
							<view class="dynamic_content_text_source">
								<view>国家反诈中心</view>
								<view>{{ timeAgo(item.creatime) }}</view>
							</view>
						</view>
						<view class="dynamic_content_image">
							<image :src="item.image"></image>
						</view>
					</view>
					<view style="display: flex;margin-top:20rpx;margin-bottom: 20rpx;">
						<view style="background-color: lightgray; width: 100%; height: 1rpx;"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { timeago } from '../../static/js/time.js'
	export default {
		data() {
			return {
				title: 'Hello',
				imageURL: '../../static/images/back.jpg',
				username: '盈盈如玉',
				bannerList: [{
						url: '../../static/images/slideshow1.png',
						text: 'text1'
					},
					{
						url: '../../static/images/slideshow2.jpg',
						text: 'text2'
					},
					{
						url: '../../static/images/slideshow3.jpg',
						text: 'text3'
					},
					{
						url: 'https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png',
						text: '#text4'
					}
				],
				functionList: [{
						imageUrl: '../../static/images/functionIcon1.png',
						text: '我要举报'
					},
					{
						imageUrl: '../../static/images/functionIcon2.png',
						text: '报案助手'
					},
					{
						imageUrl: '../../static/images/functionIcon3.png',
						text: '来电预警'
					},
					{
						imageUrl: '../../static/images/functionIcon4.png',
						text: '身份核实'
					}
				],
				dynamicNewList: [{
						image: '../../static/images/news1.png',
						title: '国家网信办曝光一批涉未成年人电信诈骗典型案例',
						creatime: '2022/08/11 10:59:33'
					},
					{
						image: '../../static/images/news2.png',
						title: '养老诈骗的秘密，就藏在这七个成语里——',
						creatime: '2022/08/10 20:59:21'
					},
					{
						image: '../../static/images/news1.png',
						title: '你以为粉的网红回应了？其实你是被骗子盯上了！',
						creatime: '2022/08/05 13:59:09'
					},
					{
						image: '../../static/images/news1.png',
						title: '警惕这一骗局，教育部紧急提薪',
						creatime: '2022/07/28 10:59:22'
					}
				]
			}
		},
		onLoad() {

		},
		mounted() {},
		methods: {
			timeAgo(val) {
			    return timeago(val)
			}
		},
		//一开始进入时触发，只触发一次。
		onLaunch: function() {
			console.log('App Launch')
		},
		//显示时，触发onShow(就是显示页面，切回页面时显示)
		onShow: function() {
			console.log('App Show')
		},
		//隐藏时，触发onHide(就是切出页面时等等情况)
		onHide: function() {
			console.log('App Hide')
		},
		//发生异常时，触发onError
		onError: function(err) {
			console.log("出现异常了,err")
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgba(244, 244, 244, 0.6);

		// align-items: center;
		// justify-content: center;
		.box {
			padding-left: 40rpx;
			margin-top: 20rpx;
			margin-right: 40rpx;

			.head {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.title {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					.logo {
						margin-right: 20rpx;

						image {
							width: 70rpx;
							height: 70rpx;
						}
					}

					.title_text {
						font-size: 40rpx;
					}
				}

				.message {
					width: 50rpx;
					flex: 1;

					image {
						float: right;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.slideshow {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 350rpx;
				width: 900rpx;

				swiper {
					height: 100%;
					width: 100%;
				}
			}

			.canDo {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 5rpx;

				.onecandobox {
					display: flex;
					padding-left: 30rpx;

					.oncando {
						flex: 1;
						padding-right: 40rpx;
						font-size: 26rpx;
						padding-bottom: 20rpx;
						padding-top: 20rpx;
					}
				}
			}
			.risk {
				margin-top: 30rpx;
				.risk_title {
					font-size: 38rpx;
					margin-bottom: 15rpx;
				}
				.risk_content {
					display: flex;
					align-items: center;
					justify-content: center;

					.risk_content_view {
						height: 150rpx;
						flex: 1;
						display: flex;
						align-items: center;
						// justify-content: center;
						background-color: #fff;
						margin-right: 20rpx;
						border-radius: 10rpx;

						.risk_content_view1 {
							padding-left: 20rpx;

							.risk_content_explain {
								margin-top: 7rpx;
								font-size: 25rpx;
								color: darkgrey;
							}
						}
					}
				}
			}

			.dynamic {
				margin-top: 25rpx;

				.dynamic_title {
					font-size: 38rpx;
					margin-bottom: 15rpx;
				}
				.dynamic_content {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 20rpx;
					padding-top: 30rpx;
					height: 130rpx;
					.dynamic_content_view {
						display: flex;
						.dynamic_content_text {
							flex: 2;
							font-size: 31rpx;
							padding-right: 10rpx;
							.dynamic_content_text_source {
								display: flex;
								color: darkgrey;
								font-size: 24rpx;
								margin-top: 10rpx;
								view {
									margin-right: 30rpx;
								}
							}
						}
						.dynamic_content_image {
							flex: 1;
							image {
								height: 130rpx;
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
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
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332

4.4.2 骗局曝光页面（部分）

单独的两层tabbar在https://blog.csdn.net/qq_44035882/article/details/126305981

<template>
	<view>
		<!-- 顶tab -->
		<swiper class="top_tab">
			<swiper-item :class="{ 'toptab_item_active': index == taballCur }" v-for="(item, index) in tabListAll"
				:key="index" class="toptab_item" @click="clickCtAllTab(index)">
				<view>{{item.title}}</view>
			</swiper-item>
		</swiper>
		<view style="display: flex;margin-top:20rpx;margin-bottom: 20rpx;">
			<view style="background-color: #e2e2e2; width: 100%; height: 1rpx;"></view>
		</view>
		<!-- 内容信息 -->
		<view v-if="taballCur===0">
			<!-- tab部分 -->
			<swiper class="ct_tab">
				<swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index"
					class="ct_item" @click="clickCtTab(index)">
					<text v-text="item.title"></text>
				</swiper-item>
			</swiper>
			<view style="display: flex;margin-top:20rpx;margin-bottom: 20rpx;">
				<view style="background-color: #e2e2e2; width: 100%; height: 1rpx;"></view>
			</view>
			<view v-if="tabCur===0">
				<view class="recommend">
					<news-list></news-list>
				</view>
			</view>
			<view v-if="tabCur===1">
				<view>浙江</view>
			</view>
			<view v-if="tabCur===2">
				<view>各地动态</view>
			</view>
			<view v-if="tabCur===3">
				<view>小课堂</view>
			</view>
			<view v-if="tabCur===4">
				<view>视频</view>
			</view>
		</view>
		<view v-if="taballCur===1">
			<view>案例</view>
		</view>

	</view>
</template>

<script>
	import newsList from '../../common/component/newsList.vue'
	export default {
		components: { newsList },
		data() {
			return {
				tabCur: 0,
				taballCur: 0,
				tabListAll: [{
					title: '宣传',
				}, {
					title: '案例',
				}],
				// 二级tabbar的标题
				tabList: [{
					title: '推荐',
				}, {
					title: '浙江',
				}, {
					title: '各地动态',
				}, {
					title: '小课堂',
				}, {
					title: '视频',
				}]
			}
		},
		methods: {
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				console.log('tabCur点击了--->' + this.tabCur)
			},
			clickCtAllTab(ctallCur) {
				this.taballCur = ctallCur
				console.log('最顶上的ctallCur点击了--->' + this.taballCur)
			}
		}
	}
</script>

<style lang="scss">
	.top_tab {
		height: 60rpx;
		display: flex;
		align-items: center;
		width: 700upx;
		swiper-item {
			width: 350upx !important;
			text-align: center;
			font-size: 38rpx;
			font-weight: 600;
		}
		.toptab_item {
			flex: 1;
			display: inline-block;
			width: 350upx;
			text {
			}
		}
		.toptab_item_active {
			flex: 1;
			color: rgb(52, 80, 243);
			text {
				border-bottom: 2px solid rgb(52, 80, 243);
			}
		}
	}
	.ct_tab {
		width: 698upx;
		height: 40rpx;
		font-size: 30upx;
		color: rgb(104, 104, 104);
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		margin-left: 20rpx;
		swiper-item {
			width: 140upx !important;
			text-align: center;
		}
		.ct_item {
			flex: 1;
			width: 140upx;
			display: inline-block;
			text {
			}
		}
		.ct_active {
			color: rgb(52, 80, 243);
			text {
				background-color: aliceblue;
				padding: 20rpx;
			}
		}
	}
	swiper {
		width: 100%;
	}
	.recommend {
		margin-left: 30rpx;
		margin-right: 50rpx;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

4.4.3 个人中心页面

<template>
	<view class="box">
		<view class="blue_box_wan">
			<view class="blue_part">
				<view class="head">
					<view class="head_portrait">
						<image src="../../static/images/head_portrait.jpg"></image>
					</view>
					<view class="head_text_box">
						<view class="head_text">
							<view class="info">
								<view>您好，</view>
								<view>{{telephoneNumber}}</view>
							</view>
							<view class="more">点击查看个人信息 ></view>
						</view>
					</view>
				</view>
				<view class="record">
					<view class="report">
						<view>0</view>
						<view class="record_text">举报记录</view>
					</view>
					<view class="crime">
						<view>0</view>
						<view class="record_text">报案记录</view>
					</view>
				</view>
			</view>
		</view>
		<view class="operation_box">
			<view class="operation">
				<view class="audio">
					<view class="icon iconfont manual_icon">&#xe61a;</view>
					<view class="operation_text">音频录制</view>
				</view>
				<view class="manual">
					<view class="icon iconfont manual_icon">&#xe6be;</view>
					<view class="operation_text">用户手册</view>
				</view>
			</view>
		</view>
		<view class="list_box">
			<view class="list">
				<view class="list_view">
					<view class="icon iconfont manual_icon">&#xe625;</view>
					<view class="list_text">反馈与帮助</view>
					<view class="arrows">></view>
				</view>
				<line></line>
				<view class="list_view">
					<view class="icon iconfont manual_icon">&#xe628;</view>
					<view class="list_text">关于我们</view>
					<view class="arrows">></view>
				</view>
				<line></line>
				<view class="list_view">
					<view class="icon iconfont manual_icon">&#xe61d;</view>
					<view class="list_text">设置</view>
					<view class="arrows">></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import 'common/iconfont.css'
	import line from '../../common/component/line.vue'
	export default {
		components: { line },
		data () {
			return {
				telephoneNumber: '13400002326'
			}
		},
		created () {
			const telephone = this.telephoneNumber
			// 提取字符串某部分: 起始索引（开始位置），终止索引（结束位置）
			this.telephoneNumber = telephone.substring(0,3) +'****'+ telephone.substring(7)
		}
	}
</script>

<style lang="scss">
	@import url('@/common/iconfont.css');
	.box {
		background-color: rgba(244, 244, 244, 0.5);
		z-index: -999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.blue_box_wan {
			width: 100%;
			height: 450rpx;
			position: relative;
			z-index: -1;
			overflow: hidden;
			&::after {
				width: 140%;
				height: 100%;
				content: ''; 
				position: absolute;
				left: -20%;
				z-index: -1;
				top: 0;
				border-radius: 0 0 50% 50%;
				background-color: rgb(50, 82, 255);
			}
			.blue_part {
				padding-left: 40rpx;
				color: #fff;
				padding-top: 40rpx;
				.head {
					display: flex;
					.head_portrait {
						background-color: #fff;
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						z-index: 3;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							z-index: 1;
							position: absolute;
						}
					}
					.head_text_box {
						display: flex;
						align-items: center;
						justify-content: center;
						.head_text {
							margin-left: 20rpx;
							.info {
								display: flex;
								font-size: 45rpx;
							}
							.more {
								margin-top: 10rpx;
								font-size: 26rpx;
							}
						}
					}
				}
				.record {
					display: flex;
					height: 150rpx;
					width: 100%;
					align-items: center;
					justify-content: center;
					text-align: center;
					margin-bottom: 20rpx;
					margin-top: 30rpx;
					.crime,.report {
						flex: 1;
						.record_text {
							font-size: 25rpx;
						}
					}
				}
			}
		}
		.operation_box {
			display: flex;
			align-items: center;
			justify-content: center;
			.operation {
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				display: flex;
				text-align: center;
				margin-top: -80rpx;
				background-color: #fff;
				width: 90%;
				border-radius: 10rpx;
				.audio,.manual {
					flex: 1;
					.iconfont {
						font-size: 55rpx;
						color: #5555ff;
					}
					.operation_text {
						margin-top: 15rpx;
						font-size: 30rpx;
					}
				}
			}
		}
		.list_box {
			display: flex;
			align-items: center;
			justify-content: center;
			.list {
				background-color: #fff;
				width: 90%;
				margin-top: 20rpx;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.list_view {
					display: flex;
					align-items: center;
					justify-content: center;
					.iconfont {
						flex: 1;
						font-size: 45rpx;
						color: #5555ff;
						margin-left: 20rpx;
					}
					.list_text {
						flex: 8;
					}
					.arrows {
						flex: 1;
					}
				}
			}
		}
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
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

获取当前时间并格式化

    // 获取当前时间
    // getCurrentTime() {
    //   // 获取当前时间并打印
    //   var _this = this
    //   const yy = new Date().getFullYear()
    //   const mm = new Date().getMonth() + 1
    //   const dd = new Date().getDate()
    //   const hh = new Date().getHours()
    //   const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
    //   const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
    //   _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
    //   // console.log(_this.gettime)
    //   return _this.gettime
    // },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5、一些后续开发的页面

---

这里的列表右边的icon换了种写法，之前都是直接给的大于符号，后面发现有更好更改的代码，这里就是这种
这个页面是后面再次开发其他的小程序的时候写的，不是接着国家反炸中心写的

5.1 代码生成

---

这里推荐一个可以通过图片生成代码的网站，如果没有UI设计图的话，可以找找上面的可以用的，快速开发
即时: https://js.design/square?classify=all

5.1.1 在资源广场中寻找自己想要的样式

5.1.2 找到之后查看详情将其使用

点击使用保存至自己的工作台

5.1.3 使用CODE.FUN插件

有些许的忘记了怎么配的了，看看这个https://blog.csdn.net/baidu_39135917/article/details/118699573
应该可以，如果我记起来了，我再写进来

配置好后就可以在刚刚保存的文件中点击要生成代码的页面，右键选择插件

这个时候就会看到

再之后就会出现弹窗，，这时需要选择自己的项目（没有的话新建一个），然后点击上传等待生成就好

生成成功后跳转至Code.fun，此时项目中就有当前页面，点进去，点击预览，看右下角配置需要的平台，我这里选择的是uni-app，你们可以自行选择，除了css的命名不是很直观以外，快速开发还是很好用的

5.1.4 页面代码

<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
						mode="widthFix">
					</image>
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							昵称：{{ user.nickName }}
						</view>
					</view>
				</view>
				<view @click="handleToInfo" class="flex align-center">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

    <!-- 订单icon -->
		<view class="content-section">
      <mineOrderIcon></mineOrderIcon>
		</view>
    
    <view class="menu-list">
        <mine-serve></mine-serve>
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>编辑资料</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleHelp">
					<view class="menu-item-box">
						<view class="iconfont icon-help menu-icon"></view>
						<view>常见问题</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleAbout">
					<view class="menu-item-box">
						<view class="iconfont icon-aixin menu-icon"></view>
						<view>关于我们</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<view class="iconfont icon-setting menu-icon"></view>
						<view>应用设置</view>
					</view>
				</view>
			</view>

	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getUserProfile
	} from "@/api/system/user"
  
  import mineOrderIcon from "./components/mine-order-icon.vue"
  import mineServe from "./components/mine-serve.vue"
	export default {
		data() {
			return {
				name: this.$store.state.user.name,
				roles: this.$store.state.user.roles,
				version: getApp().globalData.config.appInfo.version,
				user: {}
			}
		},
    components: {
      mineOrderIcon,
      mineServe
    },
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		created() {
			console.log(this.$store.state.user)
			console.log(this.roles)
			// 数据
			getUserProfile().then(response => {
				this.user = response.data
				console.log(this.user)
			})
		},
		methods: {
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToMyOrderList() {
				this.$tab.navigateTo('/pages/myOrder/index')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleToRentOrder() {
				this.$tab.navigateTo('/pages/rentOrder/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #3db963;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 16px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -100rpx;
		}
    .menu-list {
      margin-top: -70rpx;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

.list-cell-arrow::before {
    content: ' ';
    height: 10px;
    width: 10px;
    border-width: 2px 2px 0 0;
    border-color: #c0c0c0;
    border-style: solid;
    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 30rpx;
  }
  
  .list-cell {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    padding: 26rpx 30rpx;
  }
  
  .list-cell:first-child {
    border-radius: 8rpx 8rpx 0 0;
  }
  
  .list-cell:last-child {
    border-radius: 0 0 8rpx 8rpx;
  }
  
  .list-cell::after {
    content: '';
    position: absolute;
    border-bottom: 1px solid #eaeef1;
    -webkit-transform: scaleY(0.5) translateZ(0);
    transform: scaleY(0.5) translateZ(0);
    transform-origin: 0 100%;
    bottom: 0;
    right: 0;
    left: 0;
    pointer-events: none;
  }
  
  
  .menu-list {
    margin: 15px 15px;
  
    .menu-item-box {
      width: 100%;
      display: flex;
      align-items: center;
  
      .menu-icon {
        color: #007AFF;
        font-size: 16px;
        margin-right: 5px;
      }
      
      .text-right {
        margin-left: auto;
        margin-right: 34rpx;
        color: #999;
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

20203.3.22

6、常用方法

6.1 onReachBottom触底刷新

先在配置router的地方找到需要触底刷新的页面，添加 "enablePullDownRefresh": true,代码

    {
      "path": "pages/profit/definite/index",
      "style": {
        "navigationBarTitleText": "佣金明细",
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50  // 50代表距离底部多少的距离 这个根据自己的需求 一般都是50
      }
    },
1
2
3
4
5
6
7
8

然后在编辑需要触底页面的.vue 文件，与methods同级添加以下方法，具体内容更新状况根据自己的数据情况来编写

onReachBottom() {
			console.log("到底了")
			this.page++; // 每触底一次 page +1
			this.getData(); // 获取数据的函数，比如触底一次更改传递的参数多加载多少个数据或者多加载多少页的数据
		},

1
2
3
4
5
6

持续更新中。。。