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

已于 2023-03-22 15:34:27 修改
阅读量5.9k 收藏 39
点赞数 7
分类专栏： Uni-APP 文章标签： 微信小程序 vue.js
于 2022-08-05 16:49:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44035882/article/details/126177321
版权

文章目录

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 微信开发者工具 安装

安装步骤：

在这里插入图片描述

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
博客园：烈雾风雨城
他是搭了一个空架子，全方位大概都考虑到了
在这里插入图片描述
详细

层级1层级2层级3描述
api各个模块接口文件夹
login.js登录模块接口文件
common公共模块，包含公共基础css等
base.css公共基础css
components符合vue组件规范的uni-app组件目录
node_modulesnodejs相关依赖包文件目录
pages业务页面文件存放的目录
indexindex文件夹
index.vue 主页面
loginlogin文件夹
index.vue 登录主页面
static存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此，不要放css文件
storevuex目录，也是存放公共属性方法的地方
index.jsvuex的主文件
uni_modules插件市场下载的第三方UI组件目录，存放uni_module规范的插件。
unpackage打包目录，这里有各个平台的打包文件。
utils全局公共方法目录
common.js封装的公共可复用的方法属性文件（针对当前项目）
request.js封装的公共请求方法文件
utils.js封装的公共可复用的方法属性文件（针对所有项目）
App.vue应用配置文件，用来配置App全局样式以及监听应用生命周期
main.jsVue初始化入口文件
manifest.json配置应用名称、appid、logo、版本等打包信息的文件
package.json项目配置信息文件，依赖模块的定义
package-lock.json1.锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 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-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#000000当前选中的指示点颜色
active-classStringswiper-item可见时的 class 支付宝小程序
changing-classStringacceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class支付宝小程序
autoplayBooleanfalse是否自动切换
currentNumber0当前所在滑块的 index
current-item-idString当前所在滑块的 item-id ，不能与 current 被同时指定支付宝小程序不支持
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长app-nvue不支持
circularBooleanfalse是否采用衔接滑动，即播放到末尾后重新回到开头
verticalBooleanfalse滑动方向是否为纵向
previous-marginString0px前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值app-nvue、字节跳动小程序、飞书小程序不支持
next-marginString0px后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值app-nvue、字节跳动小程序、飞书小程序不支持
accelerationBooleanfalse当开启时，会根据滑动速度，连续滑动多屏支付宝小程序
disable-programmatic-animationBooleanfalse是否禁用代码变动触发 swiper 切换时使用动画。支付宝小程序
display-multiple-itemsNumber1同时显示的滑块数量app-nvue、支付宝小程序不支持
skip-hidden-item-layoutBooleanfalse是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息App、微信小程序、京东小程序
disable-touchBooleanfalse是否禁止用户 touch 操作App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchableBooleantrue是否监听用户的触摸事件，只在初始化时有效，不能动态变更字节跳动小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-functionStringdefault指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic微信小程序、快手小程序、京东小程序
@change EventHandlecurrent改变时会触发 change 事件，event.detail = {current: current, source: source}
@transitionEventHandleswiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy App、H5、微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序
@animationfinishEventHandle动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}字节跳动小程序与飞书小程序不支持
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'); 
}
（8）页面引用CSS文件

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

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

②全局引用

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

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

（9） 页面使用

icon的颜色大小可以重写
&#xe61a;是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在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>
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>

获取当前时间并格式化

    // 获取当前时间
    // 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
    // },

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>



.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;
      }
    }
  }

20203.3.22

6、常用方法

6.1 onReachBottom触底刷新

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

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

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

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

持续更新中。。。

鲤鱼_599
关注
  • 7
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uin-app微信小程序开发
weixin_70380078的博客
06-21 5001
uni-app 由 DCloud 公司开发，是一个使用 Vue.js 开发所有前端应用的框架，开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。在开始连接数据库之前，首先需要考虑的是选择哪种类型的数据库。五：在打开的命令框中找到对应的解压文件夹，如：d盘输入 D:，E盘就输入 E:。
微信小程序使用uni-app开发小程序及部分功能实现详解心得
Fang2001131919的博客
06-19 4539
uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；到此这篇关于微信小程序使用uni-app开发小程序及部分功能实现的文章就介绍到这了,更多相关微信小程序用uni-app开发小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
如何使用uni-app开发微信小程序
yong_19930826的博客
06-14 1万+
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅。
【用vue开发微信小程序】（uni-app）（自用，不推荐参考）
热门推荐
sp_zhaoyun的博客
07-29 3万+
笔记自用
uniapp 之 开发微信小程序入门详细指南
最新发布
ZhuangWei的博客
04-27 2063
1、HbuilderX打包需要邀请项目成员，是该项目下的成员方可打包发布；2、开发阶段，不涉及接口可以使用自己申请的临时测试号进行开发；3、开发阶段，调接口的话需要使用一致的正式申请的AppID，且开发人员（这里实质是登录微信开发者的微信号）是该小程序下的开发者角色。完结。
uniapp开发的App（安卓）端跳转uniapp微信小程序
章小鱼的博客
08-02 6848
App跳转微信小程序的两种方法，适合自己的才是最好的。
uniapp 总结篇 （小程序）
^_^
07-23 2万+
做了很长时间的小程序了，在此做一个完整的项目总结，希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理，更重要的是帮助大家实现功能、流程。uniapp还是很强大的可以开发小程序、h5、pc、app。...
Uni-app框架（小程序开发） 笔记
weixin_43925969的博客
09-18 1728
┌─components uni-app组件目录│ └─comp-a.vue 可复用的a组件├─hybrid 存放本地网页的目录， 详见├─pages 业务页面文件存放的目录│ ├─index│ │ └─index.vue index页面│ └─list│ └─list.vue list页面├─static 存放应用引用静态资源（如图片、视频等）的目录， 注意： 静态资源只能存放于此├─wxcomponents 存放小程序组件的目录， 详见├─main.js Vue初始化入口文件。
119.【Uniapp】
qq_69683957的博客
06-14 1339
uni-app(一)、uni-app 起步1.Uniapp简介2.Uniapp开发工具(1).下载HbuilderX(2).安装scss/sass编译(3).快捷键方案切换(4).修改编辑器的基本设置3.新建 uni-app项目4.uniapp 的目录结构5.把项目运行到微信开发者工具中(1).填写自己的微信小程序的AppID:(2).在HBuilderX中，配置微信开发者工具的安装路径(3).在微信开发者工具中， 通过 设置-> 安全设置-面板，开启微信开发者工具的服务端口(4).在Hbuilder
Uniapp和微信小程序的区别2023（详细）
我们好像在哪见过
07-15 3834
UniApp和微信小程序有一些区别，尽管它们都是用于开发小程序的框架，但在一些方面有所不同。以下是它们的区别：
快速入门uniapp——从环境搭建到项目实践
杜永康的博客
07-04 2364
⭐⭐什么是UniApp？UniApp是一个基于Vue.js的跨平台应用开发框架，它可以帮助开发者使用一套代码构建同时运行在多个平台（包括iOS、Android、Web等）的应用程序。UniApp采用了一种基于原生渲染的方式，通过编译将应用程序转换为原生平台能够识别和运行的代码。UniApp的主要目标是提供一种高效、简单和灵活的开发方式，使开发者能够快速构建跨平台应用程序，无需针对不同平台编写独立的代码。
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
uni-app使用微信小程序云函数的步骤示例
10-15
uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序平台上运行的后端逻辑，开发者可以在云端编写和执行代码，无需搭建...
使用uni-app开发微信小程序的实现
10-15
主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni-app 开发 微信小程序 优选商城
02-24
利用 uni-app 技术实现微信小程序的开发，进而实现了一次开发多端部署。 优选商城拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。 涵盖了分包、vuex、组件化开发等核心技术点的使用。 注：...
快速使用uni-app搭建小程序项目
weixin_61949766的博客
05-23 1875
快速搭建uniapp 微信小程序项目
uni-app开发者必看：如何轻松适配微信小程序？
weixin_64051447的博客
12-14 689
行吧，已经走到这一步了，其实替代方案也是有的，看步骤！如果在小程序的组件中，传过去的函数需要用到当前组件里的参数，这个就不太好传了，因为table组件里只会传入row(列表行数据对象)、col(列名)这种参数，所以如果要用到组件内的其他参数传到table组件，一般要提到全局，可以给到状态管理，也可以给全局属性，看需要了。vendor.js这个是小程序里面所有第三方库的压缩包，这个一般不小，要压缩这个，官方有说明方法，这里提一下，在package.json里加上这段，注意得是cli创建的项目才会有用。
微信小程序开发工具和uniapp是什么关系
AlphaFinance
12-29 1168
所以，微信小程序开发工具和uniapp之间的关系是：微信小程序开发工具是用于原生微信小程序开发的开发环境，而uniapp是一个跨平台的前端框架，允许在微信小程序开发工具中使用相同的代码库来创建多个平台的应用，其中之一就是微信小程序。uniapp（前身为Weex）是一个跨平台的前端框架，允许开发者使用一套代码基于Vue.js语法来创建多个平台的应用，包括微信小程序、App（iOS和Android）、H5等。uniapp支持使用微信小程序开发工具来进行微信小程序的开发和调试，同时还支持其他平台的构建和发布。
使用uni-app进行小程序开发
weixin_68155905的博客
06-20 1196
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp开发微信小程序
06-12
好的，您想了解关于uniapp开发微信小程序的相关内容，对吗？那么我可以为您提供一些基本的信息。 Uniapp是一个跨平台开发框架，可以帮助开发者一次性编写代码，将应用程序发布到多个平台。其中，微信小程序是Uniapp支持的一个平台之一。Uniapp提供了一些小程序专属的API和组件，可以方便地进行微信小程序的开发。 可以通过以下步骤开发微信小程序： 1. 在Uniapp中创建一个新的项目，并选择微信小程序作为发布平台。 2. 在Uniapp中编写代码，包括页面、组件、样式和逻辑等。 3. 使用Uniapp提供的小程序专属API和组件实现微信小程序的特定功能。 4. 在微信小程序开发者工具中进行测试和调试。 5. 将小程序发布到微信小程序平台，供用户使用。 希望这些信息能够帮助您了解uniapp开发微信小程序的基本流程。如果您有其他问题，可以随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值