微信小程序学习

生命周期函数

  • onLoad,页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
  • onShow,页面显示/切入前台时触发。
  • onReady,页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
  • onHide,页面隐藏/切入后台时触发。如离开当前小程序或者电话来临等。
  • onUnload,页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。

页面事件处理函数

  • onPullDownRefresh(),监听用户下拉刷新事件,需要在 app.json 的 windows 选项中或页面配置中开启 enablePullDownRefresh 。当处理完数据刷新后,wx.stopPullDownRefresh 可以停止当前页面的下拉刷新。
  • onReachBottom(),监听用户上拉触底事件,可以在 app.json 的 windows 选项中或页面配置中设置触发距离 onReachBottomDistance 。在触发距离内滑动期间,此事件只触发一次。
  • onPageScroll(),监听用户滑动页面。参数 scrollTop ,页面在垂直方向已滑动的距离(rpx)。
  • onShareAppMessage(),监听用户页面内转发行为,并自定义转发内容。
  • onTabItemTap(),点击 tab 时触发

组件事件处理函数

  • bindtap()

路由

  在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:

  • 初始化,新页面入栈
  • 打开新页面,新页面入栈

模块化

  模块只有通过 module.exports 或者 exports 才能对外暴露接口。推荐开发者采用 module.exports 来暴露模块接口。

  在需要使用这些模块的文件中,使用 require(path) 将公共代码引入。

  module.exports 和 exports 的区别:

  • module.exports 初始值为一个空对象 {}
  • exports 是指向的 module.exports 的引用
  • require() 返回的是 module.exports 而不是 exports

WXML

  数据绑定,WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用 Mustache 语法(双大括号)将变量包起来。

  列表渲染,在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

  • 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item 。
  • 使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

  条件渲染,在框架中,使用 wx:if = "{{condition}}" 来判断是否需要渲染该代码块。

  如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在 <block/> 上使用 wx:if 控制属性。

  wx:if 和 hidden 的区别:wx:if 是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

  模板,WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

  • 定义模板,使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段
  • 使用模板,使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入
  • 在使用模板前,可能需要先引用文件
  • 模板拥有自己的作用域,只能使用 data 传入的数据以及模版定义文件中定义 <wxs/> 模块。
<template name="til">
  <view>
    <text>{{obj.test}}</text>
  </view>
</template>

<template is="til" data="{{obj}}"/>

  引用,WXML 提供两种文件引用方式 import 和 include 。

  import 可以在该文件中使用目标文件定义的 template 。

  import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template (即多层引用是无效的)。

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

  事件,事件分为冒泡事件和非冒泡事件:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

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

  事件捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。在捕获阶段监听事件时,可以采用 capture-bind、capture-catch 关键字,而 capture-catch 将中断捕获阶段和取消冒泡阶段

WXS

  WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API 。

  WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。

  模块,每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

  .wxs 文件,在 .wxs 模块中引用其他 wxs 文件模块,可以使用 require 函数。

  <wxs> 标签,有两个属性,src 和 module 。module 属性是当前 <wxs> 标签的模块名,在单个 wxml 文件内,建议其值唯一。src 属性是引用其他的 wxs 文件模块的路径。

  <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时,<wxs> 模块不会被引入到对应的 WXML 文件中。<template> 标签中,只能使用定义该 <template> 的 WXML 文件中定义的 <wxs>模块。

WXSS

  WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

  使用 @import 语句可以导入外联样式表, @import 后跟需要导入的外联样式表的相对路径,用;表示语句结束。

组件

  view

  scroll-view

  swiper

  movable-view

  cover-view

  icon,属性有 type,size,color

  text

  progress,进度条,属性有 percent,等

  button,有个 formtype 属性,可以设置 submit 提交;可以设置 reset,重置 form 表单数据。

  checkbox,多选项目,有个父级元素,checkbox-group,它的 e.detail.value 显示选中的元素(数组形式)

  form ,

  input,微信工具无法输入

  picker,有 mode 属性,分别是 seletor 单列、multiSeletor 多列、time 时间、date 日期、region 地区

  picker-view,其中只可放置 <picker-view-column> 组件,其他节点不会显示。

  radio

  slider

  switch,有 type 属性可以设置 checkbox 样式,bindchange 事件的 e.detail.value 显示是否选中

  textarea

  navigator,页面链接,url 设置路径,

  audio,src 设置路径

  image,src 设置路径,mode 设置图片裁剪、缩放方式,aspectFit 保持纵横比,完全显示,lazy-load,图片懒加载。只针对 page 与 scroll-view 下的 image 有效

  video,

  camera,相机,需要用户授权 scope.camera 

  live-player  live-pusher

  map,

  canvas

  open-data,开放功能,可以展示用户名称、头像、性别、所在城市等

  web-view,web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。

  ad,广告,目前暂时以邀请制开放申请

数据请求

  wx.request,发送网络请求 

小程序中使用 iconfont

  1. 在 iconfont.cn 中下载图标库, 直接将其中的 iconfont.css 复制到小程序目录中,并将扩展名改为 wxss;
  2. 在使用时在对应的样式文件 wxss 中加入一行引用,@import "/path/to/iconfont" ;
  3. 可以在 wxml 中使用了,<text class="iconfont icon-xxx"></text>;
  4. 更新小程序图标,将下载的 iconfont.css 的内容复制到小程序目录中的 iconfont.wxss 中,就OK了
原文地址:https://www.cnblogs.com/sspeng/p/9415418.html