--- highlight: a11y-dark --- > 这篇目主要为记录开发小程序时遇到的各种问题 # 1.navigateto跳转栈溢出 > navigateTo会有栈内存溢出的问题，因此需要做一个判断，最大栈内存是10层 ```js switchTab(e) { const data = e.currentTarget.dataset const url = data.path // console.log(url) // //切换tab时，改变路由地址 if (getCurrentPages().length <= 0) { wx.navigateTo({ url }) } else { wx.reLaunch({ url }) } //这里可以得到栈的层数 console.log('栈', getCurrentPages().length) this.setData({ //切换tab时，改变当前激活的序号，改变tab颜色图标等样式 selected: data.index }) } ``` # 2.数据库无法接受表情字符 > 当我们在小程序的表单中提交表情时，这是数据库如果不加处理，是无法接受的,因此需要字符串转码 ## 2.1 提交表单 > 提交表单转码，接受数据在转回来 ```js 通过encodeURI解码方式 let regex = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig //利用正则替换 let nickWords = this.data.words.replace(regex, function (res) { return encodeURIComponent(res) }) let nickTitle = this.data.title.replace(regex, function (res) { return encodeURIComponent(res) }) let nickTopic = this.data.topic.replace(regex, function (res) { return encodeURIComponent(res) }) let params = { contract_id: parseInt(this.data.initList.contract_id), works: nickWords, title: nickTitle, topic: nickTopic, picture_urls: this.data.picArr, video_urls: this.data.vedioArr } ``` ## 2.2接受数据 ```js topic: decodeURIComponent(res.result.topic), //标题 title: decodeURIComponent(res.result.title), //内容文字 words: decodeURIComponent(res.result.works) ``` > 这里有个问题这种udcode编码方式，存在%问题，因此在提交时需要转义一下%，万一用户输入表情加%又会出现问题，如果文字输入中原本就存在%，在转码时会将%转码，因此需要用正则将%换成%25，在解码过后%25自动会转成%。 ```js analysisEmoji(str) { //将%转成%25 let keyStr = str.replace(/%/g, "%25") let regex = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig let nickWords = keyStr.replace(regex, function (res) { return encodeURIComponent(res) }) return nickWords }, ``` # 3.真机MiniProgramError报错 > 信真机调试时出现: (in promise) MiniProgramError {“errMsg“:“hideLoading:fail:toast can‘t be found“} Object > wx.showLoading 和 wx.showToast 同时只能显示一个 > wx.showLoading 应与 wx.hideLoading 配对使用解决方法定义一个变量isShowLoading=false；调用 wx.showLoading 时候赋值 isShowLoading为true，并调用showLoading ```js if(!isShowLoading){ wx.showLoading({ title: '加载中', icon: 'loading', }) isShowLoading =true; } //调用 wx.hideLoading 时候先判断 isShowloading，为true才能执行，否则不执行。 if(isShowLoading){ wx.hideLoading() isShowLoading =false; } //调用 wx.showToast 时候判断 isShowloading，为true就执行 wx.hideLoading ， //否则不执行。接着执行showToast函数。 if(this.data.isShowLoading){ wx.hideLoading() } wx.showToast({ title: '没有更多数据了', icon: 'none', }); ``` # 4.swiper设置圆角时，瞬间直角问题 > 当设置swiper圆角时，会出现先直角后圆角 ```js 解决方式： 1.需要在swiper外面的盒子设置 overflow: hidden; 2.在swiper上设置 ovewflow:hidden; border-radius:10rpx; transform: translateY(0); 3.给图片设置圆角 border-radius:10rpx; ``` ```js

``` ```css .swiper_content { width: 710rpx; height: 250rpx; position: absolute; left: 50%; transform: translateX(-50%); top: 20rpx; border-radius: 10rpx !important; border-radius: 30rpx; overflow: hidden; swiper { width: 100% !important; height: 250rpx !important; border-radius: 10rpx !important; } swiper-item { width: 100%; border-radius: 10rpx !important; position: relative; } image { width: 100%; height: 250rpx; border-radius: 10rpx; } } ``` # 5.scroll-view横向滑动存在拉动条问题 > 使用scroll-view时需要隐藏滚动条，默认是存在滚动条 ```js //在父盒子中加上 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } ``` # 6.自定义导航栏 > 在实际需求中，小程序的默认导航栏需要变成我们想要的模式，例如，搜索，滑动等，实际上就是先去除默认的导航条，在根据小程序提供的接口计算进行导航条位于顶部的高度， > 导航栏由三部分组成，胶囊，最顶部导航栏，主体导航栏 ## 6.1配置index.json,隐藏原始导航栏 ```js "navigationStyle":"custom" ``` ## 6.2 计算最顶部导航栏高度 ```js //index.js wx.getSystemInfo({ success: (res) => { this.setData({ statusBarHeight: res.statusBarHeight, }); }, }); ``` ```html //index.wxml ``` ## 6.3 根据导航栏与胶囊计算主体导航栏高度 ```js //index.js let systemInfo = wx.getSystemInfoSync(); let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息 wx.getMenuButtonBoundingClientRect(); let navBarHeight = (function () { //导航栏高度 let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距 return 2 * gap + rect.height; })(); this.setData({ navBarHeight }); ``` ```js //index.less .nav_title_area{ position: relative; color: #fff; .select_option{ display: flex; align-items: center; height: 100%; vertical-align:middle; text{ padding-left: 20rpx; padding-right: 5rpx; padding-bottom: 5rpx; } } .nav_title{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); color: #fff; } } ``` ## 6.4 需要将导航栏固定定位 ```js //index.wxml {{citySelect[citySelectIndex]}}

商单广场 ``` ## 6.5 需要增加一个view填补导航栏固定定位留下的空白 ```js ``` # 7.扫小程序码进入详情页参数无法获取 > 扫小程序码进入一个固定页面，这个很简单，直接在开发者后台生成就可以，但是如果需要动态生成，根据不同的详情页id生成不同的小程序码，这个时候因为是直接进入该页面，不经过首页，因此在onLoad中的options是拿不到这个id的，这是需要另外一个参数scene ```js onLoad: function (options) { if (options.aId) { this.setData({ aId: options.aId, }); } else if (options.scene) { //这里需要解码 let scene = decodeURIComponent(options.scene); let aId = parseInt(scene.split("=")[1]); this.setData({ aId: aId, }); } else { this.setData({ aId: this.data.aId, }); } } ``` ```js 我传递过来的应该是/pages/details/index?aId=2196,scene得到？后面的部分解决办法是在scene中获取这个参数,是?后面的部分，获取的参数是aId%3D2196，需要通过 decodeURIComponent解码aId=2196 let scene = decodeURIComponent(options.scene); 使用正则或者字符串切割的方式得到aId ``` > 这里很难进行调试，需要根据微信开发者工具进行调试，跟换编译模式 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be0420956f924ecfa4604a2dea90f425~tplv-k3u1fbpfcp-watermark.image?) ```js 调试的时候可以选择编译模式1047，scene后面的可以根据 let a='aid=1234' var uri_encode=encodeURIComponent(a); console.log(uri_encode); 反编码得到 ``` # 8.根据经纬度得出对应地点 > 这里结合腾讯地图进行操作，通过小程序的经纬度结合腾讯地图api，实现获取当前城市位置 ## 8.1 在后台管理系统配置腾讯地图插件设置=>第三方设置=>添加插件 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34b6b9404b25416699175c59a24fa34c~tplv-k3u1fbpfcp-zoom-1.image) ## 8.2.申请腾讯地图账号，生成key WebServiceAPI需要配置，域名白名单，填写servicewechat.com，这个一定要写，并填写微信小程序appid ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/349c122d531f4c75880c08ab70ef0210~tplv-k3u1fbpfcp-watermark.image?) ## 8.3.在app.json中配置 > 目的是可以调用小程序的api获取当前地点的经纬度 ```js "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }, ``` ## 8.4.使用qqmap-wx-jssdk [引入qqmap-wx-jssdk](https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip) ```js import qqmapwx from "../../utils/qqmap-wx-jssdk.min.js"; Page({ /** * 页面的初始数据 */ data: {}, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { const qqmapsdk = new qqmapwx({ // 使用你在腾讯地图应用生成的key key: "LM5BZ-F55W3-X3J3R-YXUVL-LCF7V-DZBBW", }); // 小程序会弹窗提示授权后才会执行 wx.getLocation({ type: "wgs84", success(res) { //得到经纬度 console.log(res); qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude, }, //成功后的回调 success: (r) => { console.log("地址信息", r.result.address_component); }, fail: function (res) { console.log(res); }, }); }, }); }, }); ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79f7d96f568b4b4ca3b73d57be19116a~tplv-k3u1fbpfcp-watermark.image?)