【微信小程序】注意点汇总（仅个人学习无参考价值）

小程序开发文档  https://developers.weixin.qq.com/miniprogram/dev/reference/

1. 当在小程序中想要实现某一种布局，查看：组件
2. 当在小程序中想要实现某一个功能，查看:API
3. 当在小程序中想要进行某一个配置或者某一种页面语法，查看:框架 + 指南
4. 查看小程序官网的时候要细心，最好是将要使用的API的相关内容看完整，因为API的配置及限制较多。注意版本变化带来的改变。

 

1. 移动端开发flex，view代替div标签

2. iphone6的设备独立像素375*665px ，iphone6的dpr（物理像素/设备独立像素）为2，所以iphone6的物理像素（分辨率）为750*1334

3. 移动端适配方案viewport适配（<meta name="viewport" content="width=device-width,initial-scale=1.0">）和rem

  而小程序的适配方案用，任何屏幕宽度为750rpx，单位使用响应式rpx，iphone6下：1rpx=1物理像素=0.5px（即1px=2rpx）

  自适应（随着屏幕缩放rem） 响应式s（boostrap，原理媒体查询 @media ）

4. 小程序创建文件（组件）右键page/component

5.   单向数据流
      修改状态数据
      1. 同步修改
      2. this.setData()

6.  bind + 事件名: 冒泡事件   bindtap=""

​     catch + 事件名: 非冒泡事件  catchtap=""

7.列表渲染（for遍历）

   wx:for="{{遍历数组}}"   wx:for-item="遍历对象名字，默认为item"    wx:key="唯一标识符，默认为index"

 

8.条件渲染    wx-if相当于vue中的v-if    hidden相当于vue中的v-show

    wx:if="{{条件}}"

    wx:else="{{条件}}"

    wx:else

 

9.获取用户基本信息

   <button open-type='getUserInfo' />  getUserInfo目前已弃用。

   <button bindtap="getUserProfile" />  getUserProfile，必须要有用户自己触发 

   

10.生命周期

1. onLoad(Object query)
   1. 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
   2. 参数：

名称	类型	说明
query	Object	打开当前页面路径中的参数

2. onShow()
   1. 页面显示/切入前台时触发
   2. 会执行多次
3. onReady()
   1. 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
4. onHide()
   1. 页面隐藏/切入后台时触发。 如navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
5. onUnload()
   1. 页面卸载时触发。如redirectTo或wx.navigateBack到其他页面时。

 

11.常用api

1. 界面交互
   1. 显示消息提示框:showToast()
   2. 显示消息加载框:showLoading()
   3. 关闭消息提示框:hideToast()
   4. 关闭消息加载框:hideLoading()
2. 路由跳转
   1. navigateTo()
   2. redirectTo()
   3. switchTab()
3. 网络请求
   1. request()
4. 本地存储
   1. setStorage()
   2. setStorageSync()
   3. getStorage()
   4. getStorageSync()
5. 媒体
   1. wgetBackgroundAudioManager()
   2. playVoice()

 

12 .wx,request() 发请求的注意事项：

首先需要到小程序微信公众平台（https://mp.weixin.qq.com登录）--开发--开发管理--开发设置--服务器域名（小程序的安全策略（类似同源的意思））

但是实际中小程序的开发进度很快，后端服务器还没给到/后端接口也没有上线/https协议还没有去认证。我们需要去详情设置不检验合法域名。

最大的并发限制是10个

 

13.全局配置文件app.json

pages 为页面路径，window为视窗顶部，tabBar为视窗底部，其中底部可以配置list选项来添加底部导航按钮。

 

14. 事件委托

什么是事件委托  1. 将子元素的事件委托(绑定)给父元素
事件委托的好处  1. 减少绑定次数，提高效率  2. 节省内存空间
事件委托的原理是冒泡
触发事件的对象是子元素
如何找到触发事件的对象
   1. event.target
event.target VS event.currentTarget
   1. event.target绑定事件的对象不一定是触发事件的对象，比如： 事件委托
   2. event.currentTarget绑定事件的对象一定是触发事件的对象

 

如何给节点绑定id，一般用作动态获取{{xxx}}

    1. id="{{xxx}}"   获取event.currentTarget.id

 　2.data-name ="{{xxx}}"    获取event.currentTarget.dataset.name，注意这里的name命名不能使用驼峰写法，因为打印event发现即使你写驼峰也会帮你转化为全部小写