以下是我接触小程序项目遇到过的一些问题做的一些记录。（后续有遇到新的问题再进行补充）
1.微信小程序的 text 标签，它相当于 span 标签，但是在使用的时候不能换行，否则内容也会换行显示。
2.小程序的自定义组件除继承样式外，app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。解决方法可参照官方文档对自定义组件设置外部样式类或者使用全局样式类。参考链接如下：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
3.小程序的mastache语法不支持js的方法，即在页面标签中，使用以下js 方法无效，Object.keys()；toString()；indexOf()。因此在遇到页面需要使用以上方法时，可在相应页面的js里进行处理并返回一个可供页面获取的值。
4.rich-text 可实现对后端返回的html字符串的转化，使得其能在页面得以展示。
5.小程序弹层穿透问题，描述：在出现弹出层时，底部的页面会出现可滚动情况。解决方法：
（1）弹窗的内容没有滚动或者不需要滚动时，可通过给遮罩层定义一个防止事件冒泡的方法，catchtouchmove="true";
（2）弹窗的内容可滚动时，可通过动态添加样式的方法：
.no-scroll{
top:0px;
left:0px;
width:100%;
height:100%;
overflow:hidden;
position:fixed;
z-index:0;
}
如弹窗出现，加入该样式，关闭时，去除该样式。
6.对图片进行base64转码遇到的问题。
一开始我是用了这种方式进行转码,
wx.request({
url: filePath,
method: 'GET',
responseType: 'arraybuffer',
success: function (res) {
console.log(res)
}
});
在开发工具上测试是没有问题的，但是当我在真机上上传的时候，发现报错了，提示了 request:fail invalid url （无效地址问题）。最后是采用了以下方法解决的，使用这种方式wx.getFileSystemManager().readFileSync 对图片进行转码。
该解决方案来自于 好的经验要分享：chooseImage转base64
7.开发过程中遇到首页在登录的情况下要显示购物车悬浮按钮，但是在app.js获取token会有一个时间上的问题（可能跟手机的网络也有一定关系），导致真机使用的时候（开发者工具上显示是没有问题的），一直显示不出来，暂时的解决方法是设置一个定时器去请求购物车接口，如有更好的方法再修改。
8.页面跳转
（1）wx.navigateTo
wx.navigateTo({
url:'',
success:function(){},
fail:function(){},
complete:function(){}
})
url参数问题：不能跳转到tabBar页面；带参数的格式：path?params=params¶ms1=params1
（2）wx.navigateBack()，关闭当前页，返回上一页或上n级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层。
参数：delta->类型:Number，默认值：1，说明：返回的页面数，如果delta大于现有的页面数，则返回首页。
（3）wx.redirectTo()，关闭当前页，跳转到非tabBar的某个页面。
url参数问题：不能跳转到tabBar页面；带参数的格式：path?params=params¶ms1=params1
（4）wx.reLaunch()，关闭所有页面，打开应用内的某个页面。
url参数问题：带参数的格式：path?params=params¶ms1=params1，如果是跳转到tabBar页面，则不能带参数。
（5）wx.switchTab()，跳转到tabBar的某个页面，并关闭其他所有非tabBar页面。
参数：目标页面必须是在：app.json的tabBar中定义的页面；不能带参数。
例：wx.switchTab({url:'/page/index/index'})
9.添加外部icon
由于小程序限制，wxss引入ttf时需要转为base64的路径，可通过该地址进行转码。完成转码后，把转码后的路径复制到wxss里引入，这过程可能会遇到错误，因为上述转码的路径会有换行，如果遇到错误，可对相关的换行去除即可。
10.小程序录音功能
旧版的录音功能wx.startRecord从基础库1.6.0开始已经停止维护，新的录音api为wx.getRecorderManager()。用法如下，首先获取全局唯一的录音管理器：
this.recorderManager = wx.getRecorderManager();
开始录音，有两种格式的文件，一种为MP3，一种为acc，可根据需要进行配置。
this.recorderManager.start({
format: 'mp3' // 如果录制acc类型音频则改成aac
});
结束录音：
this.recorderManager.stop()；
以上是录音功能，recorderManager有一些相对应的监听函数，这里列举下我用到的，一个是onError，用于监听录音错误事件，一个是onStop，用于监听录音结束操作，通过监听该状态，对生成的录音文件进行上传存储操作。
11.小程序播放录音功能
组件audio也停止维护，wx.playVoice该api也停止维护替代为wx.createInnerAudioContext()。其用法如下：通过wx.createInnerAudioContext()获取对应的InnerAudioContext 实例，然后使用this.innerAudioContext.src = this.data.src;对音频文件路径进行设置，使用this.innerAudioContext.play()进行播放操作。
以上是播放音频功能，同样的，createInnerAudioContext也有一些相对应的监听函数，我用到了onPlay以及onEnded，用于监听音频的播放以及播放结束，对页面的播放按钮进行修改。
12.小程序picker组件
当picker的值是objArrays类型时，需要设置range-key="name"，否则组件选择的值无法生效，显示的下拉项会是[object Object]。
13.自定义下拉刷新
写自定义下拉刷新的时候，出现了一个问题，如果使用fixed定位，把自定义的内容固定在顶部，并把这个组件的z-index设置为-1时，开发工具可以正常显示，但是真机测试时却无法正常显示。
开发工具
后面发现组件使用fixed定位，不是基于可视窗口定位，导致这一块自定义的部分跟着页面一起下拉了，而我们又设置了z-index：-1，所以导致在真机上看似乎是丢失了。现阶段的做法是取消用定位的方式，定义一个状态字段，检测到下拉刷新的操作时，设置一个状态让它显示。（待优化）
14.原生组件video优先级
由于原生组件video优先级是最高的，所以导致在ios手机上，我们自定义的tab组件被遮挡住了。官方提供了cover-view、cover-image，用于覆盖在原生组件之上，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher。但是cover-view有一个不足是目前不支持字体icon，只能使用图片代替（该问题开发工具上无法发现，只能在真机的时候才能发现有这问题存在）。
15.createVideoContext的使用
在页面中如果我们要获取videoContext对象，那我们可以直接用wx.createVideoContext(id)进行获取，但是如果在自定义组件里使用的话，那么必须修改成wx.createVideoContext(id,this)，否则对应的play，pause等方法都无法调用成功。
16.echarts 图表
部分ios会出现echarts 图表渲染后页面滑到底部页面会卡住的现象，具体是在IOS真机中当手指触摸图表交互时，阻止了页面正常上下滑动。发现导致的原因应该是ios版本问题，在ios12版本的手机上没发现这种情况，现在针对这种情况暂时的处理是对ec-canvas.html进行修改，删除bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"这一部分代码。这样的操作会使得无法触发echart的一些特效。
17.图片显示问题
针对图片宽高不一致，但是我们又需要对图片进行宽高限制，导致显示时可能出现图片宽度或高度被拉伸或者压扁问题。针对此问题，我们可以采用小程序提供的mode属性进行处理。mode属性可以对图片进行缩放、裁剪，以确保我们的图片是显示时不会出现被拉伸/压扁的问题。
网友评论