纯正商业级应用-微信小程序开发实战

flex-direction 常用的属性：row column row-reverse column-reverse display: inline-flex

监听事件

bind 事件绑定不会阻止冒泡事件向上冒泡 catch 事件绑定可以阻止冒泡事件向上冒泡

组件的封装性与开放性:

决定哪些封装在内部，开放出来的
粒度

在小程序的 onLoad--监听页面加载生命周期处请求数据

判断服务器返回的状态码是否以 2 开头: code = code.toString() code.startsWith('2')

使用 import 的时候不要使用绝对路径

舰艇自定义事件： bind:like

小程序中激活自定义事件： this.triggerEvent('like', {}, {})

在给小程序设定 data 的数据时不能用类似 Number 定义初始值，设定 properties 数据的初始值时可以。

// wxs

移动端需要注意可触碰区域的大小是否合适

behavior 是多个组件的行为

Behavior({

    })

在小程序的自定义组件中，设置 hidden 属性不生效，需要当成 props 去传递给自生原组件做处理。

wxss 的复用：先创建 common.wxss 文件，然后在不同组件的 wxss 文件中引入它。 @import "../common.wxss";

在小程序中播放音乐：

音乐播放控制 API（老版）
背景音频播放管理（新版）
- wx.getBackgroundAudioManager()

小程序动画 API

小程序跳转页面：wx.navigateTo()

页面接收参数：在 onLoad 生命周期函数中接收，参数在周期函数的参数里

slot 插槽

不违反组件封装原则的修改默认样式的机制

组建允许的你才能修改

组建属性
slot 外部样式：externalClass index === 0 ? '':'' || index === 1 ? '':''

wxs

wxs 语法借鉴了 JavaScript 并不完全相同

// filter.wxs
const format = function(text) {

}

module.exports = {
    format: format
}

// book-detail.wxml
<wxs src="../../util/filter.wxs" module="util"/>

删除数组末尾的元素用 array.pop()

监听用户是否滚动页面到最底部：

使用小程序的 scroll-view 组件
使用 Page 的 onReachBottom 滚动请求数据过快时容易发送两次相同请求

获取用户信息

不需要用户授权就能显示用户头像与名称的方法（有缺陷,只能用于显示用户信息，不能够在js 代码中获取用户信息去提交给服务器）：

使用小程序 open-data 组件，<open-data type="userAvatarUrl"/>

通过用户授权：

早期通过调用 wx.getUserInfo() 弹出一个弹窗询问用户是否授权
新版中，不能够调用 api 的形式弹出弹窗，现在需要使用 <button open-type="getUserInfo" bindgetuserinfo="自定义函数名"></button> 组件。wx.geUserInfo() 还是有用的。
```
wx.geUserInfo({
success: data=> {
    console.log(data)
}
})
```

检查用户是否授权过：

wx.getSetting({
    success: data => {
        if(data.authSetting['scope.userInfo']) {
            wx.geUserInfo({
    success: data=> {
        console.log(datas)
    }
    })
        }
    }
    })

小程序之间的跳转

前提条件：多个小程序必须都关联一个公众号(服务号或者订阅号)

<navigator target="miniProgram" app-id="" open-type="navigate"></navigator>

MrZWH / MrZWHblog