小程序坑两三

  • 如下总结随时有可能根据小程序版本更新出现变化
  1. 在获取小程序二维码时, 返回的是"乱码", 实际上是==二维码==的二进制文件流, 须要后端对其进行处理, 存为图片后, 将路径返回给前端便可css

  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')
            })
        })
    }
})
  1. 善用==template==模板, 有利于模块化的实现, 并大大简化了二次开发的成本, 在使用模板时, 切记须要将wxml, wxss, js分别引入当前页面的对应的三个文件中前端

  2. wxml与js之间的==数据传递==是在wxml标签上添加 data-some-data=""属性, 经过事件触发, 在event中接收event.currentTarget.dataset中以驼峰方式(即: someData)获取到的
  3. 若须要直接==更改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]
    }
})
  1. 在wxml中, 全部有关==js变量或者表达式==的, 所有用{{ }}来标明, 全部不被{{ }}包裹的, 所有被当作字符串解析json

  2. ==绑定事件==无须在事件名后加括号, 传参数是用data-some-param=""来传参. 事件的绑定有两种方式, bindtap or catchtap, 区别在于使用catch绑定事件会阻止事件继续向上==冒泡==, 而bind不会, 根据具体须要来使用.
  3. 尽可能避免==可滑动组件==的多级嵌套, 如: swiper, scroll-view, canvas, map, 不然你会被事件冲突的处理搞得心烦意乱.
  4. wxss文件==不支持==相似于less, scss等==多层级嵌套==的编写方式, 最经常使用的标签选择方式是使用class来进行选择, 多是在选择器的性能上作考虑, 由于一级的class选择的效率要高得多, 其具体目的还不得而知
  5. 最好是对wx.request()进行一次==封装==, 将接口请求的经常使用数据(如: open_id, access_token, ...)进行统一添加, 以减小后期的开发成本
  6. 小程序header部分, 以及tabBar部分为==代码编辑盲区==, 全部wxml, js可操做区域在header如下, tabBar以上, 这部分区域只可根据.json文件进行有限的修改
  7. 小程序中不可以使用==背景图片==, 全部涉及到图案的都须在image标签中添加
  8. 小程序页面之间==数据传递==的方式可分为两种, 一种是经过app下的globalData(其实这种方式更严格的说应该是数据共享), 另一种是经过跳转的时候的url参数拼接, 在onLoad时将参数接到来实现数据传递. 这里要注意一下第二种方式, 在拼接参数时需注意, 参数中不可出现 = & ? # 等会影响到url参数解析的字符, 不然会被过滤, 如有此类参数, 则需在拼接前将含有特殊字符的参数使用encodeURIComponent()进行转码, 在接收到参数以后再使用decodeURIComponent()进行解码, 方可实现含特殊字符的数据传输
  9. 小程序的框架及组件已实现了必定程度的==半集成化==, 如onPullDownRefresh事件, 可实现下拉刷新的功能; onReachBottom事件, 可实现分页加载的功能; onPageScroll事件, 可监听页面滚动, 也许能够经过此事件实现图片的懒加载, 还未证明
  10. 微信开发者工具备一个特异功能, 就是哪里出错它都不会报, 也不会告知缘由, 你只会发现你的代码执行不下去了, 这时候最好的办法就是打断点, 一点一点向下推移, 而后总有一部分代码是该执行可是没有执行到, 而后就会发现一部分代码会有很是明显的语法或者常见报错形式, 可是微信很任性, 它看出来了, 但就是不告诉你.canvas

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

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

相关文章
相关标签/搜索