【uniapp】开发微信小程序 — 注意事项

底部导航栏 (tabBar) 图标的正确做法:
1、图片的标准尺寸为 81px * 81px,该尺寸在官方的文档中有明确的说明,可以参考微信小程序全局配置文档中对 iconPath 属性的说明。
2、为了保持良好的间距,图片的内容区域设置 60px* 比较好,给4个方向各留10px的边距。
————————————————————————————
image 图片组件
1、show-menu-by-longpress=“true” 开启长按图片显示识别小程序码菜单
<image src=“” show-menu-by-longpress=“true” mode=“widthFix”>
2、css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,
此时设置 image{will-change: transform},可优化此问题。
————————————————————————————
关于小程序隐私保护指引设置
1、在项目根目录中找到 manifest.json 文件,找到 mp-weixin 节点,在节点后面加上配置:
“_usePrivacyCheck_” : true, //隐私保护协议
2、使用地理位置相关接口,除需完成接口权限开通外,还需在 app.json(或ext.json)配置
“requiredPrivateInfos” : [ “getLocation”, “chooseLocation” ]

"usingComponents" : true,
//开启分包优化
 "optimization" : {
     "subPackages" : true
 },
 //隐私保护
 "__usePrivacyCheck__" : true,
 //懒加载优化
 "lazyCodeLoading" : "requiredComponents",
 //位置接口描述(不可超过30个字)
 "permission" : {
     "scope.userLocation" : {
         "desc" : "将获取你的具体位置信息,用于向您推荐、展示您附近门店的信息"
     }
 },
 "requiredPrivateInfos" : [ "getLocation", "choosePoi", "chooseAddress", "chooseLocation" ]

判断小程序是否授权位置接口

mounted:function(){
	// #ifdef MP-WEIXIN
	uni.getSetting({
		success: res => {
			if (res.authSetting['scope.userLocation']) {
				this.isLocation = true;
				console.log('已授权userLocation')
			} else {
				this.isLocation = false;
				console.log('用户未授权userLocation')
			}
		}
	})
	// #endif
	this.getLocation();
},
methods:{
// 打开定位设置
openSetting() {
	let that=this;
	uni.openSetting({
		success: (res) => {
			if (res.authSetting['scope.userLocation']) {
				// 5.用户在设置中点击了允许,调用选择位置信息函数
				that.isLocation = true;
				that.getLocationInfo(function(){
					that.getAddressName(); //获取详细地址
				}); //获取地理位置
			} else {
				that.isLocation = false;
			}
		},
		fail: (err) => {
			console.log("打开设置失败", err)
		}
	})
},
}

配置小程序

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

《小程序隐私保护指引》
开发者处理的信息
根据法律规定,开发者仅处理实现小程序功能所必要的信息。

为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称、头像。
为了显示距离、获取经纬度,开发者将在获取你的明示同意后,收集你的位置信息。
为了上传图片,开发者将在获取你的明示同意后,访问你的摄像头。
为了登录或者注册,开发者将在获取你的明示同意后,收集你的手机号。
为了保存图片或者上传图片,开发者将在获取你的明示同意后,使用你的相册(仅写入)权限。
开发者收集你选中的照片或视频信息,用于提前上传减少上传时间
开发者获取你选择的位置信息,用于线下导航服务
开发者读取你的剪切板,用于复制文本等相关信息

小程序分享 pages/index/index

onLoad(event) {
	if(event.referid||event.scene){
		uni.setStorageSync('referid', event.referid||event.scene);
	}
},
// 小程序中用户点击分享后,设置该页面的分享信息
onShareAppMessage(res) {
	return {
		title: this.web_site_title||'小程序名称',
		path: `/pages/index/index?referid=${this.my_uids}`,
		imageUrl: ''
	}
},
// 分享朋友圈
onShareTimeline(res) {
	return {
		title: this.web_site_title||'小程序名称',
		query: `referid=${this.my_uids}`,
	}
},

全局配置 获取经纬度 (只有APP端才有详细地址)

1、将接口返回的距离进行单位换算
根目录中找到 utils/mixin.js 文件,找到 filters 节点加上配置:

// 用法  {{item.distance|setMorKm}}
setMorKm(m){
	var n=''
	if(m){
		if (m >= 1000) {
			n = (m / 1000).toFixed(1) + 'km'
		} else {
			n = m.toFixed(1) + 'm'
		}
	}else{
		n = '0m'
	}
	return n
}

2、获取经纬度 用法:

let that=this;
this.getLocationInfo(function(){
	that.isLocation = true; //已授权-位置接口
	var jw_json = uni.getStorageSync('jw_json');
	that.getAddressName(); //获取详细地址
}); //获取地理位置

3、getLocationInfo方法
根目录中找到 utils/mixin.js 文件,找到 methods 节点加上配置:

// 获取经纬度
getLocationInfo(successCall) {
	// #ifdef MP-WEIXIN
	uni.authorize({
		scope: 'scope.userLocation',
		success(rest) {
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					let jw_json={ 
						jingdu: parseFloat(res.longitude).toFixed(6), 
						weidu: parseFloat(res.latitude).toFixed(6),
					};
					uni.setStorageSync('jw_json', jw_json);
					if(successCall) successCall(res);
				},
				fail: function(err){ console.log('getLocation',err); }
			});
		},fail: function(err){ console.log('authorize',err); }
	});
	// #endif
	// H5---获取位置--获取经纬度
	// #ifdef H5
	var wx=this.wx;
	let ua = window.navigator.userAgent.toLowerCase();
	// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		uni.request({
			url: this.shareUrl, 
			// data: {url:window.location.href},
			data: {url: window.location.href.split('#')[0]},
			header: {},
			success: (r) => {
				uni.hideLoading();
				var data=r.data;
				if(data.code==1){
					wx.config({
						debug: data.data.debug, 
						appId: data.data.appId, 
						timestamp: data.data.timestamp, 
						nonceStr: data.data.nonceStr, 
						signature: data.data.signature, 
						jsApiList: data.data.jsApiList,
						openTagList: ['wx-open-launch-weapp']
					});
					wx.ready(function(){
						// 获取地理位置经纬度
						wx.getLocation({
							isHighAccuracy: true, // 开启地图精准定位
							type: 'gcj02', // 地图类型写这个
							success: (res) => {
								// console.log(res)
								var jw_json={ 
									jingdu: parseFloat(res.longitude).toFixed(6), 
									weidu: parseFloat(res.latitude).toFixed(6),
								};
								uni.setStorageSync('jw_json', jw_json);
								if(successCall) successCall(res);
							},
							fail: (error) => {
								console.log('ditu(wx.getLocation)-->'+JSON.stringify(error))
							}
						});
					});
				}
			}
		});
	}else{
		uni.getLocation({
			type: 'wgs84',
			isHighAccuracy: true,//开启高精度定位
			success(res) {
				// APP端才有详细地址
				// let _address='';
				// if(res.address) _address=res.address.district+res.address.poiName+res.address.street+res.address.streetNum;
				let jw_json={ 
					jingdu: parseFloat(res.longitude).toFixed(6), 
					weidu: parseFloat(res.latitude).toFixed(6),
				};
				uni.setStorageSync('jw_json', jw_json);
				if(successCall) successCall(res);
			},
			fail: function (error) {
				console.log('ditu(uni.getLocation)-->'+JSON.stringify(error))
			}
		})
	}
	// #endif
},

分包 pages.json

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}, {
			"path": "pages/index/my",
			"style": {
				"navigationBarTitleText": "个人中心"
			}
		}, {
			"path": "pages/index/login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		}
    ],
    "subPackages": [{
        "root": "pagesA",
        "pages": [
            {
                "path": "index/index",
                "style": {
                    "navigationBarTitleText": "首页",
                    "enablePullDownRefresh": false
                }
            }
        ]
    },{
        "root": "pagesB",
        "pages": [
            {
                "path": "index/index",
                "style": {
                    "navigationBarTitleText": "首页",
                    "enablePullDownRefresh": false
                }
            }
        ]
    }],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "兔丫头",
		"backgroundColor": "#ffffff",
		"navigationBarBackgroundColor": "#ffffff",
		"navigationStyle": "custom"
	},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker最简单教程(使用dockerfile构建环境)

一 手里有的东西 安装好的dockerdockerfile 二 操作 只需要在你的dockerfile文件下执行命令 docker build -t"xianhu/centos:gitdir" . 将用户名、操作系统和tag进行修改就可以了&#xff0c;这就相当于在你本地安装了一个docker环境&#xff0c;然后执行 docker…

【c 语言】结构体的概念

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;C语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&…

JAVAEE——网络初始

文章目录 网络发展史独立模式网络模式局域网LAN路由器的诞生 网络通信的基础IP地址端口号 认识协议OSI七层模型TCP/IP五层模型 网络发展史 独立模式 在原始的年代中电脑间想要通信需要两台电脑连接一根网线&#xff0c;但是一台电脑基本上只有一个接口。因此想要链接更多的电…

函数重载和引用【C++】

文章目录 函数重载什么是函数重载&#xff1f;函数重载的作用使用函数重载的注意点为什么C可以函数重载&#xff0c;C语言不行&#xff1f; 引用什么是引用&#xff1f;引用的语法引用的特点引用的使用场景引用的底层实现传参时传引用和传值的效率引用和指针的区别 函数重载 什…

全国火情预报卫星遥感应用方案

一、引言 火情预报应急卫星遥感解决方案是一种利用卫星遥感技术进行火灾预警和应急响应的方法。该方案通过实时监测和分析森林、草原等地区的火情信息&#xff0c;为火灾预警和应急响应提供科学依据&#xff0c;有效减少火灾造成的损失。本技术文档将介绍火情预报应急卫…

Android-NDK的linux交叉编译环境

NDK工具包下载 NDK 下载 | Android NDK | Android Developers https://github.com/android/ndk/wiki/Unsupported-Downloads 以android-ndk-r26c下载为例&#xff0c;下载后将压缩包解压至/usr目录下 CMakeLists编译选项设置 编译平台变量判断条件中增加一下android条件…

7款公司电脑监控软件

7款公司电脑监控软件 研究证明&#xff0c;人们在家办公的效率比在办公室办公的效率低一半&#xff0c;其中原因是缺少监督&#xff0c;即便在公司办公&#xff0c;还存在员工偷闲的时刻&#xff0c;比如聊天、浏览无关网站、看剧、炒股等&#xff0c;企业想提高员工的工作效率…

TCP 三次握手与四次挥手面试题(计算机网络)

TCP 基本认识 TCP 头格式有哪些&#xff1f; 序列号&#xff1a;在建立连接时由计算机生成的随机数作为其初始值&#xff0c;通过 SYN 包传给接收端主机&#xff0c;每发送一次数据&#xff0c;就「累加」一次该「数据字节数」的大小。用来解决网络包乱序问题。 确认应答号&a…

STC89C52学习笔记(二)

STC89C52学习笔记&#xff08;二&#xff09; 综述&#xff1a;本文简要介绍了51单片机以及示例了如何成功创建并运行一个程序&#xff08;点亮一个LED&#xff09;。 一、单片机介绍 单片机简称MCU&#xff0c;MCUCPURAMROM定时器中断系统通讯协议等单片机任务是信息采集、…

T-Mamba:用于牙齿 3D CBCT 分割的频率增强门控长程依赖性

T-Mamba&#xff1a;用于牙齿 3D CBCT 分割的频率增强门控长程依赖性 摘要Introduction方法T-Mamba architectureTim block T-Mamba: Frequency-Enhanced Gated Long-Range Dependendcy for Tooth 3D CBCT Segmentation 摘要 三维成像中的高效牙齿分割对于正畸诊断至关重要&am…

vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法

一般在开发时&#xff0c;设置了 date/time/datetime 等类型的 input 属性 placeholder 提示文本时&#xff0c; 发现实际展示中却并不生效&#xff0c;如图&#xff1a; 处理后效果如图&#xff1a; 处理逻辑 判断表单项未设置值时&#xff0c;则设置其伪类样式&#xff0c;文…

在线免费图像处理

功能 尺寸修改(自定义和内置常用的照片尺寸)图像压缩(比较好的情况最高可以压缩 10 倍, 如果是无损压缩可以压缩 5 倍左右,参数范围 50~70 左右)图像方向修改图像格式修改修改后的效果支持实时反馈, 并且支持点击图像预览,同时保留历史修改图片(在预览中可以查看)支持修改撤回…

2024-04-08 NO.6 Quest3 自定义交互事件

文章目录 1 交互事件——更改 Cube 颜色2 交互事件——创建 Cube2.1 非代码方式2.2 代码方式 ​ 在开始操作前&#xff0c;我们导入上次操作的场景&#xff0c;相关介绍在 《2024-04-08 NO.5 Quest3 手势追踪进行 UI 交互-CSDN博客》 文章中。 1 交互事件——更改 Cube 颜色 …

Java设计模式之创建型模式(二)原型模式

原型模式 1、原型模式1-1、应用场景1-2、举个 软栗子1-3、举个 硬栗子1-3、举个实务栗子 学习原型模式的目的&#xff1a;原型模式的目的在于通过复制现有的实例来创建新的对象&#xff0c;以避免通过构造函数创建对象时可能带来的性能开销&#xff0c;同时可以控制对象的深度复…

Matlab|基于蒙特卡洛的风电功率/光伏功率场景生成方法

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该模型主要用于风电功率和光伏功率场景生成与缩减&#xff0c;利用多元高斯分布构建时间相关性&#xff0c;并采用蒙特卡洛方法进行仿真&#xff0c;风电功率采用Weibull分布&#xff0c;光伏功率采用Beta分布…

浅析人工智能与数字化的特点

人工智能无疑具有数字化的特点。作为现代科技的一个重要分支&#xff0c;人工智能的发展与数字化进程紧密相连&#xff0c;数字化已经成为了人工智能发展的基础和前提。 首先&#xff0c;我们来理解一下什么是数字化。数字化是将模拟信号转换为数字信号的过程&#xff0c;即将连…

[论文阅读笔记30] (AAAI2024) UCMCTrack: Multi-Object Tracking with Uniform CMC 详细推导

这是群友的一篇工作&#xff0c;之前也没仔细看&#xff0c;正好今天放假&#xff0c;打算读一下论文陶冶情操。 这篇文章的公式比较多&#xff0c;我做一篇笔记解释一下&#xff0c;希望对大家有帮助~ 论文地址: https://ojs.aaai.org/index.php/AAAI/article/view/28493 代…

java数据结构与算法刷题-----LeetCode238. 除自身以外数组的乘积

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 动态规划&#xff1a;左右乘积列表2. 滚动数组对动态规划过程…

uni-app(H5)论坛 | 社区 表情选择 UI组件

项目源码请移步&#xff1a;bbs 效果 实现思路 表情切换 人物、动物、小黄人不同表情之间的切换实际就是组件的切换 emoji表情 emoji表情本身就是一种字符 如需其他emoji表情可参考 EmojiAll中文官方网站 需要注意的就是数据库的存储格式需要支持emoji表情&#xff0c;我项…

聚道云连接器打通红圈CRM和金蝶云星辰,赋能环境科技公司数字化转型

一、客户介绍 某环境科技有限公司是一家专注于环保科技领域的领先企业&#xff0c;致力于为客户提供全方位的环境解决方案。公司拥有一支经验丰富、技术精湛的团队&#xff0c;不断推动环保技术的创新与应用。作为业内的佼佼者&#xff0c;该公司在环境治理、资源回收和节能减…