微信小程序踩过的坑~

clipboard.png

1 安全:
在微信开发小程序过程当中,想请求本地JSON文件的假数据来进行数据渲染,发现请求不到数据,后来发现这是小程序的一大特色,微信规定,微信小程序中不知足条件的域名和协议没法请求,即微信小程序的网络请求必须走Https协议,就是说微信小程序必定要经过HTTPS加密。最后解决的方案是经过easy-mock完成了本地开发.前端

2 存储:
公司开发的一个小程序功能比较多,涉及的页面也不少,准备在本地预览时发现,打包后的代码不容许超过2M(2048KB).最后解决方案:1.UI提供的图片进行压缩.2.代码进行简化,尽可能写的精简 3.背景图或者一些稍微大点的图片能够挂到服务器上使用。小程序

3 页面跳转:
当我使用navigateTo方法进行页面跳转时,发现跳转失效,检查代码并无什么问题,后来发现这是小程序的一个限制.TabBar中的list项的配置pagePath,不能其做为他页面的跳转连接。为了解决这个问题,我使用了wx.switchTab方法
clipboard.png微信小程序

4 页面跳转:
不少时候点击某个模块区域须要触发事件跳转到其余页面,可是每每在该模块区域会有按钮点击等触发功能,所以在绑定按钮事件时须要进行阻止冒泡行为,只须要将事件的bind改为catch,bind 是阻止不了冒泡的, 例如 bindtap 改为 catchtap 安全

5 页面跳转:
在开发列表上拉分页加载功能时用到了小程序提供的组件scroll-view(可滚动视图区域),经过bindscrolltolower(滚动到底部/右边,会触发 scrolltolower 事件)绑定了一个方法,可是不管我怎么上拉,并无触发该方法,发现本身遗漏了一个属性,须要给scroll-view配上height样式属性,这样才能触发事件。
代码以下:服务器

<scroll-view scroll-y style="height:1200rpx" lower-threshold="30rpx" bindscrolltolower="searchScrollLower" ></scroll-view>

6 小程序页面传值:
一般咱们想经过页面列表进行传值,在绑定的方法里进行取值会用到data-index="{data}"来进行传值,在这里发现了一个小坑。微信

这是我在列表随意取得一个传值名
clipboard.png
可是经过打印发现取值的对象名发生了改变,由大写全转换成了小写网络

clipboard.png所以你们在开发中取值必定要使用小写~省得出些奇怪的bug微信开发

7 小程序底部tabBar:
设计给个人图片,是4040 前端无法去改变图片样式大小,致使在手机上出现模糊效果,仔细查看文档.发现有这条提示"建议尺寸为 81px 81px ,当 postion 为 top 时,此参数无效"立马叫设计切了个81*81解决了该问题工具

8 wx.checkSession(OBJECT):
开发者须要调用wx.checkSession接口检测当前用户登陆态是否有效。登陆态过时后开发者能够再调用wx.login获取新的用户登陆态。 本人发如今pc端测试会一直检测状态成功,一切已真机测试结果为主,这是个小坑post

9 模板消息
在开发者工具,提交表单传来的formId都是'the formId is a mock one',是由于这是在微信开发器上面运行的,必需要在在真机上运行才能发送正确

10 scroll-view高度
给scroll-view标签设的高度很差定死,所以作了如下处理
WXML:

<scroll-view scroll-y  style="height:{{scrollHeight}}px;"  bindscrolltolower="searchScrollLower">

js:

wx.getSystemInfo({
  success: function (res) {
    that.setData({
      scrollHeight: parseInt(res.windowHeight) + 200
    })
  }
});

以上是本次小程序碰到的一些小问题,开发时间大概花了2周时间,在之后的项目中,本人会总结更多的坑点~给后来人少走点坑

相关文章
相关标签/搜索