开发小程序踩坑记录✍~“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，[点击查看活动详情

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情”

一、ios日期兼容问题

我们日期的数据格式有种常见的例如：2023-2-10，它是用-连接起来的，如果进行日期的运算，ios就会报错，具体原因是ios不支持符号-,解决的办法有很多，小编建议用/代替。

对象名.replace(/-/g,"/")

二、android在webview内无法打开pdf文件

这个问题估计开发小程序都遇见过，我直接说我想到的解决方法，如果小程序可以直接通过后端获取pdf文件链接直接使用本地api打开即可（downloadFile，openDocument（showMenu:true这是文件菜单也是右上角有三个小点点）），苹果只能够预览收藏，但是安卓可以下载，两者都可以转到第三方软件打开。

uni.downloadFile({
		   // 示例 url，并非真实存在
		   url: www.baidu.com,
		   success: function (res) {
			 const filePath = res.tempFilePath
			 uni.openDocument({
				filePath: filePath,
				showMenu:true,
				success: function (res) {
					console.log('打开文档成功')
				},
				fail:function(){
					console.log('打开文档失败')
				}
			})
		 },
		fail:function(){
				
	        }
	})

如果小程序无法获取pdf链接怎么办呢？两种方法：

webview使用pdf.js进行配置，可以访问用例 - PDF.js 中文文档 (gitcode.host)。
通过webview跳转到小程序内容携带参数，再使用内置api进行预览。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

window.onload = function() {
   //微信小程序访问paf文件处理
   let a_path = document.querySelector('#a_path')
   a_path.addEventListener('click', function(evt) {
      wx.miniProgram.getEnv(function(r){
         if (r.miniprogram) {
            wx.miniProgram.redirectTo({url: "小程序路径+参数（建议使用encodeURIComponent做些加密处理）"});
         }
      });
   });
}

还有一点要特别注意，要配置下载域名！

三、小程序定位服务

这个具体问题就是没有申请相关权限导致的，使用定位服务也要提前检查设置。

由于内置api自动定位服务功能只能给到我们经纬度，我们大部分需求是要求字符串形式展现给用户，所以建议搭配一下地图厂商给的api搭配使用微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)。

//展示为腾讯地图api使用
import qqmap from '@/common/qqmap-wx-jssdk.min.js'
var qqmapsdk = new qqmap({
	    key: '自己申请' // 必填
})
//获取当前位置信息
query_Current_Location(){
	let that = this
	uni.authorize({
	   scope: 'scope.userLocation',
	   success() {
		uni.getLocation({
			type: 'gcj02',
			success: function(res) {
			qqmapsdk.reverseGeocoder({
			         location:res.latitude+","+res.longitude  || '',
				 success: function(res) {//成功后的回调
				       
			         },
			 fail: function(error) {
				       console.error(error);
			 },
			 complete: function(res) {
				       console.log(res);
				       }
				   })
				}
			   });
			}
		   })
		}

用户地图选择则搭配map组件就可以了，如下代码示例👇。

<template>
	<view>
	    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude" :enable-traffic="true"></map>
	</view>
</template>

<script>
export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				selected_latitude:0,
				selected_longitude:0
			}
		},
		methods: {
			//获取当前的经纬度
			get_location() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
					}
				});
			},
			//选择位置
			selected_location() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.selected_latitude = res.latitude
						that.selected_longitude = res.longitude
						that.$emit('selected_location', res);
					},
					fail: function(){
						that.$emit('selected_location', {name:"",address:""});
					}
				});
			}
		},
		created() {
			this.get_location()
			this.selected_location()
		}
	}
</script>

<style scoped lang="scss">
	.map {
		width: 100%;
		height: 100vh;
	}
</style>

四、分包

开发项目前，一定要做好项目规划，小程序分包是必不可少的，一旦主包体积过大，不仅无法真机预览，还会导致无法发布体验版本。如果使用uniapp建议在manifest.json开启分包优化选项subPackages: true。

使用分包 | 微信开放文档 (qq.com)

五、样式穿透无效

主要是子组件使用样式穿透不生效，解决办法就是在子组件引入以下代码👇。

options: {
	   styleIsolation: 'shared'
	 }