小程序坑两三

Posted 2020-10-15 阿席巴i

• 以下总结随时有可能根据小程序版本更新出现变化

1. 在获取小程序二维码时, 返回的是"乱码", 其实是==二维码==的二进制文件流, 需要后端对其进行处理, 存为图片后, 将路径返回给前端即可

2. 在==启用新接口==的时候, 需要将域名添加到 [微信公众平台]--[设置]--[开发设置]--[服务器配置], 才可正常访问服务器
3. 小程序中request方法当请求方式为GET时, 将==参数==写入data中即可实现url的==自动拼接==, 无须手动进行url拼接
4. 在小程序中不可引用任何涉及到==window==的第三方js文件, 在小程序中没有window的概念, 不要尝试用浏览器中操作dom的方法去操作小程序中的元素.

5. 在小程序的接口请求中不能是用==this==关键字, 需要在Page下挂载的一级函数中将this指针转移到非关键字上(另, 在setData成功之后增加了回调函数, 可应用于一些需要参数设置成功之后才能执行的场景), 如:

   Page({
   onLoad () {
       const that = this
       request().then(res => {
           that.setData({
               res: res
           }, function () {
               console.log(‘set data success‘)
           })
       })
   }
   })

6. 善用==template==模板, 有利于模块化的实现, 并大大简化了二次开发的成本, 在使用模板时, 切记需要将wxml, wxss, js分别引入当前页面的对应的三个文件中

7. wxml与js之间的==数据传递==是在wxml标签上添加 data-some-data=""属性, 通过事件触发, 在event中接收event.currentTarget.dataset中以驼峰方式(即: someData)获取到的

8. 若需要直接==更改data数据==中某个对象下的属性的值时, 或者需要更改数组中某个下标处所对应的元素时, 可通过如下方法修改:

   Page({
   data: {
       person: {
           name: ‘hanmeimei‘
       },
       arr: [1, 2, 3]
   },
   onLoad () {
       this.setData({
           ‘person.name‘: ‘lilei‘,
           ‘arr[2]‘: 1
       })
       console.log(this.data.person) // {name: ‘lilei‘}
       console.log(this.data.arr) // [1, 2, 1]
   }
   })

9. 在wxml中, 所有有关==js变量或者表达式==的, 全部用{{ }}来标明, 所有不被{{ }}包裹的, 全部被当做字符串解析

10. ==绑定事件==无须在事件名后加括号, 传参数是用data-some-param=""来传参. 事件的绑定有两种方式, bindtap or catchtap, 区别在于使用catch绑定事件会阻止事件继续向上==冒泡==, 而bind不会, 根据具体需要来使用.
11. 尽量避免==可滑动组件==的多级嵌套, 如: swiper, scroll-view, canvas, map, 否则你会被事件冲突的处理搞得心烦意乱.
12. wxss文件==不支持==类似于less, scss等==多层级嵌套==的编写方式, 最常用的标签选择方式是使用class来进行选择, 可能是在选择器的性能上做考虑, 因为一级的class选择的效率要高得多, 其具体目的还不得而知
13. 最好是对wx.request()进行一次==封装==, 将接口请求的常用数据(如: open_id, access_token, ...)进行统一添加, 以减少后期的开发成本
14. 小程序header部分, 以及tabBar部分为==代码编辑盲区==, 所有wxml, js可操作区域在header以下, tabBar以上, 这部分区域只可根据.json文件进行有限的修改
15. 小程序中不可使用==背景图片==, 所有涉及到图案的都须在image标签中添加
16. 小程序页面之间==数据传递==的方式可分为两种, 一种是通过app下的globalData(其实这种方式更严格的说应该是数据共享), 另外一种是通过跳转的时候的url参数拼接, 在onLoad时将参数接到来实现数据传递. 这里要注意一下第二种方式, 在拼接参数时需注意, 参数中不可出现 = & ? # 等会影响到url参数解析的字符, 否则会被过滤, 若有此类参数, 则需在拼接前将含有特殊字符的参数使用encodeURIComponent()进行转码, 在接收到参数之后再使用decodeURIComponent()进行解码, 方可实现含特殊字符的数据传输
17. 小程序的框架及组件已实现了一定程度的==半集成化==, 如onPullDownRefresh事件, 可实现下拉刷新的功能; onReachBottom事件, 可实现分页加载的功能; onPageScroll事件, 可监听页面滚动, 也许可以通过此事件实现图片的懒加载, 还未证实

18. 微信开发者工具有一个特异功能, 就是哪里出错它都不会报, 也不会告知原因, 你只会发现你的代码执行不下去了, 这时候最好的办法就是打断点, 一点一点向下推移, 然后总有一部分代码是该执行但是没有执行到, 然后就会发现一部分代码会有非常明显的语法或者常见报错形式, 但是微信很任性, 它看出来了, 但就是不告诉你.

19. 移动应用支持小程序类型分享

    移动应用分享功能支持小程序类型分享，要求发起分享的App与小程序属于同一微信开放平台帐号。支持分享小程序类型消息至好友会话，不支持“分享至朋圈”及“收藏”。微信客户端版本要求：6.5.6及以上微信客户端版本。为兼容旧版本客户端，若客户端版本低于6.5.6，小程序类型分享将自动转成网页类型分享。