Jiez19971225‘s Blog

做自己爱做的事

0%

微信小程序官方文档学习

发表于 分类于   |   字数统计: 1.5k(字)   |   阅读时长: 5(分)

app.json

window

backgroundColor 不是背景的颜色 而是下拉页面的背景色

生命周期

组件间的生命周期会有些区别

  • onLoad 页面加载，一个页面只会调用一次，可以获得 query 参数
  • onShow 页面显示 、页面切入前台都会调用
  • onHide 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
  • onReady 页面初次渲染完成，表示可以与视图层进行交互,像动态改变页面标题的就可以在这处理， wx.setNavigationBarTitle
  • onUnload 页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。

小程序从启动到关闭，生命周期函数的执行情况
1、初次打开： 会执行小程序的生命周期钩子函数：onLaunch -> onShow -> onReady
2、使用 navigateTo 离开当前页面： 保留所离开的页面，执行 onHide
3、使用 navigateBack 离开当前页面： 销毁当前页面，执行 onHide -> onUnload
4、使用 switchTabTo 离开当前页面： 销毁所有非 tab 页面，但保留所有已经加载的 tab 页面

components 中的生命周期函数
1、 组件实例化： created 节点树还未导入, 无法使用 setData
2、节点树导入完成： attached 可以使用 setData 来初始化数据，但无法操作节点
3、组件布局完成: ready 组件布局完成，可以获取到节点信息也可以操作节点
4、组件实例被移动到节点树另一个位置： moved
5、组件实例从页面节点移除： detached

事件类型

有冒泡和非冒泡两种

WXML 的冒泡事件列表：
类型 触发条件 最低版本
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过 350ms 再离开，如果指定了事件回调函数并触发了这个事件，tap 事件将不被触发 1.5.0
longtap 手指触摸后，超过 350ms 再离开（推荐使用 longpress 事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发 1.9.90

bind 和 catch 的区别

bind 系列事件绑定不会阻止冒泡事件向上冒泡，但是 catch 系列事件绑定可以阻止冒泡事件向上冒泡。

template

template 可以类比于传统后端模板引擎引用代码片段
在一个 wxml 文件中可以定义多个 template，用 name 进行区分

如何使用

import
1
2
<import src="/templates/item.wxml" />
<template is="item2" data="{{text:'foobar'}}"></template>

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在 C 中可以使用 B 定义的 template，在 B 中可以使用 A 定义的 template，但是 C 不能使用 A 定义的 template。

inlcude

include 可以将目标文件除了 template wxs 外的整个代码引入，相当于是拷贝到 include 位置，如：

响应式数据访问

在 page 或者 component 中的生命周期或者 methods 中

1
2
3
4
5
Page({
    data:{
        a:'xxx
    }
})

访问

需要使用 this.data.a 进行访问，相比与 vue，需要多一层 data 属性，vue 内部对 data 属性的访问是做了代理的，而小程序则没有这层代理

设置

这种方式很 react

1
2
3
this.setData({
    a:'xxxx';
})

坑点

required 不支持绝对路径
设置 tabbar 坑！ 首页必须包含在其中，否则不能显示
npm 安装 weui-wxss 构建 npm 提示 没有找到可以构建的 npm 模块 是因为 weui-wxss 没有导出模块的设置
数据库 获取不到数据 这个是数据库访问权限设置的问题

原生 API

路由

wx.switchTab 只能跳转到带有 tabbar 的页面 关闭其他所有非 tabBar 页面，跳转路径不能带参数
wx.reLaunch 关闭所有页面，打开到应用内的某个页面 路由可以带有参数
wx.redirectTo 关闭当前页面，跳转到不带 tabbar 的页面，路由可以带有参数

以上方法可接受一个 Object 作为参数 参数格式如下

属性 类型 默认值 必填 说明
url string 无 是
success function 无 否 接口调用成功的回调函数
fail function 无 否 接口调用失败的回调函数
complete function 无 否 接口调用结束的回调函数（调用成功、失败都会执行）

wx.navigateBack 关闭当前页面，返回上一页面或者多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
它不接受 url 参数，可以接受一个 delta 作为参数，决定要返回几层

属性 类型 默认值 必填 说明
delta number 1 否 返回的页面数，如果 delta 大于现有页面数，则返回到首页。

wx.navigateTo 保留当前页面，跳转到应用某个页面，但是不能跳转到 tabbar 页面。相比于以上方法，他多了一个可选参数。

属性 类型 默认值 必填 说明
events Object 无 否 页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。

界面

wx.startPullDownRefresh 可以手动条用 onPllDownRefresh 声明周期的方法
wx.pageScrollTo 将页面滚动到目标位置，支持选择器和滚动距离两种方式定位

填坑中