小程序基础

基本组成结构

pages 文件夹 用来存放所有小程序的页面

utils 文件夹 用来存放工具性质的模块（例如：格式化时间的自定义模块）

app.js 小程序项目的入口文件

app.json 小程序项目的全局配置文件

app.wxss 小程序项目的全局样式文件

project.config.json 项目的配置文件

sitemap.json 用来配置小程序及其页面是否允许被微信索引

app.js

是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

app.json

pages：用来记录当前小程序所有页面的路径

window：全局定义小程序所有页面的背景色、文字颜色等

style：全局定义小程序组件所使用的样式版本，删除该行可改变样式

sitemapLocation：用来指明 sitemap.json 的位置

小程序会自动将排在 pages 第一位的页面当做首页进行渲染

如果在 app.json->pages 内新增应新页面的存放路径，则系统会为新页面自动创建文件夹

注意：每个页面也有单独的 json 文件，页面的 json 文件配置优先级高于全局的 app.json

sitemap.json

sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件

project.config.json 的 setting 中配置字段 checkSiteMap 为 false

pages 文件夹

用于存放页面，每个页面都作为一个单独的文件夹存在

其中，每个页面由 4 个基本文件组成，它们分别是：

1、.js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）

2、.json 文件（当前页面的配置文件，配置窗口的外观、表现等）

3、.wxml 文件（页面的模板结构文件）

4、.wxss 文件（当前页面的样式表文件）

WXML

类似于网页开发中的 html，区别在于

1、标签名称不同

HTML （div, span, img, a）

WXML（view, text, image, navigator）

2、属性节点不同

html 中使用 a 标签进行跳转 <a href="">

wxml 中使用 navigator 标签进行跳转 <navigator url="/pages/home/home"></navigator>

3、wxml 提供了类似于 Vue 中的模板语法

数据绑定

列表渲染

条件渲染

WXSS

类似于网页开发中的 css，区别在于

1、新增了 rpx 尺寸单位

CSS 中需要手动进行像素单位换算，例如 rem

WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

2、提供了全局的样式和局部样式

项目根目录中的 app.wxss 会作用于所有小程序页面

但局部页面的 .wxss 样式仅对当前页面生效

3、WXSS 仅支持部分 CSS 选择器，以下为支持的选择器

.class 和 #id

element

并集选择器、后代选择器

::after 和 ::before 等伪类选择器

组件

view

类似 html 中的 div，为一个块级元素

scroll-view

可滚动的视图区，常用语实现滚动列表

自带属性：（使用 scroll-y 时需要给 scroll-view 一个固定高度）

scroll-y 允许纵向滚动

scroll-x 允许横向滚动

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

swiper

轮播图容器，子组件为 swiper-item

自带属性：

属性	类型	值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000	选中的指示点颜色
autoplay	boolean	false	是否自动播放
interval	number	5000（毫秒）	自动播放切换时间间隔
circular	boolean	false	衔接滚动（最后一张和第一张衔接）

<swiper class="container2" indicator-dots>
  <swiper-item>
    <view class="item">1</view>
  </swiper-item>
  <swiper-item>
    <view class="item">2</view>
  </swiper-item>
  <swiper-item>
    <view class="item">3</view>
  </swiper-item>
  <swiper-item>
    <view class="item">4</view>
  </swiper-item>
</swiper>

text

普通的文本组件，类似 span，为行内元素

通过设置 selectable 可以设置长按选中效果

<view>
  <text selectable>51484884</text>
</view>

rich-text

富文本组件，支持把 HTML 字符串渲染为 WXML 结构

<rich-text nodes="<h1>标题</h1>"></rich-text>

button

按钮组件，但比 html 中的 button 按钮功能丰富

通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权等）

type primary 主色调为绿色的按钮 warn 警告按钮

size mini 小尺寸按钮

添加 plain 属性可变为无背景色的镂空按钮

image

图片组件，默认宽为 300px，高为 240px，可以通过 mode 属性控制图片缩放

mode	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来，但图片区域填不满会有留白
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片区域会被填满但原图会被裁剪
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

navigator

导航组件，类似 a 链接 <navigator url="/pages/home/home"></navigator>

API

事件监听类 API

特点：以 on 开头，用来监听某些事件的触发

举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

同步 API

1、以 Sync 结尾的 API 都是同步 API

2、同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容

异步 API

特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果

举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

事件及数据

数据绑定

在 data 中定义数据，在页面对应的 js 文件中将数据定义在 data 内

page({
  data: {
    msg: '这是一条 msg',
    magList: [{ mag: 'hello' }, { msg: 'world' }]
  }
})

在 wxml 中使用数据，以插值表达式展示数据

const msg = '数据'
<view>{{msg}}</view>

动态绑定属性同样使用插值表达式

const imgsrc = 'xxxx'
<image src={{imgsrc}}></image>

同时可以在插值表达式中使用三元表达式和进行一些简单的计算

事件绑定

tap 事件 手指触摸事件，类似 click 事件 常用 bindtap 或 bind:tap

input 事件 文本框输入事件 常用 bindinput 或 bind:input

change 事件 状态改变时触发的事件 常用 bindchange 或 bind:change

事件回调会接收到事件 event 比如 event.target

属性	类型	说明
type	string	返回的事件类型
timestamp	integer	页面打开到触发事件所经过的毫秒数
target	object	触发事件的组件的属性值集合
currentTarget	object	当前组件的属性值集合
detail	object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组，比如有几个手指触摸
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target 和 eventTarget 的区别

<view class="eveTest" bindtap="onHandle">
  <button>123</button>
</view>

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。

此时，对于外层的 view 来说：

e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件

e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

事件传参

小程序不能在绑定事件同时传参，需要通过 data-*自定义属性传参

<button bindtap="btnclick" data-info="{{2}}"></button>

info 是参数名，2 是参数值

在 event.target.dataset.info 可获取到参数值

可通过 bindinput 搭配 e.detail.value 获取输入框的最新值

通过 this.setData 可重新设置输入框内的数据值

this.setData({
  msg: e.detail.value
})

条件渲染

wx:if={{语句}}

如果语句返回的 Boolean 是 true 则渲染，反之则不渲染，可搭配wx:elif和wx:else 进行判断渲染

如果需要一次性控制多个组件的显示与隐藏，只需要在外层包裹一个<block>它并非一个真实的组件，只是一个容器

hidden={{语句}}

hidden 也可以控制组件的显示或隐藏，为 true 则隐藏，否则显示

wx:if 类似 v-if 会动态的移除和创建元素，适用于控制条件复杂时

hidden 类似 v-show 只切换元素的 display 控制显示和隐藏，适用于频繁切换

列表渲染

wx:for={{array}}
// 可将数组的每一项渲染出来

<view wx:for="{{array}}">
  索引是{{index}}当前项是{{item}}
</view>
// 可以使用wx:for-index指定自定义的索引变量名字，使用wx:for-item指定当前项的变量名,避免命名冲突
 
<view wx:for="{{array}}" wx:for-index="i" wx:for-item="t">
  索引是{{i}}当前项是{{t}}
</view>
// wx:key类似于列表的唯一key，可提高渲染效率

WXSS 模板样式

rpx 是微信小程序中独有的为不同屏幕提供的适配单位,将屏幕总宽度 分为 750 份，即 750rpx

样式导入
在自己文件的 wxss 中可以使用@import 导入外部样式表的相对路径

局部样式只能作用于当前页面，全局样式作用于所有页面，如果存在样式冲突将以局部样式为主

全局配置

pages 存放小程序所有页面的路径

window 设置小程序的窗口外观

tabBar 设置小程序底部的 tabBar 效果

style 是否启用新版组件样式

window

分为三个区域分别是

头部及其以上的导航栏区域 navigationBar

背景区域即下拉可见区 background

页面主体区 wxml

navigationBarTitleText 设置导航栏标题文本

navigationBarBackgroundColor 设置导航栏的背景色

navigationBarTextStyle 设置导航栏的标题文本颜色 仅支持 black/white

enablePullDownRefresh 设置为 true 开启下拉刷新

backgroundColor 设置下拉的背景色

backgroundTextStyle 设置下拉的小圆点背景色 只能是 dark 或 light

onReachBottomDistance 设置上拉触底的距离，默认为 50px

tabBar

用于页面切换，分为底部 tabBar 和顶部 tabBar

最多只能有 5 个，最好 2 个且为顶部 tabBar 时不渲染 icon

backgroundColor tabBar 的背景色

selectedIconPath 选中的图片路径

BorderStyle tabBar 上边框的颜色

iconPath 未选中的图片路径

selectedColor 选中的 tab 的文字颜色

color 未选中的 tab 的文字颜色

position tabBar 位置 仅支持 top/bottom

BorderStyle 上边框颜色 仅支持 black/white

list tab 页列表最少 2 个 最多 5 个

页面配置

每个页面都有自己的 json 文件，页面配置会覆盖全局配置，可以让页面有独立的外观，可以单独为页面开启下拉刷新

页面事件

1、下拉刷新

在页面的.json 内添加对象enablePullDownRefresh开启

在页面.js 文件的onPullDownRefresh内监听用户下拉刷新

下拉刷新不会自动关闭，需要手动调用wx.stopPullDownRefresh()在数据处理完关闭下拉刷新

2、上拉触底

在页面.js 文件的onReachBottom内监听用户上拉触底，一般用来发起请求，为了防止用户重复发起请求，需要对请求进行节流操作

在请求时一般需要添加 loading 提示效果

调用 wx.showLoading 开启提示

调用 wx.hideLoading 关闭提示

节流

在 data 内定义一个 isloading 判断请求是否在发送

完成请求时修改此值

getColor() {
  // 节流
  this.setData({
    isLoading: true
  })
  // 展示 Loading
  wx.showLoading({
    title: '加载中',
  })
  wx.request({
    url: 'https://www.escook.cn/api/color',
    method: 'GET',
    success: ({data: res}) => {
      this.setData({
        colorList: [...this.data.colorList, ...res.data]
      })
    },
    complete: () => {
      wx.hideLoading()
      // 关闭节流
      this.setData({
        isLoading: false
      })
    }
  })
}

页面导航

1、声明式导航

在页面声明一个 navigation 导航组件，类似 a 标签，用户点击跳转页面

2、前进导航

需要指定 url 和 open-type 属性

url 是页面的路由

open-type 是 swichTab 则跳转至 tabBar 页面

open-type 是 navigate 或不填则跳转至非 tabBar 页面

跳转到 tabBar 页面调用 wx.switchTab()方法

gotoUrl() {
  wx.switchTab({
    url:'/pages/index/index'
  })
}

跳转至非 tabBar 页面调用 wx.navigateTo()方法

gotoUrl() {
  wx.navigateTo({
    url:'/pages/index/index'
  })
}

导航传参

在 url 后面使用?传参，多个参数使用&符连接url="/pages/index/index?id=1&br=2"

接收参数

在目标页面的 onload 生命周期可以通过 options 参数接收

onload: function(options) {
  this.setDate({
    query: options
  })
}

3、 后退导航

需要指定 open-type 属性为 navigateBack，delta 为后退的层级，填入数字，如果只后退回上一页则可以不填

goBack() {
  wx.navigateBack({
    delta: 2
  })
  }

网络请求

1、只能请求 Https 类型的接口

2、必须将接口的域名添加到信任列表中

使用 wx.request()发起 get 或 post 请求

wx.request({
  url:'',请求的地址
  method:"get/post",//请求的方式
  data:{},// 发送到服务器的数据
  success: (res=>{
    //请求成功的回调
    })
})

如果需要页面刚加载时需要获取初始化数据，在小程序的 onLoad 事件内进行函数调用发起请求

小程序中不存在跨域的问题

请求注意节流，同时要注意有多少条数据防止发送额外请求，参考本文页面事件中的上拉触底

promise 化

依赖于 miniprogram-api-promise@1.0.4,需要使用 npm 安装

在 app.js 中使用 promisifyAll()方法

import {promisifyAll} from ’miniprogram-api-promise‘
const wxp = wx.p = {}
promisifyAll(wx, wxp)
// 在请求时
async getInfo() {
  const {data :res} = await wx.p.requsest({
    method: 'GET',
    url: 'https://www.esscook.cn/api/get',
    data: { name: 'zs' }
  })
  console.log(res)
}

生命周期

应用生命周期

应用生命周期函数有三个 ----app.js

onlaunch ----当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onShow -----当小程序启动，或从后台进入前台显示，会触发 onShow

onHide -----当小程序从前台进入后台，会触发 onHide

页面生命周期

页面声明周期有五个 ----页面的 js 文件

onLoad ----监听页面加载，一个页面调用一次

onReady ----页面初次渲染完成，一个页面调用一次，可以控制页面结构，修改页面内容

onUnload ----页面卸载，一个页面调用一次

onShow ---- 监听页面显示

onHide ----监听页面隐藏

WXS 脚本

充当页面的过滤器，使用 wxs 标签，类似 script 脚本，必须提供 module 属性,通过属性名调用

<view>{{m1.toUpper(username)}}</view>
 
<wxs module="m1">
module.exports.toUpper = function(str) {
  return str.toUpperCase()
}
</wxs>

还可以定义.wxs 文件创建脚本，但需要使用在 wxs 标签添加 src 属性和 module 属性，src 属性必须为相对路径

注意

wxs 不支持 Es6，不支持 let，const，解构赋值、展开运算符、箭头函数等高级语法，一般使用 var 定义变量，使用 function 定义函数

wxs 是过滤器，不能作为事件的回调函数，以下是错误示例<button bindtap="m1.toUpper"></button>

wxs 不能调用小程序的 api 和 js 文件

自定义组件

创建 components 文件夹存放自定义组件

组件的.js 文件中调用的是 component,页面调用的是 page

1、局部引用

在页面的.json 文件中

usingComponents: {
  'test': '/components/test/test'
}

在同一页面的.wxml 中<test></test>

2、全局引用
在 app.json 中

usingComponents: {
'test': '/components/test/test'
}

在所有的页面都可以使用这个组件<test></test>

样式

小程序的样式不会影响到组件的样式，包括全局的样式，组件的样式是独立的

注意：此样式只有 class 样式不会影响，id、属性等样式会有影响

组件样式隔离可以被修改，因为可能需要组件被页面控制，有以下两种方法：

1、在组件的.js 文件中声明一个 options 对象

options：{styleIsolation:'isolated'}

2、在.json 文件中

{'styleIsolation' : 'isolated'}

styleIsolation 默认为 isolated，组件不受外部影响

styleIsolation 设置为 apply-shared 表示页面可以一下组件，但组件不影响页面

styleIsolation 设置为 shared 设置为组件和页面可以互相影响

数据

定义 component 的在 data 中

方法

定义在 component 的 methods 中

属性

properties 属性可以接收外界传递到组件中的数据,type 代表属性的数据类型，value 是它的初始值,如果没有初始值则可以简写

properties: {
  max:{
    type: Number,
    value: 10
  }
  max: Number // 简化的方式
}

data 和 properties 的区别

两者都是可读可写的，都可以用 this.setData 重新赋值

data 倾向于存储组件的私有数据

properties 倾向于存储外界传递的数据

数据监听

类似 vue 的 watch，使用 observes,数据变化就会触发改函数，同时可以监听对象中的某个属性的变化

observe: {
  'n1, n2': function(n1, n2) {
    this.setDate({sum : n1+n2})
  }
}

如果需要监听对象上所有属性的变化可以使用通配符**

obj.**: function (obj) {}

插槽

一个组件默认只支持一个插槽，用于渲染不确定的内容，插槽使用<slot>标签在组件内部定义

如果想启用多个插槽，可以在组件的.js 文件进行配置，多个插槽以 name 属性区分，在页面使用 slot 属性对应 name 即可

options: {
  multipleSlots: true
}

组件

生命周期

created 组件刚被创建时，不能使用 setData

attached 组件被创建进入页面，可以发起请求

ready 组件被渲染完成

moved 组件被移动时

detached 组件被从页面移除时，多用于清理工作

error 组件运行出错

生命周期函数最好定义在 lifetimes 对象内

lifetimes:{
  created(){}
}

为方便执行某些事件，组件可以监听所在页面的生命周期函数，需要定义在pageLifetimes节点内

show 页面被展示

hide 页面被隐藏

resize 页面尺寸变化

pageLifetimes: {
  show() {}
}

组件通信

1、属性绑定----用于父组件向子组件传值

在父组件中

<son num="{{num}}"></sum>

在子组件的 js 文件中 properties 节点即可以接收此数据

properties: {
  count: num
}

2、事件绑定---用于子组件向父组件传值

在父组件的.js 中先定义一个自定义方法

getSonValue(e) {
  this.setData({sonValue: e.detail.value})
}

在父组件的 wxml 中,bind 后的名称可以自定义

<son bind:father="getSonValue"></son>

在子组件中，使用 triggerEvent 触发 bind 的自定义名

this.triggerEvent('father', {value: this.properties.count})

3、获取子组件的实例

通过 this.selectComponent('id 或 class 选择器')此方法父组件可以访问子组件的任意数据和方法

在父组件的.wxml 中

<son class="sonclass"></son>
<button bindtap="getChid"></button>
 

在父组件的.js 文件中

getChild() {
  const child = this.selectComponent('sonclass')
  chlid.setData({count: child.properties.count + 1})
  child.add()
}

4、behaviors

用于组件共享相同代码

每个 behaviors 中都有一组属性、数据、生命周期和方法，每个组件可以引用多个 behaviors，behavior 是之间也可以互相引用

创建 behavior.js 文件

module.exports = Behavior({
  properties: {},
  data: {},
  method: {}
})

在组件内使用 require 导入

const mybehaviors = required('url')
Component({
  behaviors: [mybehaviors]
})

5、全局数据共享

使用mobx-miniprogram@4.13.2创建 store 实例对象

使用mobx-miniprogram-bindings@1.2.1把 store 里面的方法共享给组件

使用时 npm 时注意先删除 minniprogram_npm 文件夹并重新构建 npm

创建 store 实例对象

import { observable, action } from 'mobx-miniprogram'
 
export const store = observale({
  numA: 1,
  numB: 2,
  // 计算属性
  get sum() {
    return this.numA + numB
  }
// action 方法,修改 store 里面的数据
  updateNumA: action(function(step) {
  this.numA += step
  })
})

绑定到页面中

import { createStoreBindings } from 'mobx-mininprogram-bindings'
import {store} from '../../store/store'
 
Page({
  onLoad: function() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNumA']
    })
  },
  onUnload: function() {
    this.storeBindings .destroyStoreBindings()
  }
})
 
// 在页面中使用
<view>{{numA}}+{{numB}} = {{sum}}</view>
<van-button bindtap="btnHandler1" date-step="{{1}}">numA+1</van-button>
<van-button bindtap="btnHandler1" date-step="{{-1}}">numA-1</van-button>
// 事件处理函数
btnHandler1(e) {
  this.updateNumA(e.target.dataset.step)
}

绑定到组件中
import { storeBindingBehavior } from 'mobx-mininprogram-bindings'
import {store} from '../../store/store'
 
Component({
  behavior: [storeBindingBehavior ],// 通过 storeBindingBehavior 来绑定
    storeBindings: {
      store,
      fields: {
        //绑定字段有三种方式
        numA: () => store.numA,
        numB: (store) => store.numB,
        sum: 'sum'
      },
      actions: {
        updateNumA: 'updateNumA'
    }
  }
})
// 在组件中使用
<view>{{numA}}+{{numB}} = {{sum}}</view>
<van-button bindtap="btnHandler1" date-step="{{1}}">numA+1</van-button>
<van-button bindtap="btnHandler1" date-step="{{-1}}">numA-1</van-button>
 
// 组件的方法列表
methods: {
  btnHandler1(e) {
    this.updateNumA(e.target.dataset.step)
  }
}

其他

分包

优化小程序的首次启动下载时间，同时利于多人开发

分包不能超过 16M 单个分包不能超过 2M

tabBar 页面必须在主包内

在 app.json 与 pages 同级处声明一个 subpackages 节点

"pages": [
  "pages/home/home"
],
"subpackages": {
  {
    "root":"packageA",// 分包的根目录
    “name”: "p1",// 分包的别名
    "pages": [
      "pages/cat/cat"
    ]
  }
}

预下载

分包预下载是在进入某个页面由框架将分包下载完毕

在 app.json 中使用 preloadRule 指定预下载规则

'preloadRule': {
  "pages/contact/contact": {// 触发分包预下载的页面路径
    // network 指网络模式，可选 wifi 和 all
    "network": "all",
    // 分包的 root 或 name 属性
    "packages": ["packageA"]
  }
}

同一个分包的页面享有共同预下载的大小是 2M

css 变量

使用 css 变量可以更加方便维护代码

先在根节点定义一个变量，这个变量将作用于这个根节点内部,变量名以--开头

html{
  --mian-color: #fff;
}

在需要使用的地方使用 var 进行引用即可

.box{
  color: var(--main-color)
}

可以通过此方法对 vant 的主题样式进行自定义