༨Rꫀꪖᦔᵧₒᵤ11

微信小程序

一、小程序框架

微信小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

解释：小程序依赖于微信作为载体，呈现类似App的展示应用效果

小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是多少有些许区别的，例如：

由原来的html文件修改为wxml文件
由原来的css文件修改为wxss文件
新增了属于小程序的特别配置
...

小程序技术发展史

2011年1月，微信1.0发布

2012年3月，微信突破1亿用户

2013年8月，微信发布微信支付

2014年9月，企业号发布

2015年1月，微信第一条朋友圈广告

2016年1月，企业微信发布

2017年1月，小程序发布

体验小程序

开发者可使用微信客户端(6.7.2 及以上版本)扫码下方小程序码，体验小程序

微信小程序账号申请

开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序

申请帐号

进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号

注册地址：微信小程序小程序是一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序开发者可在小程序内提供便捷、丰富的服务，如预订、商品购买、游戏、信息查询等。https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

第一步：添加账号信息

第二步：激活邮箱

第三步：信息登记

温馨提示

这里我们能选择的是个人和企业，如果是个人注册选择个人（我们这里选择个人），如果是企业注册选择企业

第四步：主体信息登录

温馨提示

用户信息与微信注册用户信息保持一致

第五步：进入控制台

单独进入管理平台地址:微信公众平台

第六步：获取AppID

注意：目前对我们有用的是“开发管理 - 开发设置 - AppID”

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID

微信小程序开发者工具

为了帮助开发者简单和高效地开发和调试微信小程序，我们推出了微信开发者工具

使用小程序开发者工具，开发者可以完成小程序开发调试、代码查看和编辑、小程序预览和发布等功能。

下载安装

开发者工具下载地址

微信开发者工具下载地址与更新日志 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装如一般软件一样，并没有特别之处

创建项目

基础开发，我们要选择“JavaScript-基础模板”

开发者工具说明

在微信开发者工具中，我们可以编写代码的同时查看运行结果和调试问题

小程序目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

描述整体的 `app`

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	是	小程序公共样式表

描述各自页面的 `page`

一个小程序页面由四个文件组成，分别是

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

温馨提示

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

全局配置_Pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理

温馨提示

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）

Pages配置

小程序中新增/减少页面，都需要对app.json文件中 pages 数组进行修改

默认项目存在两个页面: index和logs,对应的app.json中pages属性的配置：

"pages": [
  "pages/index/index",
  "pages/logs/logs"
]

增加页面 news 之后,修改 app.json 文件中的pages属性（其实页面创建出来，也会自动加载）

"pages": [
   "pages/news/news",
   "pages/index/index",
   "pages/logs/logs"
],

修改pages/news/news.wxml文件为：

news页面

entryPagePath

指定小程序的默认启动路径（首页），在 app.json 配置文件中增加 entryPagePath

{
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/news/news",
    "pages/index/index",
    "pages/logs/logs"
   ],
}

快捷生成页面方案

在 app.json 文件中的pages中直接添加路径，可以自动生成页面

例如：我们增加about页面路由，可以自动生成about页面

{
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/news/news",
    "pages/index/index",
    "pages/logs/logs",
    "pages/about/about" 
   ],
}

全局配置_window

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

常用属性

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。

修改app.json文件中的window属性配置

"window": {
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "第一个小程序",
  "backgroundColor": "#000000",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh":true,
  "onReachBottomDistance":50
},

全局配置_tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置 tab 切换时显示的对应页面

常用属性

属性	类型	必填	默认值	描述
list	Array	是		tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab

温馨提示

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab

List属性说明

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。

在设置iconPath和selectedIconPath属性时：在阿里图库里面下载素材，不是代码

修改app.json配置文件，增加tabBar属性配置

"tabBar": {
      "list": [
          {
              "pagePath": "pages/homes/homes",
              "text": "首页",
              "iconPath": "./images/shouye.png",
              "selectedIconPath": "./images/shouye_select.png"
          },
          {
            "pagePath": "pages/gongneng/gongneng",
            "text": "功能",
            "iconPath": "./images/gongneng.png",
            "selectedIconPath": "./images/gongneng_select.png"
        },
        {
            "pagePath": "pages/fujin/fujin",
            "text": "附近",
            "iconPath": "./images/fujin.png",
            "selectedIconPath": "./images/fujin_select.png"
        },
        {
            "pagePath": "pages/gouwuche/gouwuche",
            "text": "购物车",
            "iconPath": "./images/gouwuche.png",
            "selectedIconPath": "./images/gouwuche_select.png"
        },
        {
            "pagePath": "pages/wode/wode",
            "text": "我的",
            "iconPath": "./images/wode.png",
            "selectedIconPath": "./images/wode_select.png"
        }
      ]
  },

全局配置_tabBar属性

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色，仅支持 `black` / `white`
list	Array	是		tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 `bottom` / `top`

配置app.json文件中的tabBar的属性

"tabBar": {
      "color": "#cdcdcd",
      "selectedColor": "#d81e06",
      "backgroundColor": "#ffffff",
      "borderStyle": "black",
      "position": "bottom",
      "list": [
          {
              "pagePath": "pages/homes/homes",
              "text": "首页",
              "iconPath": "./images/shouye.png",
              "selectedIconPath": "./images/shouye_select.png"
          },
          {
            "pagePath": "pages/gongneng/gongneng",
            "text": "功能",
            "iconPath": "./images/gongneng.png",
            "selectedIconPath": "./images/gongneng_select.png"
        },
        {
            "pagePath": "pages/fujin/fujin",
            "text": "附近",
            "iconPath": "./images/fujin.png",
            "selectedIconPath": "./images/fujin_select.png"
        },
        {
            "pagePath": "pages/gouwuche/gouwuche",
            "text": "购物车",
            "iconPath": "./images/gouwuche.png",
            "selectedIconPath": "./images/gouwuche_select.png"
        },
        {
            "pagePath": "pages/wode/wode",
            "text": "我的",
            "iconPath": "./images/wode.png",
            "selectedIconPath": "./images/wode_select.png"
        }
      ]
  },

全局配置_常用其他配置

小程序根目录下的 app.json 文件用来对微信小程序进行其他全局配置。文件内容为一个 JSON 对象

属性	类型	必填	描述
style	string	否	指定使用升级后的 weui 样式
sitemapLocation	string	是	指明 sitemap.json 的位置
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启 debug 模式，默认关闭
debugOptions	Object	否	调试相关配置
permission	Object	否	小程序接口权限相关设置
...	...	...	...

style

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式

sitemapLocation

指明 sitemap.json的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件

networkTimeout

各类网络请求的超时时间，单位均为毫秒

属性	类型	必填	默认值	说明
request	number	否	60000	wx.request 的超时时间，单位：毫秒
connectSocket	number	否	60000	wx.connectSocket 的超时时间，单位：毫秒
uploadFile	number	否	60000	wx.uploadFile 的超时时间，单位：毫秒
downloadFile	number	否	60000	wx.downloadFile 的超时时间，单位：毫秒

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题

debugOptions

小程序调试相关配置项

属性	类型	必填	默认值	描述
enableFPSPanel	boolean	否	false	是否开启 FPS 面板

FPS 面板

为了便于开发者调试渲染层的交互性能，小程序基础库提供了选项开启 FPS 面板，开发者可以实时查看渲染层帧率

开启方式

"debugOptions": {
  "enableFPSPanel": true
}

温馨提示

必须在真机上才能看到

permission

小程序接口权限相关设置

例如：小程序定位设置，配置如下

"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
}

`app.json` 文件配置如下

{
  "entryPagePath": "pages/index/index",
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/homes/homes",
    "pages/wode/wode",
    "pages/fujin/fujin",
    "pages/gongneng/gongneng",
    "pages/gouwuche/gouwuche"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "backgroundColor": "#000"
  },
  "tabBar": {
      "color": "#cdcdcd",
      "selectedColor": "#d81e06",
      "backgroundColor": "#ffffff",
      "borderStyle": "black",
      "position": "bottom",
      "list": [
          {
              "pagePath": "pages/homes/homes",
              "text": "首页",
              "iconPath": "./images/shouye.png",
              "selectedIconPath": "./images/shouye_select.png"
          },
          {
            "pagePath": "pages/gongneng/gongneng",
            "text": "功能",
            "iconPath": "./images/gongneng.png",
            "selectedIconPath": "./images/gongneng_select.png"
        },
        {
            "pagePath": "pages/fujin/fujin",
            "text": "附近",
            "iconPath": "./images/fujin.png",
            "selectedIconPath": "./images/fujin_select.png"
        },
        {
            "pagePath": "pages/gouwuche/gouwuche",
            "text": "购物车",
            "iconPath": "./images/gouwuche.png",
            "selectedIconPath": "./images/gouwuche_select.png"
        },
        {
            "pagePath": "pages/wode/wode",
            "text": "我的",
            "iconPath": "./images/wode.png",
            "selectedIconPath": "./images/wode_select.png"
        }
      ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "networkTimeout": {
      "request": 20000,
      "connectSocket": 20000,
      "uploadFile": 20000,
      "downloadFile": 20000
  },
  "debug": true,
  "debugOptions": {
      "enableFPSPanel": true
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
     }
  }  
}

单页面配置

app.json 中的部分配置，也支持对单个页面进行配置

可以在页面对应的 文件.json 文件来对本页面的表现进行配置

配置项

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色(开启下拉菜单可以观察)
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。
style	string	default	启用新版的组件样式
...	...	...	...

页面： 文件.json 文件配置

虽然配置与 app.json 基本一致，但是注意，不在需要添加 window 作为父级

{
    "usingComponents": {},
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 20,
    "backgroundColor": "#ccc",
    "style": "v2"
}

全局配置_公共样式

在项目根目录的 app.wxss 文件为小程序公的共样式表，相当与CSS初始化文件配置

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

WXSS 用来决定 WXML 的组件应该怎么显示

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

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

尺寸单位
样式导入

公共样式

在 app.wxss 文件中添加样式

text{
  color:red;
}

项目中所有的页面的 text 文本都会呈现红色

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况

在news页面的wxml文件中增加下列代码

在 app.wxss 文件中，增加box盒子的样式

.box{
  width: 200rpx;
  height: 200rpx;
  background: red;
}

在iphone5上的效果，元素的宽高是85px

在iphone6上的效果，元素的宽高是100px

样式导入

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

在项目根目录下创建common文件夹，并创建common.wxss文件，增加box的样式

.box{
  margin: 50px;
}

在app.wxss文件中引入common.wxss文件

@import "./common/common.wxss";

此时，刚刚所创建的box也加载了引入文件的样式

全局配置_注册小程序（app.js)

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等

生命周期

通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程

方法说明

属性	类型	必填	说明
onLaunch	function	否	生命周期回调——监听小程序初始化。
onShow	function	否	生命周期回调——监听小程序启动或切前台。
onHide	function	否	生命周期回调——监听小程序切后台。
onError	function	否	错误监听函数
onPageNotFound	function	否	页面不存在监听函数
onThemeChange	function	否	监听系统主题变化

我们来修改初始app.js文件，代码如下

// app.js
App({
 onLaunch(options) {
   console.log("监听小程序初始化",options);
  },
 onShow (options) {
  console.log("监听小程序启动",options);
  },
 onHide () {
  console.log("监听小程序切后台");
  },
 onError (msg) {
  // 小程序发生脚本错误或 API 调用报错时触发
  console.log("错误监听函数",msg)
  },
 onPageNotFound(res){
  console.log("页面不存在监听函数");
  },
 onThemeChange(){
   console.log("系统切换主题时触发");
  }
})

全局属性

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。

在 app.js 文件中增加全局属性

// app.js
App({
 globalData: {
  userInfo: "我是全局属性"
  }
})

我们在news.js文件中读取全局属性

Page({
  onLoad(options) {
    const appInstance = getApp()
    console.log(appInstance.globalData.userInfo) // 我是全局属性
   }
})

当然，我们也可以在页面中显示，首先修改news.js文件

Page({
  data:{
    message:""
   },
  onLoad(options) {
    const appInstance = getApp()
    // 关于this.setData({}),后续会详细讲解，目前我们知道可以给message赋值即可
    this.setData({
      message:appInstance.globalData.userInfo
     })
   }
})

修改news.wxml文件显示内容

{{ message }}

页面的生命周期函数

注册小程序中的一个页面。指定页面的生命周期函数

页面的生命周期函数

属性	类型	说明
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载

我们在news页面中的news.js文件中去增加这些生命周期函数

Page({
  data:{
    message:""
   },
  onLoad(options) {
    console.log("页面加载");
    const appInstance = getApp()
    this.setData({
      message:appInstance.globalData.userInfo
     })
   },
  onShow() {
    console.log("页面显示");
   },
  onReady() {
    console.log("页面初次渲染完成");
   },
  onHide() {
    console.log("页面隐藏");
   },
  onUnload() {
    console.log("页面卸载");
   }
})

生命周期函数的作用

在不同的生命周期函数，根据业务需求，可以增加业务。例如：我们可以在 onShow 函数中修改data中的数据

Page({
  data:{
    hello:"hello"
   },
  onShow() {
    this.setData({
      hello:"大家好"
     })
   }
})

页面中的Data对象

data 是页面第一次渲染使用的初始数据

页面加载时，data 中的数据将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组

我们在news.js文件中增加data对象，并增加相应的数据,显示在页面中

// news.js文件
Page({
  data:{
    hello:"hello",
    num:10,
    flag:true,
    user:{
      name:"iwen",
      age:20
     },
    names:["iwen","ime","frank"]
   }
})


{{ hello }}
{{ num }}
{{ user.name }}
{{ names[1] }}

setData函数

setData 函数用于将data中的数据进行修改，并发送到视图层

我们在news.js文件中修改data中的数据，我们可以尝试在onLoad中修改num的属性值

Page({
  data:{
    message:"",
    hello:"hello",
    num:10,
    flag:true,
    user:{
      name:"iwen",
      age:20
     },
    names:["iwen","ime","frank"]
   },
  onLoad(options) {
    this.setData({
      num:20
     })
   }
})

温馨提示

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致

仅支持设置可 JSON 化的数据

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据

请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题

温馨解释

尽管关于data和setData这种操作很神奇,但其实这也是前端最常用的模版数据绑定方案。数据绑定的过程其实不复杂

解析语法生成 AST

根据 AST 结果生成 DOM

将数据绑定更新至模板

其实这些目前我们并不需要去了解，只需要知道，如何使用即可

二、小程序组件_基础视图

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。但是二者还是多少有些许区别的，例如：小程序提供了一系列的视图组件代替html中的标签

容器 view
文本 text
图片 image

容器 `view`

视图容器，用来承载视图块，类似 div 的功能，所以要写在 wxml 视图文件之中

我们在项目中增加一个页面views，并指定为默认页面


视图1
视图2

view 是块级元素

文本 `text`

文本1
文本2

文本，承载页面文本信息，类似span的功能

text 是行内元素

温馨提示

text 组件内只支持 text 嵌套

除了文本节点以外的其他节点都无法长按选中

图片 `image`

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式

温馨提示

tip：image组件默认宽度320px、高度240px

tip：image组件中二维码/小程序码图片不支持长按识别

mode属性说明

合法值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

组件_滑块视图容器

滑块视图容器（焦点轮播图）

基本实现

我们增加一个全新的页面swiper来实现轮播图效果

为了更美观，可以让图片宽度充满全屏,并保持图片不变形

同时设置图片样式充满全屏，因为图片默认大小：宽度320px、高度240px

/* swiper.wxss */
image{
  width: 100%;
}

Swiper常用属性说明

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向

属性值来源于逻辑文件

我们可以在逻辑文件swiper.js中动态配置属性值

// swiper.js
Page({
  data: {
    swiperOptions:{
      indicatorDots:true,
      indicatorColor:"#fff",
      indicatorActiveColor:"#f00",
      autoplay:true,
      interval:5000,
      duration:1000,
      circular:true,
      vertical:true
     }
   }
})

组件_滚动视图区域

可滚动视图区域。可实现容器内元素水平和垂直方向滚动

水平滚动

给容器设置scroll-x，可实现水平滚动

当然要配合样式实现

/* scroll.wxss */
.scroll-view_H{
  /* 规定容器内元素不进行换行 */
  white-space: nowrap;
}


.scroll-view-item {
  display: inline-block;
  width: 100%;
  height: 300rpx;
}
.demo-text-1{
  background-color: red;
}
.demo-text-2{
  background-color: green;
}
.demo-text-3{
  background-color: blue;
}

垂直滚动

给容器设置scroll-y，可实现垂直滚动

当然要配合样式实现

/* scroll.wxss */
.scroll-view-item {
  width: 100%;
  height: 300rpx;
}
.demo-text-1{
  background-color: red;
}
.demo-text-2{
  background-color: green;
}
.demo-text-3{
  background-color: blue;
}
.scroll-view_V{
  height: 300rpx;
}

常用属性

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
scroll-top	number/string		否	设置竖向滚动条位置
scroll-left	number/string		否	设置横向滚动条位置
refresher-enabled	boolean	false	否	开启自定义下拉刷新

组件_icon

图标组件,其实就是字体图标效果，但是这里所提供的只有最常用的几个

图标使用

字体图标属性

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color	string		否	icon的颜色，同 css 的color

组件_progress

基本进度条

属性说明

属性	类型	默认值	必填	说明
percent	number		否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	6	否	进度条线的宽度
activeColor	string	#09BB07	否	进度条颜色
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色
active	boolean	false	否	进度条从左往右的动画
duration	number	30	否	进度增加1%所需毫秒数

组件_表单

表单，将用户输入的信息提交到服务器

小程序的表单与html的表单基本一致

登录页面

实现一个基础的登录页面，要用到以下组件

form 表单
input 输入框
button 按钮

创建一个登陆页面login,在login.wxml中实现基本结构

为了美观，我们需要在login.wxss文件中添加样式

/* login.wxss */
.login{
  margin-top: 100rpx;
}
input{
  border: 1px solid #999;
  border-radius: 5px;
  margin: 10px;
  padding-left: 10px;
  height: 70rpx;
}

组件_button

小程序的 button 按钮与 html 的非常类似，但是小程序的功能要更强大一些

按钮属性

属性	类型	默认值	必填	说明
type	string	default	否	按钮的样式类型
size	string	default	否	按钮的大小
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于 form组件，点击分别会触发form组件的 submit/reset 事件

type 属性说明

合法值	说明
primary	绿色
default	白色
warn	红色

size 属性说明

合法值	说明
default	默认大小
mini	小尺寸

组件_输入框

输入框是input, 与html的输入框类似，但是增加了很多新的功能

实现基本输入框

为了展示效果，需要配合样式

input{
  border: 2px solid #999;
  border-radius:10px;
  margin:10px;
  padding-left:10px;
}

输入框属性

属性	类型	默认值	必填	说明
value	string		是	输入框的初始内容
placeholder	string		是	输入框为空时占位符
password	boolean	false	否	是否是密码类型
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
focus	boolean	false	否	获取焦点
type	string	text	否	input 的类型
confirm-type	string	done	否	设置键盘右下角按钮的文字，仅在type='text'时生效

type 属性详解

合法值	说明
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘
nickname	昵称输入键盘

confirm-type属性详解

合法值	说明
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

配合样式更美观

input{
  border: 2px solid #999;
  border-radius:10px;
  margin:10px;
  padding-left:10px;
}

组件_picker

从底部弹起的滚动选择器

选择器有很多种类，分别是

普通选择器
多列选择器
时间选择器
日期选择器
省市区选择器

普通选择器(mode="`selector`")

指定mode属性为selector,或者默认不指定mode

普通选择器

  
     当前选择：{{array[index]}}

选择器展示效果需要配合逻辑

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    index: 0
   },
  bindPickerChange(e) {
    this.setData({
      index: e.detail.value
     })
   }
})

多列选择器(mode="`multiSelector`")

指定mode属性为multiSelector

多列选择器

  
     当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}

Page({
  data: {
    multiArray: [
       ['无脊柱动物', '脊柱动物'],
       ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
       ['猪肉绦虫', '吸血虫']
     ],
    multiIndex: [0, 0, 0],
   },
  bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value
     })
   }
})

时间选择器(mode="`time`")

指定mode属性为time

时间选择器

  
     当前选择: {{time}}

Page({
  data: {
    time: '12:01'
   },
  bindTimeChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
     })
   }
})

日期选择器(mode="date")

指定mode属性为date

日期选择器

  
     当前选择: {{date}}

Page({
  data: {
    date: '2030-09-01'
   },
  bindDateChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
     })
   }
})

省市区选择器(mode="`region`")

指定mode属性为region

省市区选择器

  
     当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}

Page({
  data: {
    region: ['广东省', '广州市', '海珠区']
   },
  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
     })
   }
})


基础选择器

    当前选择的是：{{ Array[index] }}


多列选择器

    当前选择的是：
    {{ multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
    


时间选择器

    当前时间是：
        {{ time }}
    




日期选择器

    当前日期是：
        {{ date }}
    



城市选择器

    当前城市是：
        {{ region[0] }},{{ region[1] }},{{ region[2] }}

// pages/picker/picker.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        Array: ["中国", "美国", "英国", "俄罗斯", "法国", "德国"],
        index: 0,
        multiArray: [
            ['无脊柱动物', '脊柱动物'],
            ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
            ['猪肉绦虫', '吸血虫']
        ],
        multiIndex:[0,0,0],
        time:"08:30",
        date:"2023-10-01",
        region:["甘肃省","兰州市","靖远县"]
    },
    bindSelectorChange(e) {
        this.setData({
            index: e.detail.value
        })
    },
    bindMultiSelectorChange(e){
        this.setData({
            multiIndex:e.detail.value
        })
    },
    bindTimeChange(e){
        this.setData({
            time:e.detail.value
        })
    },
    bindDateChange(e){
        this.setData({
            date:e.detail.value
        })
    },
    bindRegionChange(e){
        this.setData({
            region:e.detail.value
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

/* pages/picker/picker.wxss */
.view{
    margin: 20px;
    font-size: 18px;
    color: #666;
    letter-spacing: 2px;
}
.picker{
    margin: 20px 20px;
    border: 1px solid #999;
    border-radius: 20px;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

组件_slider

滑动选择器

基本实现

常用属性

属性	类型	默认值	必填	说明
step	number	1	否	步长，取值必须大于 0，并且可被(max - min)整除
show-value	boolean	false	否	是否显示当前 value
min	number	0	否	最小值
max	number	100	否	最大值
disabled	boolean	false	否	是否禁用
value	number	0	否	当前取值
backgroundColor	color	#e9e9e9	否	背景条的颜色
activeColor	color	#1aad19	否	已选择的颜色
block-color	color	#ffffff	否	滑块的颜色

组件_表单其他常用组件

表单是常用的组件，同样，在表单中，也有很多配套的组件

checkbox
radio
label
switch
textarea

复选框 checkbox

多选项目，与html复选框基本一致

选中

checked 表示初始状态为选中(true) 或未选中(false)

配合 checkbox-group 形成一组


  读书
  打游戏
  听音乐

radio

单选项目,与html单选框基本一致

选中

checked 表示初始状态为选中(true) 或未选中(false)

配合 radio-group 形成一组


  选项1
  选项2
  选项3
  选项4

label

用来改进表单组件的可用性,与html的label基本一致


  选中

switch

开关选择器,有着比较美观的展示效果

属性列表

属性	类型	默认值	必填	说明
checked	boolean	false	否	是否选中
disabled	boolean	false	否	是否禁用
type	string	switch	否	样式，有效值：switch, checkbox
color	string	#04BE02	否	switch 的颜色，同 css 的 color

textarea

多行输入框,与html多行输入框基本一致

</code></pre> 
  <p>为了可见性，我们需要增加样式</p> 
  <pre><code class="language-css">textarea{
  border: 1px solid red;
}
</code></pre> 
  <p></p> 
  <table> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>类型</th> 
     <th>默认值</th> 
     <th>必填</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>value</td> 
     <td>string</td> 
     <td></td> 
     <td>否</td> 
     <td>输入框的内容</td> 
    </tr> 
    <tr> 
     <td>placeholder</td> 
     <td>string</td> 
     <td></td> 
     <td>否</td> 
     <td>输入框为空时占位符</td> 
    </tr> 
    <tr> 
     <td>disabled</td> 
     <td>boolean</td> 
     <td>false</td> 
     <td>否</td> 
     <td>是否禁用</td> 
    </tr> 
    <tr> 
     <td>maxlength</td> 
     <td>number</td> 
     <td>140</td> 
     <td>否</td> 
     <td>最大输入长度，设置为 -1 的时候不限制最大长度</td> 
    </tr> 
    <tr> 
     <td>focus</td> 
     <td>boolean</td> 
     <td>false</td> 
     <td>否</td> 
     <td>获取焦点</td> 
    </tr> 
    <tr> 
     <td>auto-height</td> 
     <td>boolean</td> 
     <td>false</td> 
     <td>否</td> 
     <td>是否自动增高</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="language-html"><textarea value="文本内容" />
<textarea placeholder="占位符" />
<textarea maxlength="10" />
<textarea disabled />
<textarea focus />
<textarea auto-height/>
</code></pre> 
  <pre><code class="language-html"><!--pages/otherForm/otherForm.wxml-->

<checkbox>看电影</checkbox>
<checkbox checked="true">看电视</checkbox>

<checkbox-group>
    <checkbox>看电影</checkbox>
    <checkbox checked="true">打游戏</checkbox>
    <checkbox checked="true">听音乐</checkbox>
</checkbox-group>

<radio>选项一</radio>
<radio checked="true">选项二</radio>

<radio-group>
    <radio>A:black</radio>
    <radio>B:orange</radio>
    <radio checked="true">C:pink</radio>
</radio-group>

<label for="menu">
    <checkbox id="menu" checked="true">看电视</checkbox>
</label>

<textarea name="" id="" cols="30" rows="10">基础输入框







开关选择器
开关选择器
开关选择器
开关选择器
开关选择器

/* pages/otherForm/otherForm.wxss */
textarea{
    border: 1px solid #999;
    margin: 10px;
}
switch{
    margin: 8px;
}

组件_navigator

navigator 实现页面之间的跳转

跳转其他页面

常用属性说明

属性	类型	默认值	必填	说明
url	string		否	当前小程序内的跳转链接
open-type	string	navigate	否	跳转方式，默认打开新页面，`redirect` 在当前页面打开

跳转其他页面
在当前页打开

扩展：生命周期函数

onUnload 在之前的讲解中无法测试，现在有了navigator，我们可以进行测试了

在 navigator 的属性open-type设置为redirect时，我们可以观察输入结果

Page({
  onUnload() {
    console.log("卸载");
   }
})


跳转到新的页面：
在当前页面打开：

// pages/navigator/navigator.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        console.log("页面卸载了");
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

组件_audio

音频

属性说明

属性	类型	默认值	必填	说明
id	string		否	audio 组件的唯一标识符
src	string		否	要播放音频的资源地址
loop	boolean	false	否	是否循环播放
controls	boolean	false	否	是否显示默认控件
poster	string		否	默认控件上的音频封面的图片资源地址
name	string	未知音频	否	默认控件上的音频名字
author	string	未知作者	否	默认控件上的作者名字

切换音乐

通过修改audio的属性，切换音乐

Page({
  data: {
    audioOptions:{
      id:"myAudio",
      name:"妈妈的话",
      author:"zby忠宇",
      poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
      src:"https://music.163.com/song/media/outer/url?id=1961763339",
      controls:true,
      loop:true
     }
   },
  changeMusicHandle(){
    this.setData({
      audioOptions:{
        id:"myAudio",
        name:"时光洪流",
        author:"程响",
        poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
        src:"https://music.163.com/song/media/outer/url?id=1868943615",
        controls:true,
        loop:true
       }
     })
   }
})

组件_video

视频

为了美观，我们将视频宽度充满全屏

video{
  width: 100%;
}

属性说明

属性	类型	默认值	必填	说明
src	string		是	要播放视频的资源地址，支持网络路径、本地临时路径
duration	number		否	指定视频时长
controls	boolean	true	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
autoplay	boolean	false	否	是否自动播放
loop	boolean	false	否	是否循环播放
muted	boolean	false	否	是否静音播放
initial-time	number	0	否	指定视频初始播放位置
show-mute-btn	boolean	false	否	是否显示静音按钮
danmu-list	Array		否	弹幕列表
danmu-btn	boolean	false	否	是否显示弹幕按钮，只在初始化时有效，不能动态变更
enable-danmu	boolean	false	否	是否展示弹幕，只在初始化时有效，不能动态变更

// pages/audio/audio.js
Page({
  data: {
    danmuList: [{
      text: '第 1s 出现的弹幕',
      color: '#ff0000',
      time: 11
     }]
   },
  onReady() {
    this.videoContext = wx.createVideoContext('myVideo')
   },
  sendDanmuHandle() {
    this.videoContext.sendDanmu({
      text: "真好看",
      color: "#00ff00"
     })
   }
})

组件_camera

系统相机。扫码二维码功能

属性说明

属性	类型	默认值	必填	说明
mode	string	normal	否	应用模式，只在初始化时有效，不能动态变更 normal:相机模式 scanCode:扫码模式
device-position	string	back	否	摄像头朝向 front:前置 back:后置
flash	string	auto	否	闪光灯，值为 auto , on, off



预览
属性说明

Page({
  data:{
    src:""
   },
  takePhotoHandle() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
         })
       }
     })
   }
})

组件_map

地图，小程序地图实现功能相对比基础一些，如果要实现完整的地图能力，请参考腾讯地图

温馨提示

腾讯地图：微信小程序LBS解决方案 | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/product/miniapp/home/

属性说明

属性	类型	默认值	必填	说明
longitude	number		是	中心经度
latitude	number		是	中心纬度
scale	number	16	否	缩放级别，取值范围为3-20
min-scale	number	3	否	最小缩放级别
max-scale	number	20	否	最大缩放级别

// pages/map/map.js
Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
   }
})

三、小程序WXML语法

事件系统

什么是事件

事件是视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
事件对象可以携带额外信息，如 id, dataset, touches

事件的使用方式

在组件中绑定一个事件处理函数


 Click me!

// pages/event/event.js
Page({
  tapName(){
    console.log("点击");
   }
})

Event对象

在小程序中，也具有事件对象event

Page({
  tapName(e){
    console.log(e);
   }
})

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

事件分类

事件分为冒泡事件和非冒泡事件：

冒泡事件(bind)：当一个组件上的事件被触发后，该事件会向父节点传递
非冒泡事件(catch)：当一个组件上的事件被触发后，该事件不会向父节点传递

冒泡事件(bind)

当一个组件上的事件被触发后，该事件会向父节点传递

// pages/event/event.js
Page({
  bindParentHandle(){
    console.log("冒泡事件：父级事件");
   },
  bindChildHandle(){
    console.log("冒泡事件：子级事件");
   }
})

非冒泡事件(catch)

当一个组件上的事件被触发后，该事件不会向父节点传递

// pages/event/event.js
Page({
  catchParentHandle(){
    console.log("非冒泡事件：父级事件");
   },
  catchChildHandle(){
    console.log("非冒泡事件：子级事件");
   }
})

事件类型

在微信小程序中，事件有很多中类型，通过bind和catch与下面的类型组合产生不同类型的事件

事件类型列表

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）

// pages/event_type/event_type.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },
    /*
    事件分类：
        冒泡事件：bindtap => bind tap
        非冒泡事件：catchtap => catch tap
    */
    bindParentHandle() {
        console.log("冒泡事件：父级事件");
    },
    bindChildHandle() {
        console.log("冒泡事件：子级事件");
    },
    catchParentHandle() {
        console.log("非冒泡事件：父级事件");
    },
    catchChildHandle() {
        console.log("非冒泡事件：子级事件");
    },


    bindTouchStart() {
        console.log("bind TouchStart");
    },
    catchTouchStart() {
        console.log("catch TouchStart");
    },
    bindTouchEnd() {
        console.log("bind TouchEnd");
    },
    catchTouchEnd() {
        console.log("catch TouchEnd");
    },
    bindTouchMove() {
        console.log("bind TouchMove");
    },
    catchTouchMove() {
        console.log("catch TouchMove");
    },
    bindTouchCancel() {
        console.log("bind TouchCancel");
    },
    catchTouchCancel() {
        console.log("catch TouchCancel");
    },
    bindLongPress() {
        console.log("bind LongPress");
    },
    catchLongPress() {
        console.log("catch LongPress");
    }
})

事件携带参数

事件在触发的过程中，我们可以携带参数

主要有两种方式：

event对象中的currentTarget读取携带参数
event对象中的mark读取携带参数

`currentTarget` 携带参数

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

currentTarget:携带参数

// pages/event/event.js
Page({
  bindCurrentTarget(e){
        console.log(e);
        console.log(e.currentTarget.dataset.id);
    }
})

温馨提示

在wxml中添加数据的时候，必须在自定义属性前添加data-*

`mark` 携带参数

可以使用 mark 来识别具体触发事件的 target 节点。此外， mark 还可以用于承载一些自定义数据（类似于 dataset ）。

当事件触发时，事件冒泡路径上所有的 mark 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 mark 。）

// pages/event/event.js
Page({
  bindParentMark(e){
        console.log(e.mark);
    },
    bindChildMark(e){
        console.log(e.mark);
    }
})

条件渲染

小程序提供了在wxml模板中，使用条件渲染

wx:if
wx:else
wx:elif
hidden

wx:if

在小程序中，使用 wx:if="" 来判断是否需要渲染该代码块

我是张杰

// pages/if/if.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        flag:true
    }

})

wx:else

有wx:if匹配的同时还有wx:else

我是张杰
我是邓超

// pages/if/if.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        flag:true
    },
    bindNext(){
        this.setData({
            flag:false
        })
    }

})

wx:elif

如同在javascript中，单纯的if...else是不够用的，所以引入了elif

1
2
3
未知

// pages/if/if.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        length:4
    }

})

hidden

hidden 与wx:if类似，同样可以来判断是否需要渲染该代码块

老公，可以给我买个苹果xx嘛

`wx:if` vs `hidden` 区别

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的基于CSS控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

列表渲染

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

基本使用

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item


  {{ item }}

Page({
  data: {
    users:["itbaizhan","sxt"]
   }
})

使用 wx:for-item 可以指定数组当前元素的变量名

使用 wx:for-index 可以指定数组当前下标的变量名


  
     {{ user }}-{{ ids }}

Page({
  data: {
    users:["itbaizhan","sxt"]
   }
})

复杂数据

网络请求拿到的数据是json格式，相对比要复杂一些


  
    {{ item.name }}
    
    {{ item.description }}
    {{ item.price }}
    {{ item.city }}

Page({
  data: {
    result: [{
        "id": 1,
        "name": "美食-甜豆干",
        "pic": "http://iwenwiki.com:3002/images/goods/1.jpg",
        "description": "津津卤汁豆腐干苏州特产豆干零食素食老字号食品豆制品小吃90g*10",
        "price": "39.90",
        "type": 0,
        "buynum": "435",
        "city": "北京"
       },
       {
        "id": 2,
        "name": "好欢螺螺蛳粉300g*6袋",
        "pic": "http://iwenwiki.com:3002/images/goods/2.jpg",
        "description": "好欢螺螺蛳粉300g*6袋柳州特产螺狮粉美食螺丝粉煮水方便面酸辣粉",
        "price": "69.99",
        "type": 0,
        "buynum": "3333",
        "city": "北京"
       }
     ]
   }
})

列表渲染_key属性

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率

温馨提示

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略




    {{item}}--{{index}}


    {{user}}--{{id}}





    
        id是：{{ item.id }}
        
        描述：{{ item.description }}
        价格：{{ item.price }}
        数量：{{ item.buynum }}
        城市：{{ item.city }}

// pages/list/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: ["张杰", "周杰伦", "古力娜扎", "邓超", "谢霆锋", "赵丽颖"],
        user: ["张杰", "周杰伦", "古力娜扎", "邓超", "谢霆锋", "赵丽颖"],
        result: [{
                "id": 1,
                "name": "美食-甜豆干",
                "pic": "http://iwenwiki.com:3002/images/goods/1.jpg",
                "description": "津津卤汁豆腐干苏州特产豆干零食素食老字号食品豆制品小吃90g*10",
                "price": "39.90",
                "type": 0,
                "buynum": "435",
                "city": "北京"
            },
            {
                "id": 2,
                "name": "好欢螺螺蛳粉300g*6袋",
                "pic": "http://iwenwiki.com:3002/images/goods/2.jpg",
                "description": "好欢螺螺蛳粉300g*6袋柳州特产螺狮粉美食螺丝粉煮水方便面酸辣粉",
                "price": "69.99",
                "type": 0,
                "buynum": "3333",
                "city": "北京"
            }
        ]
    },
    bindHandle(){
        this.setData({
            // concat:合并数据
            result:this.data.result.concat({
                "id": 3,
                "name": "美食-红烧鸡头",
                "pic": "http://iwenwiki.com:3002/images/goods/1.jpg",
                "description": "红烧鸡头苏州特产90g*10",
                "price": "99.9",
                "type": 0,
                "buynum": "22",
                "city": "苏州"
            })
        })
    }
})

列表渲染_应用

列表渲染的应用场景，所有需要重复视图的地方都可以使用列表渲染，例如：swiper

// pages/swiper/swiper.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        swiperData:[
            "../../images/1.jpg",
            "../../images/2.jpg",
            "../../images/3.jpg",
            "../../images/4.jpg",
            "../../images/5.jpg",
            "../../images/6.jpg"
        ]
    },
})

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用

定义模板

使用 name 属性，作为模板的名字。然后在

合法值	说明
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度
error	显示失败图标，此时 title 文本最多显示 7 个汉字长度
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度
none	不显示图标，此时 title 文本最多可显示两行

cancelText	string	取消	否	取消按钮的文字，最多 4 个字符
cancelColor	string	#000000	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	string	确定	否	确认按钮的文字，最多 4 个字符
confirmColor	string	#576B95	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串

方法	描述
showNavigationBarLoading	在当前页面显示导航条加载动画
hideNavigationBarLoading	在当前页面隐藏导航条加载动画
setNavigationBarTitle	动态设置当前页面的标题
hideHomeButton	隐藏返回首页按钮。当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏

字段	说明	默认值
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及JPG。显示图片长宽比是 5:4。	使用默认截图

字段	说明	默认值
title	自定义标题，即朋友圈列表页上显示的标题	当前小程序名称
query	自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分	当前页面路径携带的参数
imageUrl	自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1	默认使用小程序 Logo

属性	类型	默认值	必填	说明
title	string		是	提示的内容
icon	string	success	否	图标
image	string		否	自定义图标的本地路径，image 的优先级高于 icon
duration	number	1500	否	提示的延迟时间
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透

属性	类型	默认值	必填	说明
title	string		否	提示的标题
content	string		否	提示的内容
showCancel	boolean	true	否	是否显示取消按钮
cancelText	string	取消	否	取消按钮的文字，最多 4 个字符
cancelColor	string	#000000	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	string	确定	否	确认按钮的文字，最多 4 个字符
confirmColor	string	#576B95	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
editable	boolean	false	否	是否显示输入框
placeholderText	string		否	显示输入框时的提示文本

属性	类型	说明
content	string	editable 为 true 时，用户输入的文本
confirm	boolean	为 true 时，表示用户点击了确定按钮
cancel	boolean	为 true 时，表示用户点击了取消

属性	类型	默认值	必填	说明
itemList	Array.		是	按钮的文字数组，数组长度最大为 6
itemColor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数

属性	类型	默认值	必填	说明
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 `content-type` 默认为 `application/json`
timeout	number		否	超时时间，单位为毫秒。默认值为 60000
method	string	GET	否	HTTP 请求方法常用的方式 GET和POST
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

属性	类型	必填	说明
url	string	是	开发者服务器地址
filePath	string	是	要上传文件资源的路径 (本地路径)
name	string	是	文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
formData	Object	否	HTTP 请求中其他额外的 form data
timeout	number	否	超时时间，单位为毫秒
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

属性	类型	默认值	必填	说明
key	string		是	本地缓存中指定的 key
data	any		是	需要存储的内容。只支持原生类型、Date、及能够通过`JSON.stringify`序列化的对象。
encrypt	Boolean	false	否	是否开启加密存储。只有异步的 setStorage 接口支持开启加密存储。开启后，将会对 data 使用 AES128 加密，接口回调耗时将会增加。若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true。此外，由于加密后的数据会比原始数据膨胀1.4倍，因此开启 encrypt 的情况下，单个 key 允许存储的最大数据长度为 0.7MB，所有数据存储上限为 7.1MB

属性	类型	必填	说明
desc	string	是	声明获取用户个人信息后的用途，不超过30个字符
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

微信小程序

一、小程序框架

微信小程序简介

小程序与普通网页开发的区别

小程序技术发展史

体验小程序

微信小程序账号申请

申请帐号

第一步：添加账号信息

第二步：激活邮箱

第三步：信息登记

第四步：主体信息登录

第五步：进入控制台

第六步：获取AppID

微信小程序开发者工具

下载安装

创建项目

小程序目录结构

描述整体的 app

描述各自页面的 page

全局配置_Pages

Pages配置

entryPagePath

快捷生成页面方案

全局配置_window

常用属性

全局配置_tabBar

常用属性

List属性说明

全局配置_tabBar属性

全局配置_常用其他配置

style

sitemapLocation

networkTimeout

debug

debugOptions

permission

app.json 文件配置如下

单页面配置

配置项

全局配置_公共样式

公共样式

尺寸单位

样式导入

全局配置_注册小程序（app.js)

方法说明

全局属性

页面的生命周期函数

页面的生命周期函数

生命周期函数的作用

页面中的Data对象

setData函数

二、小程序组件_基础视图

容器 view

文本 text

图片 image

组件_滑块视图容器

基本实现

Swiper常用属性说明

属性值来源于逻辑文件

组件_滚动视图区域

水平滚动

垂直滚动

常用属性

组件_icon

图标使用

字体图标属性

组件_progress

基本进度条

属性说明

组件_表单

登录页面

组件_button

按钮属性

组件_输入框

实现基本输入框

输入框属性

组件_picker

普通选择器(mode="selector")

多列选择器(mode="multiSelector")

描述整体的 `app`

描述各自页面的 `page`

`app.json` 文件配置如下

容器 `view`

文本 `text`

图片 `image`

普通选择器(mode="`selector`")

多列选择器(mode="`multiSelector`")

时间选择器(mode="`time`")

省市区选择器(mode="`region`")

`currentTarget` 携带参数

`mark` 携带参数

`wx:if` vs `hidden` 区别