小程序坑两三

  • 以下总结随时有可能根据小程序版本更新出现变化
  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,小程序类型分享将自动转成网页类型分享。

时间: 2024-10-14 07:48:46

小程序坑两三的相关文章

微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API

原文:微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API 反正我是没有测通这两个API!!!!不知道用的方式不对还是其他的!!!先记录下回头再说... 主要方法: wx.uploadFile(OBJECT)上传 wx.downloadFile(OBJECT)下载 wxml <button type="primary" bindtap="listenerButtonDownLoadFile"

微信小程序把玩(三十六)Storage API

原文:微信小程序把玩(三十六)Storage API 其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步 异步存储方法: 存数据 wx.setStorage(object) 相同key会覆盖,可写回调方法 获取方法: wx.getStorage(object) 清除方法: wx.clearStorage()里面可以写回调函数 成功,失败,完成 同步存储方法: 存数据 相同key会覆盖 wx.setStorageSync(key,data) 读数据

微信小程序把玩(三十四)Audio API

原文:微信小程序把玩(三十四)Audio API 没啥可值得太注意的地方 重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.wx.playBackgroundAudio(object)播放音乐 3.wx.pauseBackgroundAudio()暂停音乐 4.wx.seekBackgroundAudio(object) 设置播放进度 5.wx.stopBackgroundAudio()停止播放音乐 三个监听器: wxml <b

微信小程序把玩(三十八)获取设备信息 API

原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx.onAccelerometerChange, 罗盘数据wx.onCompassChange wxml <button type="primary" bindtap="getNetWorkType">获取网络类型</button> <butt

微信小程序把玩(三十九)navigation API

原文:微信小程序把玩(三十九)navigation API 演示效果也看到了小程序也就提供这几个处理导航控制.值得注意的是只能同时导航五个页面 主要属性: 导航条一些方法 wx.setNavigationBarTitle(object) 设置导航条的Title 导航标题可以通过三种方式设置,第一种是通过全局配置名字统一,第二种就是在page中新建个json文件配置它会覆盖全局配置的title,第三种就是通过API设置. wx.showNavigationBarLoading()设置在导航条上显示

百度小程序坑坑坑

吐槽:被小程序坑死啊 问题:在循环中,根据条件加载不同的template模板出现问题. <block s-for="news, index in item.news_data"> <!--begin template is 中第一次比较,满足就会出现问题 --> <block s-if="item.type==1"> <template is="newsText" data="{{{...ite

微信小程序入门(三)

11.开发框架基本介绍 四个组成部分,其它三个前面介绍过了,主要WXS:WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出页面结构. 12.WXML之语法 概念 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合组件.WXS和时间系统,可以构建出页面的结构. 语法 <标签名 属性名=“属性名1” 属性名=“属性名2”...> ...</标签名> 简单例子 <view> Hell

微信小程序开发《三》:微信小程序请求不能使用session的原因及解决办法

本人在前面的微信小程序开发<二>中提到要想在服务端保持状态需要在客户端第一次请求服务器的时候给客户端返回一个sessionid,由客户端在本地保存,下次请求的时候在header里面带上这个sessionid,写到cookie字段里.但是最近发现请求时哪怕每次在header里带上sessionid还是不能拿到同一个session,百度后终于发现坑了(也不知道微信为啥要这么做),原来微信对wx.request这个API做了修改,小程序发起的请求并不是直接请求我们的后台服务器,而是先通过微信的服务器

天河微信小程序入门《三》:打通任督二脉,前后台互通

原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https证书后就第一时间去部署后台环境,但是发现每次访问https都要带上8443端口实在是很坑爹啊,作为一个强迫症晚期,我要做的自然是不带端口直接访问.打开你tomcat下的conf文件夹,编辑里面的server.xml <Connector port="80" protocol=&quo