小程序知识整理

页面

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
参数

页面跳转

wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？
wx.navigateTo() : 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo() : 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab() : 跳转到 TabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack() : 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch() : 关闭所有页面，打开到应用的某个页面。

小程序生命周期

项目的生命周期

属	类型	必填	说明	最低版本
onLaunch	function	否	生命周期回调——监听小程序初始化。
onShow	function	否	生命周期回调——监听小程序启动或切前台。
onHide	function	否	生命周期回调——监听小程序切后台。
onError	function	否	错误监听函数。
onPageNotFound	function	否	页面不存在监听函数。	1.9.90
onUnhandledRejection	function	否	未处理的 Promise 拒绝事件监听函数。	2.10.0
onThemeChange	function	否	监听系统主题变化	2.11.0
其他	any	否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

获取小程序实例。getApp()

页面生命周期

onLoad
onShow
onReady
onHide
onUnload

组件生命周期

created:在组件实例刚刚被创建时执行
attached:在组件实例进入页面节点树时执行
ready:在组件在视图层布局完成后执行
moved:在组件实例被移动到节点树另一个位置时执行
detached:在组件实例被从页面节点树移除时执行
error:每当组件方法抛出错误时执行

小程序传参：

globalData
路由传参。
storage
使用通信通道 getOpenerEventChannel()
使用页面栈 getCurrentPages()

同步视图

setData()

项目配置

app.json 全局配置

{
  "pages": [
    "pages/index/index",
  ],
  "window": {
    "backgroundTextStyle": "light",
  },
  // 设置 2-5个之间可以显示。 小于2 或者 大于5都不行。
  "tabBar": {
    "backgroundColor": "#fff",
    "selectedColor": "#07c160",
    "color": "#222222",
    "list": [
      ...
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "plugins": {
    "citySelector": {
      "version": "1.0.2",
      "provider": "wx63ffb7b7894e99ae"
    }
  },
  "permission": {
    "scope.userFuzzyLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

sitemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

页面配置

page.json

可设置各项数据。一般组件，背景颜色，页面标题等。页面配置

{
  "usingComponents": {},
  "enablePullDownRefresh": false,
  "disableScroll":true,
  "navigationBarTitleText": "DIY水印",
  "backgroundColor": "#f7f7f7"
}

设置背景色

page.json 中的背景色是设置下拉的背景颜色。
页面中的背景色需要在样式中定义。
1
2
3
page{
background-color: #f7f7f7;
}

禁止页面滚动

pagejson 设置： "disableScroll":true,
page 设置一个包裹的容器，且设置高度等于屏幕高度,overflow:hidden

页面