小程序的学习之路

小程序 の 学习之路

本篇帖子是我自己学习微信小程序过程中总结的一些知识点。

页面构成

.wxml

• 对标html文件，页面结构（标签）都写在这个文件里

.wxss

• 对标css文件，页面样式都写在这个文件里

.js

• js脚本都写在这个文件里

.json

• 页面配置文件，如配置该页面的窗口表现、导航条信息、是否开启下拉刷新等

常见标签

view

• 类似于html中的div标签，在小程序中不使用div标签

text

• 类似于html中span标签，也是行级标签

image

• 对标img标签

navigator

• 对标a标签，跳转用url属性

常见组件

button

• 按钮组件

input

• 输入框组件

  • 1、label与输入框对齐，只能通过设置样式实现，无直接的属性；
  • 2、通过value绑定数据，使用bindinput监听获取视图变化，在回调函数中通过event.detail.xxx的方式获取到输入值（值为字符串）；
  • 3、可通过设置foucs=true，获取焦点，实现进入该页面就调出键盘；
  • 4、可通过设置confirm-type:send/search/next/go/done属性，控制键盘右下角按钮文字为：发送/搜索/下一个/前往/完成；

事件处理

事件绑定

• 采用bind:tap='事件名'或者bindtap='事件名'方式

修改data方式

• 1、需调用this.setData()方法进行修改，且需采用键值对方式；
• 2、访问data中的数据，需完整写出this.data.xxx；

事件传参

• 1、通过属性绑定data-xxx的方式，将需要传递的参数绑定到DOM中；
• 2、在对应的事件回调函数中，通过event.target.dataset进行获取；

双向数据绑定

• 概念

  • 1、当视图发生改变时，数据也随之发生改变；
  • 2、当数据发生改变时，视图也随之发生改变；

• 实现

  • 1、在input组件中，通过value为input绑定数据；
  • 2、通过监听bindinput获取视图变化，在回调中修改数据；
  • 3、获取value的方式：event.detail.xxx；

条件渲染

• wx:if/wx:elif/wx:else

  • 1、用于控制组件【是否被渲染】；
  • 2、if切换消耗性能更大，建议在条件不频繁切换的场景下使用；

• hidden

  • 1、用于控制组件【是否被隐藏】；
  • 2、hidden初始化加载消耗性能更大，建议在条件切换频繁的场景下使用；

配置管理

page

• 设置文件路径，可直接在page数组中写入文件路径，自动生成文件夹与文件或者在page文件中新增文件，该路径将自动写入page数组中。

window

• 用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar

• 通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

数据请求

API

• wx:request({ url: 'xxx', method: 'GET/POST/XXX', data: '', success: (res) => {} })

限制

• 1、生产环境：仅支持HTTPS请求，将接口域名添加到信任列表中；
• 2、开发环境：可勾选“不校验合法域名、web-view(业务域名))、TLS版本以及 HTTPS 证书” 配置，从而使用HTTP请求接口；

与web请求区别

• 1、小程序中不存在跨域问题；
• 2、小程序中不存在ajax请求，只有网络请求，ajax请求依赖的是浏览器中XMLHttpRequest()对象，而小程序的宿主环境是微信客户端；

异步操作

• 1、使用Promise封装request请求；
• 2、使用async/await简化Promise操作；

生命周期

Page生命周期

• onLoad

  • 监听页面加载

• onReady

  • 监听页面显示---请求服务端获取数据

• onShow

  • 监听页面初次渲染完成

• onHide

  • 监听页面隐藏

• onUnload

  • 监听页面卸载

• onPullDownRefresh

  • 监听页面下拉刷新

    • 1、需提前在.json文件中配置enablePullDownRefresh: true；
    • 2、数据请求完毕后需关闭下拉刷新：wx.stopPullDownRefresh；

• onReachBottom

  • 监听页面下拉触底

    • 1、懒加载效果注意设置结束请求条件，否则会重复请求空数据；

页面跳转

声明式导航

• 跳转tabbar页面

  • <navigator open-type="switchTab" url="xxx"></navigator>

• 跳转非tabbar页面

  • <navigator open-type="navigate" url="xxx"></navigator>

  • 1、open-type默认值为：navigate;

  • 2、其余值为：redirect/switchTab/reLaunch/navigateBack/exit

• 回退

  • <navigator open-type="navigateBack"></navigator>

  • 1、open-type默认值为：navigate；

  • 2、其余值为：redirect/switchTab/reLaunch/navigateBack/exit

编程式导航

• 跳转tabbar页面

  • wx.switchTab({ url: "xxx" })

• 跳转非tabbar页面

  • wx.navigateTo({ url: "xxx" })

• 回退

  • wx.navigateBack({ delta: 1 })

组件思想

理解

• 将重复使用的功能进行抽离，使之能够重复调用，节省开发效率。

创建

• 1、在根目录创建components文件夹；
• 2、在components文件夹中创建组件文件夹；
• 3、在组件文件夹中右键选择【新建component】；

使用

• 1、在页面.json文件中找到usingComponents;
• 2、在该对象中注册组件，例如： “tabs”: "/compents/tabs/tabs"；
• 3、在页面的wxml文件中，以注册组件的key值为标签名进行使用；
• 4、因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符；

生命周期

• created

  • 组件实例刚刚创建完成，此时无法调用setData。

• attached

  • 组件完全初始化完毕、进入页面节点树后触发，绝大多数初始化工作可以在这个时机进行。

• detached

  • 组件离开页面节点树后触发。

组件方法

• 组件方法必须定义在methods中。

组件通讯

• 父传子

  • 子组件在properties进行接收，父组件通过自定义属性key=value的方式进行传参。

• 子传父

  • 1.子组件通过this.triggerEvent方法发送通知父组件，第一个参数为通知名，第二个参数为传递参数；
  • 2.父组件通过bind:[通知名]=“触发方法”监听子组件发送的通知，方法触发后可通过e.detail获取传递过来的参数；

• 兄弟组件

  • 需要通过组件中共有的父组件进行参数传递，即：子传父→父传子

插槽

• 应用场景

  • 由父组件来指定子组件中某一部分展示的内容和样式

• 多个插槽

  • 1.在js文件中设置options: { multipleSlots: true }；
  • 2.定义name；

其它知识点

数据监听器

• observers

  • 监听数据变化后，执行下一步操作。

• 1rpx = 页面宽度的1/750，设置宽度为页面的一半，可使用375rpx来表示。

• 小程序宿主环境：手机微信

• 小程序中无 换行标签，如需给text换行，直接在编辑器中保留换行即可。