美文网首页
微信小程序个人笔记

微信小程序个人笔记

作者: Vincent_Du | 来源:发表于2017-02-24 15:57 被阅读0次

2017.02.06 版本

tabBar

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序

逻辑层(App Service)

小程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。

  • 增加 AppPage 方法,进行程序和页面的注册。
  • 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
  • 每个页面有独立的作用域,并提供模块化能力。
  • 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
  • 开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。

App

  • App() 必须在 app.js 中注册,且不能注册多个。
  • 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
  • 不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。
  • 通过 getApp() 获取实例之后,不要私自调用生命周期函数。

Page.prototype.setData()

  • setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。
  • 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
  • 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

getCurrentPages()

不要尝试修改页面栈,会导致路由以及页面状态错误。

Page 实例的生命周期

mina-lifecycle.png

Bug & Tip

  1. bug: iOS/Android 6.3.30, 首次进入页面,如果页面不满一屏时会触发 onReachBottom ,应为只有用户主动上拉才触发;
  2. bug: iOS/Android 6.3.30, 手指上拉,会触发多次 onReachBottom ,应为一次上拉,只触发一次;

网络

  • 发起请求
  1. 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html, 其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版。
  2. data 数据说明 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。
    转换规则如下:
    对于 header['content-type'] 为 'application/json' 的数据,会对数据进行 JSON 序列化
    对于 header['content-type'] 为 'application/x-www-form-urlencoded' 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)
  3. content-type 默认为 'application/json'
    bug: 开发者工具 0.10.102800 版本,header 的 content-type 设置异常;
  4. 客户端的 HTTPS TLS 版本为1.2,但 Android 的部分机型还未支持 TLS 1.2,所以请确保 HTTPS 服务器的 TLS 版本支持1.2及以下版本;
  5. 要注意 method 的 value 必须为大写(例如:GET);
  6. url 中不能有端口;
  7. request 的默认超时时间和最大超时时间都是 60s
  8. request 的最大并发数是 5
  9. wx.request请求,method设为POST时,加上header: {'content-type': 'application/x-www-form-urlencoded'}可以正常获取数据
  • 上传
  1. 最大并发限制是 10 个
  2. 默认超时时间和最大超时时间都是 60s
  • 下载
  1. 最大并发限制是 10 个
  2. 默认超时时间和最大超时时间都是 60s
  3. 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html, 其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版。
  4. 6.5.3 以及之前版本的 iOS 微信客户端 header 设置无效
  • WebSocket
  1. 如果 wx.connectSocket 还没回调 wx.onSocketOpen,而先调用 wx.closeSocket,那么就做不到关闭 WebSocket 的目的。必须在 WebSocket 打开期间调用wx.closeSocket 才能关闭
  2. createSocket 链接默认和最大超时时间都是 60s
  3. 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html, 其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版。
  • 媒体
  1. 文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。
  2. 录音: wx.startRecord 接口需要用户授权,请兼容用户拒绝授权的场景。
  3. 控制音乐播放进度:iOS 6.3.30 wx.seekBackgroundAudio 会有短暂延迟
  • 文件
  1. 本地文件存储的大小限制为 10M
  2. 新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx
  • 数据缓存
  1. 本地数据存储的大小限制为 10MB
  • 位置
  1. iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息
  2. wx.getLocation、wx.chooseLocation 接口需要用户授权,请兼容用户拒绝授权的场景。
  • 设备
  1. 获取网络类型 wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
  • 重力感应、罗盘
  1. 监听重力感应数据,频率:5次/秒
  2. 监听罗盘数据,频率:5次/秒
  • 交互反馈
  1. Android 6.3.30,wx.showModal 的返回的 confirm 一直为 true;
  2. wx.showActionSheet 点击取消或蒙层时,回调 fail, errMsg 为 "showActionSheet:fail cancel"
  • 导航
  1. 为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。
  2. wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
  • 开发接口
  • 登录
  • 用户信息
    • wx.getUserInfo 接口需要用户授权,请兼容用户拒绝授权的场景
    • 接口如果涉及敏感数据(如wx.getUserInfo
      当中的 openId 和unionId ),接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据,需要对接口返回的加密数据( encryptedData )进行对称解密。
  • 微信支付
    • 6.5.2 及之前版本中,用户取消支付不会触发 fail 回调,只会触发 complete 回调,回调 errMsg 为 'requestPayment:cancel'
  • 模板信息
    • 微信6.5.2及以上版本支持模板功能。低于该版本将无法收到模板消息
  • 分享
    • 享图片不能自定义;会取当前页面,从顶部开始,高度为 80% 屏幕宽度的图像作为分享图
  • 获取二维码
    • 通过该接口,仅能生成已发布的小程序的二维码。
    • 可以在开发者工具预览时生成开发版的带参二维码。
    • 带参二维码只有 100000 个,请谨慎调用。
    • POST 参数需要转成 json 字符串,不支持 form 表单提交。

组件

  • input
  1. 微信版本 6.3.30, focus 属性设置无效;
  2. 微信版本 6.3.30, placeholder 在聚焦时出现重影问题;
  3. input 组件是一个 native 组件,字体是系统字体,所以无法设置 font-family;
  4. 在 input 聚焦期间,避免使用 css 动画;
  • textarea

    1. 微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。
    2. textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit。
    3. 不建议在多行文本上对用户的输入进行修改,所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
    4. textarea 组件是由客户端创建的原生组件,它的层级是最高的。
    5. 请勿在 scroll-view 中使用 textarea 组件。
    6. css 动画对 textarea 组件无效。
  • map

  1. map 组件是由客户端创建的原生组件,它的层级是最高的。
  2. 请勿在 scroll-view 中使用 map 组件。
  3. css 动画对 map 组件无效。
  • canvas
  1. canvas 组件是由客户端创建的原生组件,它的层级是最高的。
  2. 请勿在 scroll-view 中使用 canvas 组件。
  3. css 动画对 canvas 组件无效。

相关文章

网友评论

      本文标题:微信小程序个人笔记

      本文链接:https://www.haomeiwen.com/subject/ahrbwttx.html