学习小程序后的一些简单的总结

学习小程序后的一些简单的总结

因为疫情影响，不得已且为了充实自己，就在家里学习了小程序，在“逆战”中提升自己。

主要常见的小程序分为以下几种（附官方开发文档链接）：

• 微信小程序
• 支付宝小程序
• qq小程序
• 头条小程序
• 百度小程序

各自之间的大致区别

从各自的开发文档来看，目录结构都是大致相同的，而其中我们必须要掌握的是：小程序的配置、框架接口以及个自使用的语法
在这里大致给总结了一下：

	关键词	结构	表现	行为	扩展行为
微信小程序	wx	wxml	wxss	js	wxs
支付宝小程序	my	axml	acss	js	sjs
头条小程序	tt	ttml	ttss	js
百度小程序	swan	swan	css	js
qq小程序	qq	qml	qss	js

以微信小程序为例，简述一些重点

小程序配置

• 全局配置
  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象

  属性	类型	默认值	描述	最低版本
  navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
  navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
  navigationBarTitleText	string		导航栏标题文字内容
  navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮	微信客户端 7.0.0
  backgroundColor	HexColor	#ffffff	窗口的背景色
  backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
  backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
  backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
  enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
  onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
  pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
  disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置
  usingComponents	Object	否	页面自定义组件配置	1.6.3

• 页面配置
  每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性

  属性	类型	默认值	描述	最低版本
  navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
  navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
  navigationBarTitleText	string		导航栏标题文字内容
  navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮	微信客户端 7.0.0
  backgroundColor	HexColor	#ffffff	窗口的背景色
  backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
  backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
  backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
  enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
  onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
  pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
  disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置
  usingComponents	Object	否	页面自定义组件配置	1.6.3

生命周期

a) 全局生命周期

• onLaunch：小程序初始化完成时，全局只触发一次
• onShow：小程序启动，或者后台进入前台时
• onHide：小程序隐藏，小程序从前台进入后台时
• onError：错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息。
• onPageNoFound：小程序要打开的页面不存在时触发，会带上页面信息回调该函数

b) 页面生命周期

• onLoad：监听页面加载
• onReady：监听页面初次渲染完成
• onShow：监听页面显示
• onHide：监听页面隐藏
• onUnload：监听页面卸载
• onPullDownRefresh：监听用户下拉动作
• onReachBottom：页面上拉触底事件的处理函数
• onShareAppMessage：用户点击右上角转发
• onPageScroll：页面滚动触发事件的处理函数
• onResize：页面尺寸改变时触发
• onTabItemTap：当前是 tab 页时，点击 tab 时触发
• viewTap：任意的函数，在页面的函数中用 this 可以访问
• customData：任意数据，在页面的函数中用 this 可以访问