微信小程序踩过的坑~

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

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

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

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}"来进行传值,在这里发现了一个小坑。

这是我在列表随意取得一个传值名

但是通过打印发现取值的对象名发生了改变,由大写全转换成了小写

因此大家在开发中取值一定要使用小写~免得出些奇怪的bug

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

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

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周时间,在以后的项目中,本人会总结更多的坑点~给后来人少走点坑