小程序总结中.......

小程序概要

简介

• 小程序是一种不需要下载、安装即可使用的应用，它实现了触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。

小程序与普通网页区别

• 运行环境不同： 网页运行在浏览器环境中, 小程序运行在微信环境中
• 提供的API不同： 由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API， 但在小程序中可以调用微信环境提供的各种组件、API，例如：微信支付、微信扫码等
• 开发模式不同： 网页的开发模式：浏览器 + 编辑器 小程序拥有自己的一套标准开发模式：账号申请 + 开发工具 + 创建配置项目 + ……

目录结构

• pages 用来存放所有小程序的页面
• utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
• app.js 小程序项目的入口文件
• app.json 小程序项目的全局配置文件
• app.wxss 小程序项目的全局样式文件
• project.config.json 项目的配置文件
• sitemap.json 用来配置小程序以及页面是否允许被微信搜索到 sitemap配置项

页面组成部分

• .js页面脚本文件，存放页面的数据，事件处理函数、生命周期等
• .json文件，当前页面配置文件，比全局配置文件优先级高，配置页面的外观、表现等
• .wxml文件，结构文件
• .wxss文件，当前页面的样式表文件

JS文件三大类

• app.js，小程序项目的人口文件，通过调用 App() 函数 来启动整个小程序
• 页面的.js文件，页面入口文件，通过调用 Page() 函数来创建小程序页面，并运行小程序页面
• 普通.js文件，用来封装公共的函数或属性供页面使用

小程序的宿主环境是手机微信

组件（九大类）

• 视图容器、基础内容、表单组件、 导航组件、 媒体组件、map 地图组件、canvas 画布组件、开发能力、无障碍访问

视图容器

view组件

• 类似于div,用来进行页面布局

scroll-view组件

• 可供动视图区域
• 常用来实现滚动列表
• scroll-x、scroll-y控制不同方向的可滚动

swiper和swiper-item组件

• 轮播图容器组件

• 常用属性

  • swiper 组件的常用属性文档
  • indicator-dots：显示点儿
  • indicator-color：设置点儿颜色
  • indicator-active-color：设置活动点儿颜色
  • autoplay：设置自动播放
  • interval：设置跳转时间
  • circular：设置无缝衔接

其他

text

• 文本组件，类似span

rich-text

• 富文本组件，可识别html

button

• 功能更加丰富，可调用微信提供的各种功能

image

• 图片组件

navigator

• 导航组件

wxss

• WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式

• WXSS 具有 CSS 大部分特性，为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改

• 与 CSS 相比，WXSS 扩展的特性有

  • rpx 尺寸单位
  • @import 样式导入

rpx

• 是微信小程序独有，解决屏幕适配的尺寸单位

• 原理

  • 鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设置的屏幕，在宽度上 等分为 750 份，即 当前屏幕的总宽度为750 rpx
  • 在较小的设备上，1rpx 所代表的宽度较小
  • 在较大的设备上，1rpx 所代表的宽度较大
  • 小程序在不同的设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而显示屏幕适配

全局配置

• 全局配置在app.json中配置，主要配置三个东西

  • pages: 数组，有几个页面这个数组就有几项

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

  • tabBar对象：配置小程序的tab栏效果

    • tabBar里有list维护导航页面的地址及不同状态的图标等

数据请求

小程序中网络数据请求的限制

• 处于安全考虑，小程序官方对数据接口请求有两个限制

  • 只能请求HTTPS类型接口
  • 必须将接口的域名添加到信任列表中

配置 request 合法域名

• 在小程序管理后台的开发设置中的服务器域名中修改request合法域名

发送请求（GET / POST）

• 和ajax类似

页面初始化加载数据

• 定义方法发页面初始化需要的数据的请求，在onLoad（相当于vue的created()）中去调用方法，之后就可以将拿到的数据进行渲染了

跳过request合法域名校验

• 如果后端程序员仅仅提供了http协议的接口，暂时没有提供http协议的接口，我们可以临时开启[开发环境不校验请求域名、TLS 版本及 HTTPS 证书」 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。
• 服务器域名配置成功后，应该将之前的选项关闭，然后进行测试以确认服务器域名配置正确

关于跨域

• 跨域在小程序中不存在，它宿主环境不是浏览器

生命周期

• vue中有生命周期，小程序中也有，生命周期就是一个对象从创建运行到销毁的过程

• 小程序的生命周期

  • 小程序启动，表示生命周期开始，小程序关闭，表示生命周期结束

  • 中间小程序运行的过程就是小程序的生命周期

  • 分类

    • 应用小程序

      • 小程序启动 - - - > 运 行 - - -> 销毁过程

    • 页面生命周期

      • 每个页面加载 - - - > 渲染 - - - > 销毁的过程

• 生命周期函数

  • 应用生命周期函数（全局）

    • onLaunch() // 小程序初始化完成触发
    • onShow() // 小程序启动或者从后台进入前台显示触发
    • onHide() // 小程序从前台转后台会触发
    • onError // 小程序发生脚本错误或api调用失败触发

  • 页面生命周期

    • onLoad(options) {} // 监听页面加载，和created()类似
    • onReady() // 监听初次渲染
    • onShow() // 监听页面显示
    • onHide() // 监听页面隐藏
    • onUnload() // 监听页面卸载
    • onPullDownRefresh() // 监听用户下拉动作
    • onReachBottom() // 页面上拉触底事件的处理函数
    • onShareAppMessage() // 点击右上角分享触发

操作

新建页面

• 全局的app.json中的pages之间编写路径，保存后就可以新建

修改项目首页

• pages中的第一个页面路径就是首页
• 也可以在app.json中通过entryPagePath进行首页的配置

数据绑定

• .js文件中可以直接通过data定义数据
• 用的时候通过{{}}绑定使用
• 图片绑定时在src中用{{}}绑定
• {{ }} 还可以处理三元运算以及算术运算

事件绑定

• 小程序中绑定事件通过bind操作

• bindtap：手指触摸事件，类似点击事件

• bindinput：文本框输入事件

• bindchange：状态改变触发

• 事件绑定时传入方法，方法第一个参数是事件对象

  • 事件对象有几个属性

    属性	类型	说明
    type	String	事件类型
    timeStamp	Integer	事件生成时的时间戳
    target	Object	触发事件的组件的一些属性值集合
    currentTarget	Object	当前组件的一些属性值集合
    detail	Object	额外的信息
    touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
    changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

  • target和currentTarget

    • target是事件触发源数据对象
    • currentTarget是事件所绑定组件
    • 比如view里面嵌套button，view上绑定点击事件，通过button触发会发生冒泡，此时target的事件对象是button，currentTarget是view事件对象

• 数据赋值，事件绑定方法中通过this.setData({属性名：逻辑语句})

• 事件传参

  • 通过自定义属性传参，例如data-xxx="{{ 值 }}"
  • 传递的参数可以在target或者currentTarget中的dataset中获取

• bindinput

  • 是给文本框绑定输入事件

  • 可以通过事件对象e.detail.value获取输入的值

  • 文本框和data之间数据同步

    • data中定义变量通过输入框value进行绑定
    • 通过bindinput绑定输入事件，事件中通过setData对msg进行修改

列表渲染

• wx:for

  • 根据指定数组循环，循环渲染重复的组件结构，和v-for及其类似

  •  <view wx:for="{{ arr }}">
       索引是: {{ index }}，数组的每一项是：{{ item }}
     </view>
    

  • 可以通过wx:for-item和wx:index自定义索引和遍历项的名字

  •  <view wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="itemName">
       索引是: {{ idx }}，数组的每一项是：{{ itemName }}
     </view>
    

• wx:key

  • 和vue中的：key及其类似，指定唯一key值，从而提高渲染效率

条件渲染

• if...elif...else 和vue的v-if、v-else-if、v-else及其类似
• 搭配block标签使用if条件判断，类似vue的template，不会在页面渲染，只接受控制属性
• hidden ---- 和vue的v-show及其相似

页面导航

• 页面间的相互跳转

两种方式

• 声明式导航

  • 页面声明<navigator> 导航组件，通过点击这个组件实现页面跳转

  •  <navigator url="/pages/message/message" open-type="switchTab">跳转到tabbar页面</navigator>
     ​
     <navigator url="/pages/info/info?name=zs&age=18" open-type="navigate">跳转到非tabbar页面</navigator>
    

  • 注意url中必须先/

  • 要传参数时通过查询字符串的形式传递

  • 两种情况

    • 当跳转页面是导航页面时open-type用switchTab
    • 当跳转页面是普通页面时open-type用navigate

  • 跳转之后要回退用

  •  <navigator open-type="navigateBack" delta="1">返回上一页</navigator>
    

  • delta表示回退层级

• 编程式导航

  • 绑定事件，触发事件时通过wx.switchTab(Object object)，传入路径跳转
  • 传参时在对象的url的后面也是跟上查询字符串
  • 回退，通过wx.navigateBack()进行回退上一页

• 传递的参数可以通过onLoad的第一个参数拿到

下拉刷新

• 设置enablePullDownRefresh为true
• 可以在全局开启也可以在局部开启，全局开启后所有页面都会有下拉刷新，这不好，推荐局部开启
• 可以通过backgroundColor配置下拉窗口颜色以及通过backgroundTextStyle配置loading样式
• 下拉刷新对应一个onPullDownRefresh()函数，当下拉时会触发该函数进行一些逻辑编写
• 下拉刷新需要手动停止，当逻辑处理完后通过wx.stopPullDownRefresh()停止上拉刷新

上拉触底

• 上拉触底时会触发一个onReachBottom事件，上拉触底距离可以自定义
• 在开发中上拉触底多用于加载更多内容，上拉触底时通过触底函数去获取更多数据渲染
• 上拉触底可以进行节流操作，防止向后台发请求期间反复触底去获取数据，当发亲求拿数据时关闭阀门，拿到后再开启

要点

wxss和css

• wxss是一套样式语言，描述wxml的组件样式，和css类似

• 它具有css大部分特性，为了更适合开发微信小程序，wxss对css进行了扩充以及修改

• 区别

  • wxss通过rpx尺寸单位，能随不同大小的屏幕自动换算
  • css需要手动进行像素单位转换
  • 小程序的wxss分局部和全局的，全局的在所有小程序页面都生效，局部的只在自己所属页面生效，而且两者生效局部优先
  • wxss仅支持部分css选择器，比如.class和#id、element、并集选择器和后代选择器、还有::after和::before等伪类选择器

原生小程序组件使用过哪些

• view盒子、text文本、richtext富文本、scroll-view滚动区域、swiper轮播图、button按钮

原生小程序如何绑定事件？

• 通过bind或者bind:绑定，例如bind:tap / bindtap

原生小程序如何修改数据并同步视图

• 事件触发后通过this.setData()的方式实现更新数据及视图
• 不能直接通过this.data.xxx的方式进行修改，这样改视图不会变

事件传参

• 小程序的事件传参和vue不同，vue中事件再绑定的函数中传递参数，而小程序中需要借助自定义属性进行传参
• 传递的参数在事件对象e.target.dataset或者e.currentTarget.dataset中获取

小程序中发起网络请求

• 小程序中有一个wx.request方法，传入一个对象，对象包括url、method、data、success、fail、等这些参数（和ajax类似）
• 在开发中这样写很荣誉，我们可以对这个方法进行二次封装，让其url、method、data能够按需传入，并且让这个方法返回一个promise，成功就直接将success函数的参数resolve出来，失败就通过fail函数reject出来

导航跳转方式

• 和vue类似，有声明式导航和编程时导航

• 声明式导航

  • 用到navigator标签，配和open-type属性使用
  • 回退时还需要navigator和delta配合实现
  • 需要传递参数直接在url后面以查询字符串的方式跟上就行

• 编程式导航

  • 通过事件绑定函数进行跳转，在函数中调用wx.navigatorTo()方法或者wx.switchTab()实现跳转普通页面或者导航页面
  • 传递参数就在方法中传递对象中的url属性值后面更上查询字符串就行

• 两种导航传递的参数都会通过onLoad的形参接收到

监听上拉触底

• 上拉触底后会触发onReachBottom方法

小程序生命周期

• 应用生命周期

  • onLaunch() // 小程序初始化完成触发
  • onShow() // 小程序启动或者从后台进入前台显示触发
  • onHide() // 小程序从前台转后台会触发
  • onError // 小程序发生脚本错误或api调用失败触发

• 页面生命周期

  • onLoad 页面开始加载 和created()类似，发送请求获取数据,获取到导航参数
  • onShow 监听页面显示
  • onReady 监听初次渲染
  • onHide 监听页面隐藏
  • onUnload 监听页面的卸载

定义组件

• 在小程序中也是有组件的，组件会维护在components文件下

• 组件文件有的文件也是那四个wxss,wxml,.json,.js四个，需要在配置文件中表明component属性，设置为true代表是一个组件

• 咱们页面的js文件代码时page({})包裹，而组件的话是通过Component({})包裹，指定数据方法等，方法写在methods里面

• 组件有了，但使用前也得注册

  • 通过全局的app.json文件注册的就是全局组件
  • 通过页面的json注册的组件就是局部组件

组件通信

• 组件的核心就是组件之间的通信，小程序的组件也有父传子组传父的通信

• 父传子

  • 父组件在子组件标签上绑定传递的属性
  • 子组件通过properties接受父组件传递的属性

• 子向父

  • 子向父传值会去触发this.triggerEvent（‘事件名’， 传递数据）
  • 父组件在组组件标签上通过bind绑定自定义的事件名，通过e.detail获取到子组件传递的数据

• 类似$refs获取子组件的方式

  • 父组件通过this.selectComponent('组件对应选择器')