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

[MrZWH]

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>