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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

---

文章内容

• 1、开发工具
  • 1.1 HBuilder X 安装
  • 1.2 微信开发者工具 安装
  • 1.3 HbuilderX 文档
• 2、创建初始项目运行
  • 2.1 创建Uni-app项目
  • 2.2 运行
    • 2.2.1 微信开发者工具服务端口
    • 2.2.2 将项目运行到微信开发者工具
    • 2.2.3 运行后默认界面
• 3、初始项目介绍
• 4、边学习边开发代码
  • 4.1 生命周期
  • 4.2 配置
    • 4.2.1 认识包含所有配置项的page.json
    • 4.2.2 新建页面并配置路由
    • 4.2.3 其他配置
  • 4.3 一些组件的使用
    • 4.3.1 轮播图
    • 4.3.2 个人中心页面 iconfont 的使用
      • （1）官网素材库
      • （2）将需要的 icon 加入购物车
      • （3）然后将其添加至项目中
      • （4）下载至本地
      • （5）本地解压
      • （6）文件引入项目中
      • （7）在 iconfont.css 里引入 iconfont.ttf
      • （8）页面引用CSS文件
      • （9） 页面使用
  • 4.4 页面完整代码和效果图（几乎未封装）
    • 4.4.1 首页
    • 4.4.2 骗局曝光页面（部分）
    • 4.4.3 个人中心页面

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 文档地址：hx.dcloud.net.cn/Tutorial/st…

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)的

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

层级1	层级2	层级3	描述
api			各个模块接口文件夹
	login.js		登录模块接口文件
common			公共模块，包含公共基础css等
	base.css		公共基础css
components			符合vue组件规范的uni-app组件目录
node_modules			nodejs相关依赖包文件目录
pages			业务页面文件存放的目录
	index		index文件夹
		index.vue 主页面
	login		login文件夹
		index.vue 登录主页面
static			存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此，不要放css文件
store			vuex目录，也是存放公共属性方法的地方
	index.js		vuex的主文件
uni_modules			插件市场下载的第三方UI组件目录，存放uni_module规范的插件。
unpackage			打包目录，这里有各个平台的打包文件。
utils			全局公共方法目录
	common.js		封装的公共可复用的方法属性文件（针对当前项目）
	request.js		封装的公共请求方法文件
	utils.js		封装的公共可复用的方法属性文件（针对所有项目）
App.vue			应用配置文件，用来配置App全局样式以及监听应用生命周期
main.js			Vue初始化入口文件
manifest.json			配置应用名称、appid、logo、版本等打包信息的文件
package.json			项目配置信息文件，依赖模块的定义
package-lock.json			1.锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 2.加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可，不需要做额外的工作
pages.json			配置页面路由、导航条、选项卡等页面类信息的文件
uni.scss			自带的公共的css修饰文件
README.md			文档说明，可包含目录文件名称对比，注意事项，框架使用，技术架构，Git或SVN地址，账号密码等

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>

4.2 配置

---

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

在page.json中

4.2.2 新建页面并配置路由

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

{
		"path": "pages/learn/learn",
		"style": {
			"navigationBarTitleText": "学习Uni-app"
		}
}

4.2.3 其他配置

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

"h5": {
		"pullToRefresh": {
			"color": "#007AFF"
		}
}

配置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"
			}
		}
	}
}

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>

<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>

属性（搬运官网）

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
active-class	String		swiper-item	可见时的 class 支付宝小程序
changing-class	String		acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class	支付宝小程序
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序、飞书小程序不支持
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序、飞书小程序不支持
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	支付宝小程序
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。	支付宝小程序
display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	App、微信小程序、京东小程序
disable-touch	Boolean	false	是否禁止用户 touch 操作	App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更	字节跳动小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序、京东小程序
@change EventHandle	current		改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，	支付宝小程序暂不支持dx, dy App、H5、微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	字节跳动小程序与飞书小程序不支持

4.3.2 个人中心页面 iconfont 的使用

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

（1）官网素材库

可以在官网看到素材库中的图标库 www.iconfont.cn/collections…

（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'); 
}

（8）页面引用CSS文件

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

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

②全局引用

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

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

（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>

效果图

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>

4.4.2 骗局曝光页面（部分）

单独的两层tabbar在blog.csdn.net/qq_44035882…

<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>

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>

持续更新中。。。