小程序开发遇到的问题

以下是我接触小程序项目遇到过的一些问题做的一些记录。(后续有遇到新的问题再进行补充)

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&params1=params1

(2)wx.navigateBack(),关闭当前页,返回上一页或上n级页面。可通过getCurrentPages()获取当前的页面栈,决定需要返回几层。

参数:delta->类型:Number,默认值:1,说明:返回的页面数,如果delta大于现有的页面数,则返回首页。

(3)wx.redirectTo(),关闭当前页,跳转到非tabBar的某个页面。

url参数问题:不能跳转到tabBar页面;带参数的格式:path?params=params&params1=params1

(4)wx.reLaunch(),关闭所有页面,打开应用内的某个页面。

url参数问题:带参数的格式:path?params=params&params1=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属性可以对图片进行缩放、裁剪,以确保我们的图片是显示时不会出现被拉伸/压扁的问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容