uniapp开发小程序-工作笔记

news2025/1/12 8:46:48

开发背景

公司开始安排本人开发微信小程序，于是乎研究了一点关于uniapp的api和注意的点。仅仅是个人笔记…可能有错误，希望各位指出。

uniapp开发小程序

应用生命周期

onLaunch 初始化完成时只触发一次

onShow 后台进入前台显示页面的时候

onHide 前台进入后台隐藏页面的时候显示

onError uni报错时

页面生命周期

onInit 页面初始化参数等同onLoad，早于onLoad

onLoad 页面加载参数为上个页面传递的参数

onShow 每次页面显示，包括下级页面返回

onReady 页面初始化渲染完成

onHide 页面隐藏

onUnload 页面卸载

onResize 窗口尺寸变化

小程序登录流程

如果在页面同时使用了vue 的生命周期

则顺序关系是created->onLoad->onShow->mounted

onLoad调用uni.login()进行微信登录，获取code

小程序设置顶部导航背景图片

"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/login/index",
			"style": {
				"navigationStyle": "custom"   //这个就使之自定义结构了
			}
		},
 ]

uniapp存取本地

uni.setStorageSync('longitude', res.longitude);
uni.getStorageSync('token')

uniapp登录

uni.login({
					provider: 'weixin',
					success: (res) => {
						if ("login:ok" === res.errMsg) {
							that.code = res.code
						}
					},
				});

uniapp获取授权

uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							// 再次判断所需权限是否已授权,如已授权则直接使用
							uni.getLocation({
								success(res) {
									console.log(res)
								}
							})
						} else if (!res.authSetting['scope.userLocation']) {
							// 如未授权则重新打开设置页面,进行授权
							uni.showModal({
								//弹出提示框
								title: '是否打开设置页？',
								content: '需要在设置中获取地址信息和定位权限',
								success(res) {
									if (res.confirm) {
										// 用户点击确定按钮
										uni.openSetting({
											// 确认后打开设置页面
											success(res) {
												if (res.authSetting['scope.userLocation']) {
													this.longitude = res.longitude
													this.latitude = res.latitude
												} else {
													console.log("手动授权失败")
												}
											},
											fail() {
												console.log("打开设置页面失败")
											}
										})
									} else if (res.cancel) {
										// 用户点击取消按钮
										console.log('用户点击取消');
									}
								},
								fail() {
									console.log("确认取消弹出未弹出")
								}
							});
						}
					},
					fail(e) {
						console.log("获取已授权信息失败",e)
					}
				})

uniapp获取用户信息

之前的getuserInfo不能用了，每次都会弹窗，用户确认允许后才可以拿到用户信息

let that = this
				uni.getUserProfile({
					desc: "weixin", // 指明用途,这个参数是必须的
					success: function(res) {
						uni.setStorageSync("userInfo", res.userInfo)
					}
				})

uniapp全局变量

例如：在App.vue中，与生命周期同级声明变量，只能命名为globalData。
在其他页面中getApp().globalData.text = 'test'进行读写
在App.vue本文件中this.globalData.systemTitle = res.title如此读写

uniapp调用客户端api出错,这个代码意味着当前账户开发者并非属于项目开发者
errMsg: "getSetting:fail "
err_code: -80002

小程序分享按钮

比如可以写在onLaunch

uni.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			})

小程序监听跳转

比如写在onShow

uni.addInterceptor('navigateTo', { //监听跳转
				invoke(args) {
					  const url = args.url.split('?')[0]
					  that.watchRouter(url);
				  },
				success(url) {
					console.log("获取地址",url)
					// that.watchRouter(url);
				}
			})
			uni.addInterceptor('redirectTo', { //监听关闭本页面跳转
				invoke(args) {
					  const url = args.url.split('?')[0]
					  that.watchRouter(url);
				  },
				success(e) {
					// that.watchRouter(e);
				}
			})
			uni.addInterceptor('switchTab', { //监听tabBar跳转
				invoke(args) {
					  const url = args.url.split('?')[0]
					  that.watchRouter(url);
				  },
				success(e) {
					// that.watchRouter(e);
				}
			})
			uni.addInterceptor('navigateBack', { //监听返回
			 	invoke(args) {
			 		  const url = args.url.split('?')[0]
			 		  that.watchRouter(url);
			 	  },
			 	success(e) {
			 		 that.watchRouter(e);
			 	}
			 })

小程序截取query参数

			splitParams(url) {
				//只要问号后面的字符串
				var arr = url.split('?')
				var params = arr[1];
				var arr1 = params.split('&');
				var obj = {}
				//因为arr1里面有多个元素，都要切割，所以我们需要遍历循环。
				for (var i = 0; i < arr1.length; i++) {
					var newArr = arr1[i].split('=');
					obj[newArr[0]] = newArr[1];
				}
				return obj;;
			},

uniapp获取经纬度

uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
					uni.setStorageSync('longitude', res.longitude);
					uni.setStorageSync('latitude', res.latitude);
				}
			});