微信小程序

微信小程序简介：

微信 小程序，简称 小程序 ，英文名 Mini Program ，是一种不需要下载安装即可使用的 应用 ，它实现

了应用 “ 触 手 可 及 ” 的梦想，用户扫一扫或搜一下即可打开应用

小程序开发：

微信官方文档地址： https://developers.weixin.qq.com/miniprogram/dev/framework/

微信小程序起步

1.1注册微信小程序账号

注册教程 : 参考小程序注册及开发工具安装 .PPT

此处，留出 15 分钟时间给学生注册账号

1.2获取appid

教程参考小程序注册及开发工具安装 .PPT

1.3下载开发工具

推荐下载和安装最新的稳定版（ Stable Build ）的微信开发者工具，下载页面的链接如下：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装步骤参考：小程序注册及开发工具安装 .PPT

1.4创建一个小程序

1.4.1创建步骤

创建步骤参考：小程序注册及开发工具安装 .PPT

1.4.2小程序目录结构

（1）基本结构

 

 （2）小程序页面组成部分

小程序官方建议把所有小程序的页面，都存放在pages 目 录 中 ，

 

1.5josn配置文件

1.5.1json配置文件作用

josn是一种数据格式在实际开发中，JSON 总是以配 置 文 件的形式出现。小程序项目中也不例 外：通过不同的 .json配置文件，可以对小程序项目进行不同级别的配置。

1.5.2app.json

app.json 是当前小程序的 全 局 配 置 ，包括了小程序的 所 有 页 面 路 径 、 窗 口 外 观 、 界 面 表 现 、 底 部 等。 Demo 项目里边的 app.json 配置内容如下：

 语法及指令

wxml语法

data定义数据

pages({ data:{} })

渲染

<view>{{要绑定的数据名称}}</view>

mustache

1.绑定内容

定义数据

pages({ data:{info:'hello world' } })

渲染

<view>{{ info }}</view>

2.属性绑定：图片

pages({ data:{ imgSrc:'http://61.182.100.50:8999/images/index_new/d_banner_school.gif' } })

调用图片

<!--mode = "widthFix" 表示图片宽度固定，高度自适应--> <image src="{{imgSrc}}" mode="widthFix"></image>

3.三元运算

在 data 中定义一个 10 以内的随机数

pages({ data:{randNumber:Math.random()*10 // 生成10以内的随机数 } })

数据渲染

<view>{{randNumber >=5 ?'随机数大于或等于5':'随机数小于5'}}</view>

4.算数运算

js定义数据

pages({ data:{randNumber:Math.random().toFixed(2) // 生成一个带两位效数的随机数 } })

数据渲染

<view>{{ randNumber* 100 }}</view>

5.总结

不论以上哪种数据方式绑定，都可以执行一些简单的表达式，不可知性语句块

条件渲染

1.wx:if

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

<!--页面结构中代码 condition为data中定义的数据(一般为布尔型数据)--> <view wx:if="{{condition}}">true</view>

2.wx:elif

当有多个条件时，可配合 wx:if 指令 完成业务逻辑

<view wx:if="{{type1 ===1}}">男</view> <view wx:elif="{{type1 ===2}}">女</view> <view wx:else>保密</view>

注意：花括号与双引号之间不要有空格

3.wx:else

与 wx:if 指令一起使用，表示 wx:if 条件为假的时候显示的内容

<view wx:if="{{condition}}">true</view> <view wx:else>false</view>

4.block标签

如果要 一 次 性 控 制 多 个 组 件 的 展 示 与 隐 藏 ，可以使用一个 <block></block> 标签将多个组件包装 起来，并在 标签上使用 wx:if 控制属性，示例如下：

<block wx:if="true"> <view>组件1</view> <view>组件2</view> </block>

注 意    ： <block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲

染。

5.hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：

<view hidden="{{condition}}"> 条件为true 隐藏，条件为 false 显示 </view>

6.wx:if与hidden的对比

运行方式不同

wx:if以动 态 创 建 和 移 除 元 素 方式，控制元素的展示与隐藏

hidden 以切 换 样 式 (display:none/block;)，控制元素的显示与隐藏

使用建议

频 繁 切 换时，建议使用hidden

控 制 条 件 复 杂 时，建议使用wx:if

搭配 wx:elif 、 wx:else 进行展示与隐藏的切换

列表渲染

  wx:for 基础用法

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{arr}}"> <text>当前循环的值为:{{item}},索引为：{{index}}</text> </view>

手动指定索引和当前项的变量名

使用 wx:for-index可以指定当 前 循 环 项 的 索 引的变量名

使用 wx:for-item可以指定当 前 项 的变量名

<view wx:for="{{arr}}" wx:for-item="list" wx:for-index="i"> <text>当前循环的值为:{{list}},索引为：{{i}}</text> </view>

wx:key 的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定

唯一的 key 值，从而提 高 渲 染 的 效 率，示例代码如下：

<view wx:for="{{arr}}" wx:for-item="list" wx:for-index="i" wx:key="i"> <text>当前循环的值为:{{list}},索引为：{{i}}</text> </view>

事件绑定

1. 什么是事件

事件是渲 染 层 到 逻 辑 层 的 通 讯 方 式 。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业 务的处理

2. 小程序中常用的事件

 

3. 事件对象的常用属性列表

 

4. target与currentTaget区别

target 是触 发 该 事 件 的 源 头 组 件 ，而 currentTarget 则是当 前 事 件 所 绑 定 的 组 件 。举例如下： 

5. bindtap语法格式

<button type="primary" bindtap="testTap">tap事件</button> // 页面js中的代码 pages({ data:{}, testTap(){ console.log('测试事件') }})

pages({ testTap(e){ console.log(e) } })

 6. setData方法

通过调用 this.setData(dataObject)方法，可以给页面 data 中的数据重新赋值，示例如下：

pages({ data:{count:1; },// 用于触发某个事件时，调用的方法 changeCount(){ // 通过this.setData() 修改data中的值 this.setData({ count:this.data.count + 1 // 修改count变量值 }) } })

7. 事件传参

<!--错误的传参方法--> <button type="primary" bindtap="testTap(123)">事件传参</button>

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

在事件处理函数中，通过event.target.dataset. 参 数 名 即可获取到具 体 参 数 的 值，示例代码如下：

btnHandle(event){ // dataset 是一个对象，包含了所有通过data-*传递过来的参数项 console.log(event.target.dataset) // 通过dataset 可以访问到具体参数的值 console.log(event.target.dataset.info) }

8. bindinput 语法格式

<input bindinput="inputHandle"></input>

inputHandle(e){ // e.detail.value 是变化过后，文本最新的值 console.log(e.detail.value) }

9. 案例： input 与 data 数据同步

描述： 在 input 框中输入的内容与 data 中定义的数据保持同步

案例分析

① 在 data 中定义保持同步的变量

② 将 data 中的数据渲染到页面结构中

③ 页面样式优化

④ 绑定 input 事件处理函数

绑定的处理函数中获取输入框的值，并通过 setData() 修改 data 变量值

代码展示

1. 页面 .wxml 文件代码

<input type="text" bindinput="inputHandle" /> <view>输入框中的值：{{inp}} </view>

2. 页面 .wxss 文件代码

input{margin-top: 10rpx; border:1px solid #f00; }

3. 页面 .js 文件代码

pages({ data:{inp:'' }inputHandle(e){ // 获取输入框中输入的数据 var newValue = e.detail.value; this.setData({ inp:newValue }) })

WXSS模板样式

1. WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时， WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序

的开发。与 CSS 相比， WXSS 扩展的特性有：

rpx 单位

@import 样式导入

rpx 尺寸单位

rpx（responsive pixel）是微信小程序独有的，用来解 决 屏 适 配 的 尺 寸 单 位 。

rpx的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有

设备的屏幕，在宽 度 上 等 分 为 750份 （即：当 前 屏 幕 的 总 宽 度 为750rpx

）。

在较小的设备上，1rpx 所代表的宽度较小

在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实

现屏幕适配

rpx与px之间的单位换算

在 iPhone6 上，屏幕宽度为375px，共有750个 物 理 像 素，等分为750。则：

750rpx=375px=750物 理 像 素

1rpx=0.5px=1物 理 像 素

 样式导入

/** common.css **/ .small-p{ padding:5px; }/** app.wxss **/ @import "common.wxss"; .middle-p{ margin:15px; }

1. 全局样式

定义在

中的样式为全 局 样 式 ，作用于每一个页面。

2. 局部样式

在页 面 的

文件中定义的样式为局 部 样 式 ，只作用于当前页面。

注意：

① 当局部样式和全局样式冲突时，根据就 近 原 则 ，局部样式会覆盖全局样式

② 当局部样式的权 重 大 于 或 等 于 全局样式的权重时，才会覆盖全局的样式

配置项介绍

全局配置

小程序根目录下的app.json文件是小程序的全 局 配 置 文 件 。常用的配置项如下：

pages 记录当前小程序所有页面的存放路径

window全局设置小程序窗口的外观

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

style 是否启用新版的组件样式

 配置项-window

window节点常用的配置项

配置项 -tabbar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

底部 tabBar

顶部 tabBar

 

 

tabBar 中只能配置最少 2 个，最多 5 个 tab 页签

当渲染顶部 tabBar 时，不显示 icon ，只显示文本