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

Minions_Fatman

已于 2025-04-01 09:53:44 修改

阅读量4.5k

点赞数 26

CC 4.0 BY-SA版权

文章标签： uni-app 微信小程序小程序

于 2024-04-08 11:18:21 首次发布

本文链接：https://blog.youkuaiyun.com/Minions_Fatman/article/details/137498677

底部导航栏 (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” ]
3、使用获取用户收货地址，除需完成接口权限开通外，隐私协议需要选中“地址”
“requiredPrivateInfos” : [ “getLocation”, “chooseAddress” ]
————————————————————————————
申请wx.getLocation接口时
申请接口理由：业务涉及附近门店地址导航，用于实时定位用户位置，精准计算附近门店距离和导航信息，帮助用户到店时的地图导航；
上传图片时：一定要是从微信小程序截图或者是开发者工具截图才可以

<template>
<view class="">
   <block v-if="type=='index'">
		<!-- 正式 -->
		<block v-if="version=='release'">
			<temp-grid></temp-grid>
		</block>
	</block>
	<block v-else>
		<temp-grid></temp-grid>
	</block>
</view>
</template>

<script>
// #ifdef MP-WEIXIN
let version = uni.getAccountInfoSync().miniProgram.envVersion
// #endif
export default {
   
   
	data() {
   
   
		return {
   
   
			// #ifdef MP-WEIXIN || MP-ALIPAY
			version: version,
			// #endif
			// #ifdef H5
			version: "release",
			// #endif
		}
	},
    methods: {
   
   
        
    }
};
</script>

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

解决微信小程序中当数据少于display-multiple-items设置的bug

<view v-if="drawList.length!=0" class="h-800">
	<swiper class="aswiper wp-100" interval="3000" duration="500"
	:display-multiple-items="drawList.length>6?6:drawList.length"
	:style="{ height: drawList.length>=6?'800rpx':70*drawList.length*2+'rpx' }"
	:autoplay="true" :indicator-dots="false" :vertical="true">
		<swiper-item v-for="(item,index) in drawList" :key="index"></swiper-item>
	</swiper>
</view>

小程序分享

// 分享按钮
<!-- #ifdef MP-WEIXIN -->
<button type="default" class="btn btn_fx radius50 fcc" open-type="share">邀请好友</button>
<!-- #endif -->
// 小程序分享内容laundry
onShareAppMessage(res) {
   
    // 分享按钮+用户点击右上角分享给好友
	return {
   
   
		title