技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

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

 收录于 App
   约 8044 字   预计阅读 17 分钟 
https://bing.ee123.net/img/rand?artid=126177321

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

文章目录

1、开发工具

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

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

1.1 HBuilder X 安装

这个工具专门为uni-app做过特别强化，开发起来呢也很方便，下载的话去官网直接下载，官网链接:

可以直接下载Zip解压即可用

安装好之后长这样：

https://i-blog.csdnimg.cn/blog_migrate/d416cd5746cf48d64ae4872eeb2874b3.png

1.2 微信开发者工具 安装

安装步骤：

  • 第一步：去官网下载稳定版

  • 第二步：双击下载的exe文件

  • 第三步：

    https://i-blog.csdnimg.cn/blog_migrate/e5ca6b0c12b318ffd3efe81562c8e1ac.png

    https://i-blog.csdnimg.cn/blog_migrate/55c6ad1a226fae52e42e4520dd47ac45.png

    https://i-blog.csdnimg.cn/blog_migrate/42a61a7822831b953238588e0dfb1f59.png

    然后点击安装等待安装成功

https://i-blog.csdnimg.cn/blog_migrate/ab1c91ce9bef2a5f4e5a0674ee2c977b.png

1.3 HbuilderX 文档

HbuilderX 文档地址：

2、创建初始项目运行

2.1 创建Uni-app项目

  • 点击文件–>新建–>项目

    https://i-blog.csdnimg.cn/blog_migrate/35733da994fa3d487073f03e279e754d.png

  • 按下图创建项目

    https://i-blog.csdnimg.cn/blog_migrate/57488ab2425d33f48046a94d72cc34ae.png

2.2 运行

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

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

https://i-blog.csdnimg.cn/blog_migrate/05e1a5467456cfdd5470ead77e77cd6a.png

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

  • 这里可以选择开发者工具也就是在电脑上（我一般选择这个，因为方便）

  • 点击运行到微信开发者工具后会弹出选择微信开发者工具的安装位置，这时就需要填写之前安装微信开发者工具的根目录了

    https://i-blog.csdnimg.cn/blog_migrate/9ff9e5fc3b6b265cec3b8f6e8319a3c2.png

  • 如果要选择真机的话就需要USB和电脑连接，然后进入真机的开发者模式，每款手机的进入开发者模式的方式不一样，需要自己去查一查对应的开发者模式怎么打开。

2.2.3 运行后默认界面

https://i-blog.csdnimg.cn/blog_migrate/86971f8ab84d1a78ca71f1d312b3f37c.png

3、初始项目介绍

补充说明：

main.js：项目的入口文件，也就是项目加载时，先加载main.js文件

manifest.json：负责管理打包的一些配置，指定应用名称，图标，权限等

pages.json：页面路由，负责设置整个项目的页面(pages)存放路径以及窗口外观(globalStyle)的

https://i-blog.csdnimg.cn/blog_migrate/b8b0d41d1ee9d388dd0e16a0900edea8.png

这里借用另一个博主的解释再说一遍

博客园：烈雾风雨城

他是搭了一个空架子，全方位大概都考虑到了

https://i-blog.csdnimg.cn/blog_migrate/df773dda63b99b56b5a6d1266abbcc46.png

详细

层级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 生命周期

参考官网

https://i-blog.csdnimg.cn/blog_migrate/519780d2fc79b61cba6d24ce8e874e62.png

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

https://i-blog.csdnimg.cn/blog_migrate/802eb8ad1da14d25111b95328d2c53c5.png https://i-blog.csdnimg.cn/blog_migrate/2bb448555a8e3be3665fd0df96c4cfdb.png

4.2.2 新建页面并配置路由

在pages文件夹中新建目录，并右键新建.vue文件，选择简单模板

https://i-blog.csdnimg.cn/blog_migrate/ded9ce5606b274b92cc83c8204b1a5a7.png ， https://i-blog.csdnimg.cn/blog_migrate/960e83511f88bf0f3b7da9cfd58e0aa0.png

然后在page.json文件中添加下列代码

{
		"path": "pages/learn/learn",
		"style": {
			"navigationBarTitleText": "学习Uni-app"
		}
}
4.2.3 其他配置

是否下拉刷新 "enablePullDownRefresh": true

在H5中也设置下拉刷新

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

https://i-blog.csdnimg.cn/blog_migrate/e503ff2a39398d5052b8ea12a3f2dac7.png

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

https://i-blog.csdnimg.cn/blog_migrate/2f432226f915cc869bec47651da254fa.png https://i-blog.csdnimg.cn/blog_migrate/a2c28cb393031eff57eabf594df9f669.png

整个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 轮播图

https://i-blog.csdnimg.cn/blog_migrate/d75f5a388ced6e465745eae1014d775a.gif

<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 存在本地显得很冗杂，所以使用阿里的图标库 ，有些许地一点点的麻烦

（1）官网素材库

可以在官网看到素材库中的图标库

https://i-blog.csdnimg.cn/blog_migrate/6eacc339d9d429708eb4cdd39400ee0e.png

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

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

https://i-blog.csdnimg.cn/blog_migrate/e3db0967e8119c4a3c57d4c1b6b9f9da.png

https://i-blog.csdnimg.cn/blog_migrate/0579ccb0b62fdda54265533eb3d20077.png

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

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

https://i-blog.csdnimg.cn/blog_migrate/d30d96976c7de54ccb028d79c2ee0828.png 新建项目 https://i-blog.csdnimg.cn/blog_migrate/deb946d9d4925f069925cf08a6ba678d.png

（4）下载至本地

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

https://i-blog.csdnimg.cn/blog_migrate/a651529e9a919ee6fff4f4837dbae02d.png

（5）本地解压

后获得其中两个文件

https://i-blog.csdnimg.cn/blog_migrate/28771a5501ecf69d2ae1b28eb6832886.png

（6）文件引入项目中

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

https://i-blog.csdnimg.cn/blog_migrate/dcd83e5f0ececa5d956785bd8cb03af2.png

（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 中写以下代码

https://i-blog.csdnimg.cn/blog_migrate/5e1304e50413b0ec56fea1cb018799f3.png

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

②全局引用

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

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

（9） 页面使用

icon 的颜色大小可以重写

&#xe61a; 是 icon 的引用代码，是在 iconfont 中复制过来的

https://i-blog.csdnimg.cn/blog_migrate/bb46139f0aca3cab3c4058088b61eef0.png

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

效果图 https://i-blog.csdnimg.cn/blog_migrate/5e7c638e26f64fb0eb33a550d00aaa2e.png

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

4.4.1 首页

代码比较长，没做删减

https://i-blog.csdnimg.cn/blog_migrate/4b973e897e237734c119077394537dbf.png

<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 骗局曝光页面（部分）

https://i-blog.csdnimg.cn/blog_migrate/c8a6693e1ea2f647a90780b1befbb052.png

单独的两层tabbar在

<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 个人中心页面

https://i-blog.csdnimg.cn/blog_migrate/58a87db6316bdc19628b2e1ee4012231.png

<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、一些后续开发的页面

https://i-blog.csdnimg.cn/blog_migrate/c943b9045567f89f742098809db666a8.png

这里的列表右边的icon换了种写法，之前都是直接给的大于符号，后面发现有更好更改的代码，这里就是这种

这个页面是后面再次开发其他的小程序的时候写的，不是接着国家反炸中心写的

5.1 代码生成

这里推荐一个可以通过图片生成代码的网站，如果没有UI设计图的话，可以找找上面的可以用的，快速开发

即时:

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

https://i-blog.csdnimg.cn/blog_migrate/4e96f5566ab1f878d2132837e5619f4b.png

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

点击使用保存至自己的工作台 https://i-blog.csdnimg.cn/blog_migrate/59ce4e4ccb92cf654d661dc888c6d5e6.png

https://i-blog.csdnimg.cn/blog_migrate/53b5f70b5bd8eacd057c0533431c5614.png

5.1.3 使用CODE.FUN插件

有些许的忘记了怎么配的了，看看这个

应该可以，如果我记起来了，我再写进来

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

https://i-blog.csdnimg.cn/blog_migrate/7011d7082177a6882b713df4bf60cb2f.png

这个时候就会看到 https://i-blog.csdnimg.cn/blog_migrate/4ec6e30a160b348b68a168cd9dcb9276.png

再之后就会出现弹窗， https://i-blog.csdnimg.cn/blog_migrate/40369503ff915da0992669cb94981e8e.png ，这时需要选择自己的项目（没有的话新建一个），然后点击上传等待生成就好

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

https://i-blog.csdnimg.cn/blog_migrate/ad18e38b9c91a0df8d9262d897cfd131.png

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(); // 获取数据的函数，比如触底一次更改传递的参数多加载多少个数据或者多加载多少页的数据
		},

持续更新中。。。

68747470733a2f2f62:6c6f672e6373646e2e6e65742f71715f34343033353838322f:61727469636c652f64657461696c732f313236313737333231

更新于 2022-08-05
 微信小程序, Vue
返回 | 主页