uniapp 总结篇 （小程序）

news2025/2/25 11:47:58

前期概述：做了很长时间的小程序了，在此做一个完整的项目总结，希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理，更重要的是帮助大家实现功能、流程。

uniapp 还是很强大的 可以开发 小程序、h5、pc、app

一、创建项目及初始化步骤

（1）创建

（2）启动小程序 

 启动小程序 最好现在uniapp中配置一下小程序的appid 否则可能会出现启动不了的情况
步骤：

1.微信公众平台查看自己的小程序id  开发 → 开发管理 → 开发设置 → 找到appid

2.在uniapp 中进行配置  目录下的manifest.json → 微信小程序配置 → 填写小程序appid

（3）目录结构

├── pages              # 页面  （每个页面可以作为一个文件）
├── static               # 静态资源 （图片、音视频）
├── unpackage      # 打包文件 
├── App.vue          # 主文件（可以定义全局方法、样式、变量）
├── main.js            #  入口 （引入插件）
├── pages.json      # 页面路由 
├── package.json   # npm相关文件 
└── uni.scss           # 常用于定义全局样式变量、第三方ui库的样式（插件）

1. pages

更多详细介绍：uni-app官网

每次想要在pages里新加一个页面 都要在pages.json里配置一下

下面列举一些常用 style 配置项，一般情况下足以开发   更多：uni-app官网

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#000000导航栏背景颜色（同状态栏背景色），如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效微信小程序（iOS）、百度小程序（iOS）
backgroundColorHexColor#ffffff窗口的背景色微信小程序、百度小程序、字节跳动小程序、飞书小程序、京东小程序

2. App.vue 

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			getApp().getName()
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			getName(){
				console.log('我是奥特曼');
			}
		},
		globalData: {
			imageUrl: 'xxxx',
			platform: uni.getSystemInfoSync().platform
		},
	}
</script>

<style>
	
	/*每个页面公共css */
	.wh100 {
		width: 100%;
		height: 100%;
	}

	.flexC {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex {
		display: flex;
	}

	/*每个页面公共css */
</style>

 一般常用在app.vue里面使用的 onLunch、globalData、style

1.onLunch 只会在进入程序的时候执行一次，一般搭配搭建或等获取微信公众号的code ，想要app.vue调取methods 的方法记得用 getApp.方法名( )

2.globalData：常用于定义一些公共的变量、例如图片路径资源、手机是否是ios 或 安卓。  使用 ：现在js中引入    1. import app from '@/App.vue'   2. platform: app.globalData.platform,

3.style 定义公共的全局样式 例如垂直水平居中、布局、公共类目样式都可以定义

（4）推荐ui库

uniapp: uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

如果 有功能不好去实现也可以去uniapp 的插件市场 DCloud 插件市场

原生小程序（扩展）：Vant Weapp - 轻量、可靠的小程序 UI 组件库 

（5） 页面生命周期

常用生命周期
函数名说明执行时机使用场景
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例页面初始进入只在初始化时使用一次
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面每次进入需要每次更新数据
onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发页面初始进入onLoad、onShow之后更多根据搭配插件使用                
onHide监听页面隐藏每次离开更多于 记录一些数据
onUnload监听页面卸载最后离开卸载一些监听事件

onLoad 接受参数

A页面

toB(){
	uni.navigateTo({
		url:'/pages/index/b?name=奥特曼'
	})
}

 B页面接受参数

onLoad(e) {
	console.log(e.name);
}

（6） 组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期 如果想要发送请求 可以在子组件的生命周期去执行

函数名说明平台差异说明
beforeCreate在实例初始化之前被调用。详见(opens new window)
created在实例创建完成后被立即调用。详见(opens new window)
beforeMount在挂载开始之前被调用。详见(opens new window)
mounted挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档(opens new window)
beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见(opens new window)

（7）底部导航

官方文档：uni-app官网

	"tabBar": {
		"color": "#8a8a8a",  //tab 上的文字默认颜色
		"selectedColor": "#B88DFF", //tab 上的文字选中时的颜色
		"borderStyle": "white", // tabbar 上边框的颜色，可选值 black/white
		"backgroundColor": "#ffffff", //tab 的背景色
		"list": [{
				"pagePath": "pages/index",
				"text": "主页",
				"iconPath": "static/home.png",
				"selectedIconPath": "static/homeCurrent.png"
			},
			{
				"pagePath": "pages/forum_index",
				"text": "逛逛",
				"iconPath": "static/map.png",
				"selectedIconPath": "static/mapCurrent.png"
			},
			{
				"pagePath": "pages/shop_car",
				"text": "购物车",
				"iconPath": "static/shop.png",
				"selectedIconPath": "static/shopcurrent.png"
			},
			{
				"pagePath": "pages/my",
				"text": "我的",
				"iconPath": "static/mine.png",
				"selectedIconPath": "static/mineCurrent.png"
			}
		]
	},

 如果想要实现自定义底部导航 可参考 UI库  解决自定义切换闪动 ：微信小程序 自定义tabbar 防止闪动

（7）页面跳转  

 扩展 页面栈 getCurrentPages() 的使用

页面栈：常用于获取当前页面之前的页面的参数及修改之前页面的数据

 首选在A页面做一个 navigateTo 的跳转到B页面 然后打印一下 页面栈

	const pages = getCurrentPages()
	console.log(pages);

如果想要拿上一页面的值 会采用 拿到上页的页面参数

const pages = getCurrentPages()
console.log(pages[pages.length-2]);

 h5端 和 小程序的参数是有一些区别的  如果想要修改某个页面栈里的值 只需要 对象 点就可以直接修改了

prevPage.title = 'hello World'  // h5 修改
prevPage.$vm.title='hello World' // 小程序修改

 使用场景  ：购买商品时的地址切换（点击一项后 把上页的 地址替换掉）

 （8）项目功能场景

 除了调接口渲染列表 内容之外、剩下的可能就需要小程序提供的API 去实现一些功能、例如 微信授权登录、获取经纬度、设置位置信息、上传图片等。

1. 登录

一般的授权登录流程 大概是 

1. 调用uni.login() 获取 code 

2. 通过code调取后端接口获取 sessionkey 和 openId

3. 授权用户信息 获取后端需要的参数 

4. 调用登录接口 存储token

demo：

<template>
		<view class="login flexC" @click="getlogin">微信授权登录</view>
</template>
onLoad() {
	this.getCode()
    },
methods: {
			//获取code
			getCode() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						console.log(res);
						that.code = res.code
						that.getSessionKey()
					}
				})
			},
			// code换seccesskey
			async getSessionKey() {
				let that = this
				console.log(1)
				try {
					const res = await getSessionKey({
						code: that.code
					})
					console.log('getSessionKey', res)
					uni.setStorageSync("sessionkey", res.session_key)
					uni.setStorageSync("openid",res.openid)
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('getSessionKey', err)
				}
			},
			// 登录
			async miniProgramLogin() {
				let obj = {
					session_key: uni.getStorageSync("sessionkey"),
					iv: this.iv,
					encryptedData: this.encryptedData,
					openid: uni.getStorageSync("openid"),
				}
				try {
					const res = await miniProgramLogin(obj)
					console.log('miniProgramLogin', res)
					uni.setStorageSync("token", res.token)
					uni.setStorageSync("userInfo", res)
					uni.navigateBack({})
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('miniProgramLogin', err)
				}
			},
			//登录操作
			getlogin() {
				//获取成功基本资料后开启登录，基本资料首先要授权
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别",
					success: res => {
						this.iv = res.iv
						this.encryptedData = res.encryptedData
						this.miniProgramLogin() //授权成功可调用登录接口
					},
					fail: res => {
						//拒绝授权  也可以再次获取最新的code
						uni.showToast({
							title: "您已拒绝登录",
							icon: 'none',
							duration: 2000
						})
						return;
					},
				})
			},
		},

 在小程序中也有像浏览器的locationstorage一样 

uni.setStorageSync('token',res.userinfo.token)  // 存
uni.getStorageSync('token')  // 取
uni.removeStorageSync('token') // 移除指定键
uni.clearStorageSync() // 清除所有缓存

2. 获取经纬度 getLocation

uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log(res);
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				},
				fail:function(err){
					console.log(err);
				}
});

常用的使用上面代码就好了，如果获取失败可以继续优化一下想要的操作

如果后台要根据 经纬度算距离记得type 改成 gcj02 

3.根据地图选择位置 chooseLocation

wx.chooseLocation({
		success: (data) => {
			console.log(data, '位置数据')
		}
})

 4. 地图组件 map

<map style="width: 100%;" class="topMap" :polyline="polyline" scale="4" latitude="25" longitude="120"  :markers="covers">
</map>

data() {
			return {
				title: 'Hello',
				polyline: [{
					points: [{
						longitude: 121.44577861,
						latitude: 37.48205260
					}, {
						longitude: 121.44611657,
						latitude: 37.48207388
					}, {
						longitude: 121.44725382,
						latitude: 37.48224841
					}, {
						longitude: 121.44766152,
						latitude: 37.48237186
					}, {
						longitude: 121.4475274100,
						latitude: 37.4827039000
					}, {
						longitude: 121.44748986,
						latitude: 37.48299336
					}, {
						longitude: 121.4476454300,
						latitude: 37.4831679000
					}, {
						longitude: 121.4478063600,
						latitude: 37.4831381000
					}, {
						longitude: 121.4479565600,
						latitude: 37.4831295800
					}, {
						longitude: 121.4480263000,
						latitude: 37.4831636400
					}, {
						longitude: 121.44820869,
						latitude: 37.48330837
					}],
					color: "#ff0004dd",
					width: 3,
					//    arrowIconPath: true,
					// dottedLine:true
				}],
				covers: [{
					id: 1,
					longitude: 121.44820869,
					latitude: 37.48330837,
					width: 100,
					height: 45,
				}],
			}
		},
属性名类型默认值说明平台差异说明
longitudeNumber中心经度
latitudeNumber中心纬度
scaleNumber16缩放级别，取值范围为3-20高德地图缩放比例与微信小程序不同
themeStringnormal主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）京东小程序
min-scaleNumber3最小缩放级别App-nvue 3.1.0+、微信小程序2.13+
max-scaleNumber20最大缩放级别App-nvue 3.1.0+、微信小程序2.13+
layer-styleNumber/String1个性化地图App-nvue 3.1.0+、微信小程序2.13+
markersArray标记点
polylineArray路线飞书小程序不支持

 

一般的使用场景 可能定位 现在的坐标，或者 做一些物流的路线 

5. 上传图片 chooseImage

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});
参数名类型必填说明平台差异说明
countNumber否最多可以选择的图片张数，默认9见下方说明
sizeTypeArray<String>否original 原图，compressed 压缩图，默认二者都有App、微信小程序、支付宝小程序、百度小程序
extensionArray<String>否根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9+)
sourceTypeArray<String>否album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
cropObject否图像裁剪参数，设置后 sizeType 失效App 3.1.19+
successFunction是成功则返回图片的本地文件路径列表 tempFilePaths
failFunction否接口调用失败的回调函数小程序、App
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

一般 都是 通过选择图片后 拿到本地路径 再上传到服务器 获取 服务器链接图片 

 uniapp 上传文件 封装方法

5. 图片预览 previewImage

参数名类型必填说明平台差异说明
currentString/Number详见下方说明current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
urlsArray<String>是需要预览的图片链接列表
indicatorString否图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。App
loopBoolean否是否可循环预览，默认值为 falseApp
longPressActionsObject否长按图片显示操作菜单，如不填默认为保存相册App 1.9.5+
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

 预览要的是网络链接

	let photoList = ['xx','xx']
		uni.previewImage({
			current: index,
			urls: photoList
	});

6. 支付  requestPayment

  uni.requestPayment({
					  	provider: 'wxpay',
					  	timeStamp: res.payDetail.timeStamp,
					  	nonceStr: res.payDetail.nonceStr,
					  	package: res.payDetail.package,
					  	signType: res.payDetail.signType,
					  	paySign: res.payDetail.paySign,
					  	success: function(res) {
					  		console.log('支付成功')
					  	},
					  	fail: function(err) {
					  		toa.toast('取消支付')
					  		console.log('fail:' + JSON.stringify(err));
					  	},
					  })

支付这点没什么太难的 直接调用wx的requestPayment 方法就好了 毕竟是在微信环境下 内部已经封装好啦

7. 分页 

在uniapp 中有一个事件 onReachBottom (和methods同级)  当他触底时就可以去请求最新的数据

// 触底触发
		onReachBottom() {
			if(this.page >= this.lastPage) return
			this.page=this.page+1 
			this.repairOrder()
		},

上面的方法是 触底了  如果 当前页大于等于 最后一页 就return 停止执行  如果用scroll-view 请去官方文档看 scroll-view 的方法哈

8.弹窗

uni.showToast(OBJECT)

参数类型必填说明平台差异说明
titleString是提示的内容，长度与 icon 取值有关。
iconString否图标，有效值详见下方说明。
imageString否自定义图标的本地路径（app端暂不支持gif）App、H5、微信小程序、百度小程序
maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseApp、微信小程序
durationNumber否提示的延迟时间，单位毫秒，默认：1500
positionString否纯文本轻提示显示位置，填写有效值后只有 title 属性生效， 有效值详见下方说明。App
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

常用

uni.hideToast() 隐藏弹框

uni.hideToast();

uni.showLoading(OBJECT) 

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

参数类型必填说明平台差异说明
titleString是提示的文字内容，显示在loading的下方
maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseH5、App、微信小程序、百度小程序
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

（9）分享onShareAppMessage(OBJECT)

默认情况下是不允许分享的 

需要添加两个方法 

	onShareAppMessage(){},
	onShareTimeline(){}

 默认清空下 分享的都是页面的默认配置项，如果想更改可以参考文档

 

参数名类型必填说明平台差异说明
titleString是分享标题
pathString是页面 path ，必须是以 / 开头的完整路径。注意：京东小程序，开头不要加'/'QQ小程序不支持
imageUrlString否分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4
descString否自定义分享描述支付宝小程序、字节跳动小程序、京东小程序
bgImgUrlString否自定义分享二维码的背景图，建议大小750*950（网络图片路径）支付宝小程序

  （8）复用

1. uniapp 上传文件 封装方法

2.uniapp适配ipad端平板端

3.uniapp app 人脸识别（倒计时拍照，已封组件）

4.微信小程序 自定义tabbar 防止闪动

5. 微信小程序 腾讯云ocr 身份证识别

6. uniapp 解决ios上拉下拉白边处理

7. uniapp 解决滑动穿透 （模态滚动影响页面滚动）

8. uniapp分包

9.微信小程序 实现实时语音识别 腾讯云

10. 微信小程序 通过经纬度获取省市区 （腾讯云）

总结 以上是开发的一些基础方法等使用API  如果需要其他功能 还需自己去翻阅文档，遇到问题可以去搜一些文章、插件市场、官方企鹅群 希望可以帮着刚开发不久的小伙伴 ^_^

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405571.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Tomcat安装使用与部署Web项目的三种方法

Tomcat安装使用与部署Web项目的三种方法

✅作者简介&#xff1a;C/C领域新星创作者&#xff0c;为C和java奋斗中 ✨个人社区&#xff1a;微凉秋意社区 &#x1f525;系列专栏&#xff1a;MySql一点通 &#x1f4c3;推荐一款模拟面试、刷题神器&#x1f449;注册免费刷题 &#x1f525;前言 今天带来Tomcat的安装教程&a…
阅读更多...
input 输入框限制只能输入两位有效小数

input 输入框限制只能输入两位有效小数

前端入门即教学&#xff0c;今天博主分享几个前端金额实用的小案例&#xff0c;复制拿过去就能用哦&#xff01; 相信有很多前端小伙伴在工作中遇到过这样的需求&#xff0c;就是限制输入框内容只能输入两位小数吧&#xff0c;想了用正则但是又不知道怎么下手的同学&#xff0c…
阅读更多...
CSS 父选择器 :has()

CSS 父选择器 :has()

精通CSS-点击快速学习 在CSS Selectors 4规范中，CSS 引入了一个名为 的新选择器:has()，它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。 父选择器如何在 CSS 中工作 在 CSS 中，如果我们想要选择某些东西，我们会使…
阅读更多...
盘点12个前端低代码的框架开源项目以及前端低代码的总结调研，比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

盘点12个前端低代码的框架开源项目以及前端低代码的总结调研，比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

文章目录1. Appsmith2. Amis3. LowCodeEngine4. form-generator5. H5-Dooring/pc-Dooring6. YAO7. Mometa8. NocoBase9. Sparrow10. vite-vue3-lowcode11. 华炎魔方12. Awesome Lowcode参考文档低代码是基于可视化和模型驱动理念&#xff0c;结合云原生与多端体验技术&#xff…
阅读更多...
sortablejs的使用实践

sortablejs的使用实践

文章目录说明基本使用1. 素颜版2. 设置可被拖起的项的样式3. 设置被选中的项的样式4. 设置拖拽时跟随的阴影的样式5. 设置正在被拖拽中的样式6. 设置当前列表容器内是否可以进行拖拽排序7. 设置拖拽的手柄8. 多个列表之间的拖拽 [group]示例1 [name]示例2 [put]示例3 [put func…
阅读更多...
【前端】图片懒加载的原理和三种实现方式

【前端】图片懒加载的原理和三种实现方式

一. 图片懒加载的目的 大型网站如常用的淘宝&#xff0c;京东等页面&#xff0c;需要展示大量的商品图片信息&#xff0c;如果打开网页时让所有图片一次性加载完成&#xff0c;需要处理很多次网络请求&#xff0c;等待加载时间比较长&#xff0c;用户体验感很差。 有一种常用…
阅读更多...
基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

vite 最近非常火&#xff0c;它是 vue 作者尤大神发布前端构建工具&#xff0c;底层基于 Rollup&#xff0c;无论是启动速度还是热加载速度都非常快。vite 随 vue3 正式版一起发布&#xff0c;刚开始的时候与 vue 绑定在一起&#xff0c;但之后的 v2 版本便比较独立&#xff0c…
阅读更多...
什么是垃圾回收机制（超详细）

什么是垃圾回收机制（超详细）

垃圾回收机制 1.垃圾回收机制&#xff08;Garbage Collction&#xff09;简称GC&#xff0c;是JavaScript中使用的内存管理系统的基本组部分&#xff0c;是为了防止内存泄漏 2.JavaScript是在创建变量&#xff08;对象、字符串等&#xff09;时自动进行了分配内存&#xff0c;并…
阅读更多...
Web实训项目--网页设计（附源码）

Web实训项目--网页设计（附源码）

1 实训基本信息 1.1 实训项目名称 网页设计 1.2 实训环境 本次实训的形式以实战讲解为主&#xff0c;以项目为主导。学习如何设计网页中的轮播图和动画效果&#xff0c;并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。 2 实训内容简介 2.1 网页设计 通过…
阅读更多...
关于vue中如何清除定时器的方法

关于vue中如何清除定时器的方法

一、问题 1、在vue中使用setTimeout定时器的时候&#xff0c;可能会遇到关不掉的情况&#xff0c;会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了&#xff0c;但是有时候没生效&#xff0c;定时器还会继续执行。 2、在这里需要说一下setTimeout的使用场景&am…
阅读更多...
路由vue-route的使用

路由vue-route的使用

文章目录一、项目初始化二、路由配置规则vue-route标签作用&#xff1a;路由匹配到的组件将渲染到这里router-link标签作用&#xff1a;路由导航&#xff08;路由跳转的链接&#xff09;三、声明式导航和编程式导航声明式导航编程式导航四、路由重定向五、嵌套路由特别注意总结…
阅读更多...
04-vscode搭建cmake的编译环境

04-vscode搭建cmake的编译环境

vscodemingw搭建C/C环境系列 01.vscodemingw搭建编译调试环境 02-vscode编译调试单个源文件程序 03-vscode编译调试多个源文件程序 04-vscode搭建cmake的编译环境 文章目录一、简述二、vscode搭建cmake的编译环境&#xff08;方法1&#xff09;1.配置cmake构建目录(可忽略)…
阅读更多...
Redux——详解

Redux——详解

一.初识Redux 相当于vue中的vuex 1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态 看看Redux的工作原理图 如果要进行加一操作…
阅读更多...
ES6---promise详解及用法

ES6---promise详解及用法

一、什么是Promise Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配&#xff08;ES8&#xff09;&#xff0c;但是它们是基于promise的)&#xff0c;从语法上讲&#xff0c;Promise是一个对象或者说是构造函数&#xff0c;用来封装异步操作并可…
阅读更多...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

一&#xff1a;源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面&#xff0c;这里我将源码资源分享给大家&#xff0c;大家可以直接免费下载使用哦&#xff0c;没有 vip 的小伙伴找我私聊发送"登录注册"即可我给你发文件&#xff0c;此登录注…
阅读更多...
四、vue中路由router配置详解

四、vue中路由router配置详解

目录 一、vue中的路由作用 二、vue中的路由router 使用步骤 三、路由跳转 1、带参数路由跳转&#xff1a; &#xff08;1&#xff09;this.$router.push() &#xff1a; &#xff08;2&#xff09;this.$router.replace() &#xff1a; 2、不带参数路由跳转 3、this.…
阅读更多...
【手把手教安装】VUE安装教程+VScode配置！！！

【手把手教安装】VUE安装教程+VScode配置！！！

含泪整理Vue安装教程 因为换了新电脑很多软件要重装&#xff0c;所以想到可以写一份教程&#xff0c;为我以后换电脑方便重装也为了大家&#xff01;&#xff01; 第一次安装Vue踩坑太多&#xff0c;这里整理一份超详细教程&#xff08;win11也可&#xff01;&#xff01;&…
阅读更多...
uniapp 控制台警告 DevTools failed to load SourceMap: Could not load content for http://127.0.0.1问题解决

uniapp 控制台警告 DevTools failed to load SourceMap: Could not load content for http://127.0.0.1问题解决

在uniapp中控制台警告&#xff0c;这是用于在开发时定位到报错的源码位置的工具SourceMap出问题了&#xff0c;如果单纯只是想消除这个警告的方法写在下面第一个&#xff0c;真正解决工具问题的方法是第二个&#xff08;需要下载一个插件&#xff09;&#xff0c;现在放在这边做…
阅读更多...
如何修复运行缓慢的 WordPress 网站？

如何修复运行缓慢的 WordPress 网站？

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 就其 SEO 而言&…
阅读更多...
npm、nrm两种方式查看源和切换镜像

npm、nrm两种方式查看源和切换镜像

一、使用npm查看当前源、切换淘宝镜像、切换官方源 &#xff08;1&#xff09;npm查看当前源&#xff1a; npm get registry&#xff08;2&#xff09;npm设置淘宝镜像源&#xff1a; npm config set registry http://registry.npm.taobao.org&#xff08;3&#xff09;npm设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023