小程序学习总结

1 微信小程序是什么？

2 什么应用适合做成微信小程序

小程序性（Hybrid）能上优于webapp 劣于IOS ANDROID 原生应用

3 商业+产品

4 小程序特点

小程序不支持webview

小程序生命周期

分为页面生命周期 和 组件生命周期

页面生命周期

组件生命周期

发送请求

wx.request   在4XX状态码下不会执行fail函数  同样执行success函数 只有当网络中断时才会执行fail函数  小程序中的wx.request 是异步的，不能修改

component组件中JS属性

properties 组件的属性列表 接收从父组件或者页面传递下来的数据
data 组件的初始数据 不能被外部直接设置
数据更新 使用 setData复制代码

组件的Behavior行为

创建一个JS通过Behavior关键字

然后在组件内引入这个模块 ，通过 behaviors:[classicBeh]来实现继承

发生多继承时，properties  data method 等会被子类或者最后一个父类覆盖，而生命周期这些不会被覆盖，会依次执行每一个父类和子类的生命周期

小程序设置和获取缓存

   wx.setStorageSync(key, value)

   wx.getStorageSync(key)

wx:if  VS hidden

组件之间通信

父组件向子组件传递数据    通过  properties 

子组件向父组件传递数据  通过事件  triggerEvent 

this.triggerEvent('eventName',{data},{})

第一个参数为触发页面的自定义事件名称，第二个事件参数为传递过去的参数，第三个事件参数

父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法

设置插槽需要在组件中 开启 multipleSlot:true 属性

options:{
  multipleSlots:true
}复制代码

列表渲染

wx:for   

wx:key   当需要渲染大量数据时  加上以后会提升性能

遍历的列表下面的元素是 object    wx:key = 'id'不重复   数字或者字符串

遍历的列表下面的元素是 数字或者字符串  wx:key='*this'

组件参数传递 

组件属性 properties  ----- js

slot ----- html/wxml

外部样式 externalClass  ----- css/wxss

WXS

可以参考ES5语法

小程序跳转页面

  const bid = this.properties.book.id
  wx.navigateTo({
    url: `/pages/book-detail/book-detail?bid=${bid}`
  })
}
复制代码

小程序加载时 loading

wx.showLoading() 开启

wx.hideLoading() 关闭

并行请求和串行请求

当并行请求时  多个promise实例 可以进行合并

Promise.all([]).then()  会等待所有的请求返回了结果再执行then（）里面的方法 

组件和页面 以及Model 应该在哪里发送http请求（重点）

如果编写的组件是为了方便很多项目使用，为了增加组件的复用性，不要讲http放在组件中发送，应该编写在model中 在页面中进行调用发送http请求， 如果是复杂组件 只用于单个项目中，不追求复用性，只需要完成代码的分离，可以复杂组件中进行调用发送http请求

注意setData与直接赋值的区别

当数据在WXML中进行绑定时  需要更新数据达到 页面即时更新的效果时就需要使用 setData

如果数据只是用来在JS中作逻辑判断用，不需要更新页面时 就可以直接赋值

小程序之间的跳转 

小程序之间要发生跳转，需要进行关联，进行关联的话需要绑定到同一个公众号或者订阅号，在公众号后台里面去设置

微信小程序backgroundAudioManager的Android与iOS不同之处

src：背景音频的路径

iOS：路径不可带中文，空格，条件相对严格；除了给src赋值，必须要给title也赋值才能开始播放音频

Android：路径中带上中文与空格也能解析，相对宽松的条件；给src赋值后即开始播放音频

title：音频标题

iOS：如果不给背景音频赋值title，音频将无法播放

Android：即使没有title值，也可以正常播放音频

未完待续

转载于:https://juejin.im/post/5bd7282df265da0ae6778ba5