- 内嵌 WXS 脚本
xxx.wxml<view>{{m1.toUpper(username)}}</view><wxs module=”m1″>module.exports.toUpper=function(e){return e.toUpperCase()}</wxs>xxx.js
data: {username:”username”}, - 定义外联 WXS 脚本
在 tools文件夹下新建文件为 tools.wxsfunction toLower(str){return str.toLowerCase()}module.exports={toLower:toLower} - 使用外联 WXS 脚本
在WXML 中引入外联的wxs脚本时,必须为 wxs 标签添加 module 和 src 属性,其中:
module 用来指定模块的名称
src 用来指定要引入的脚本的绝对路径
- 监听页面的下拉刷新事件
在页面的.js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件 - 停止下拉刷新事件
当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失。
调用wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新 - 监听上拉触底事件
在页面的.js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件 - 添加loading效果
- 对上拉触底进行节流处理
data:{
isLoding:false
}
getColor:{
this.setData({
isLoding:true
})
wx.request(){
success下面
complete:()=>{
wx.hideLoading()
this.setData({
isLoding:false
})
}
}
}
onReachBottom:function(){
if(this.data.isLoading) return
this.getColors()
}
- 声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数。
参数与路径之间使用?分隔
参数键与参数值用=相连
不同参数用&分隔
代码示例如下:
<navigator url=”/pages/info/info?username=zs&age=22″>导航传参</navigator> - 编程式导航传参
- 在 onLoad 中接收导航参数
通过声明式或编程式导航传参所携带的参数,可以直接在 onLoad 事件中 直接获取到。示例代码
- 小程序中实现页面导航的两种方式
1、声明式导航:在页面上声明一个 navigator 导航组件,通过点击 navigator 组件实现页面跳转
2、编程式导航:调用小程序的导航API,实现页面的跳转 - 声明式导航
tabBar页面指的是被配置为tabBar的页面
在使用 navigator 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中
url 表示要跳转的页面的地址,必须以 / 开头
open-type 表示跳转的方式,必须为 switchTab
示例代码:
<navigator url=”/pages/massage/message” open-type=”switchTab”>导航到消息页面</navigator> - 导航到非 tabBar页面
非tabBar页面指的是没有配置tabBar的页面
在使用 navigator 组件跳转到普通的非 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中
url 表示要跳转的页面的地址,必须以 / 开头
open-type 表示跳转的方式,必须为 navigate
示例代码:
<navigator url=”/pages/massage/message” open-type=”navigate”>导航到消息页面</navigator> - 后退导航
如果要后退上一页面或多级页面,则需要指定 open-type 属性 和 delta 属性,其中:
open-type 的值必须是 navigateBack,表示要进行后退导航
dalta 的值必须是数字,表示要后退的层级
示例代码:
<navigator open-type=”navigateBack” delta=”1″>返回上一页</navigator>
注意:可以省略 delta,默认值是1
1. 编程式导航
1、导航到tabBar页面
调用 wx.switchTab(Object obj)方法,可以跳转到 tabBar页面。其中Object 参数对象的属性列表如下:
2. 导航到非 tabBar页面
调用 wx.navigateTo(Object obj)方法,可以跳转到非tabBar页面。其中Object 参数对象的属性列表如下:
3. 后退导航
调用wx.navigateBack(Object obj)方法,可以返回上一级或多级页面,其中 Object参数对象 可选的属性列表如下:
微信小程序之九宫格布局
页面:
- 小程序中网络数据请求的限制
出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:
1、只能请求 https 类型的接口
2、必须将接口的域名添加到信任列表里(右上角详情—>项目配置–>域名信息) - 发起GET请求
调用微信小程序提供的 wx.request() 方法,可以发起 GET数据请求,代码如下:
xxx.wxml
xxx.wxml
此时需要在页面的 onLoad 事件中调用获取数据的函数,代码如下:
此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS 版本及HTTPS证书 选项
跳过request合法域名的校验。

- 什么是tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。
小程序中通常将其分为:底部 tabBar、顶部 tabBar
注意:tabBar 中只能配置 最少2个,最多5个tab页签,当渲染顶部 tabBar时,不显示 icon,只显示文本 - tabBar 的6个组成部分
- tabBar 节点的配置项
- 每个tab项的配置选项
app.json:
“tabBar”: {“list”: [{“pagePath”: “pages/home/home”,“iconPath”: “/images/home.png”,“selectedIconPath”: “/images/home-active.png”,“text”: “首页”},{“pagePath”: “pages/message/message”,“iconPath”: “/images/message.png”,“selectedIconPath”: “/images/message-active.png”,“text”: “消息”},{“pagePath”: “pages/contact/contact”,“iconPath”: “/images/contact.png”,“selectedIconPath”: “/images/contact-active.png”,“text”: “联系我们”}]},
- 全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
1:pages:记录当前小程序所有的页面存放路径
2、window:全局设置小程序窗口的外观
3、tabBar:设置小程序底部的 tabBar 效果
4、style:是否启用新版的组件样式 - 全局配置-window
1、小程序窗口的组成部分
2、 了解 window 节点 常用的配置项
3、设置导航栏的标题
设置步骤:app.json–>window–>navigationBarTitleText
演示:把导航条上的标题,从默认的 WeChat 修改为 我的第一个微信小程序,效果如图
4、设置导航栏的背景色
设置步骤:app.json–>window–>navigationBarBackgroundColor
演示:把导航栏标题的背景色,从默认的 #fff 修改为 #994855,效果如图
5、设置导航栏的标题颜色
设置步骤:app/json–>window–>navigationBarTextStyle
演示:把导航条上的标题,从默认的 black 修改为 white ,效果如图
6、全局开启下拉刷新功能
设置步骤:app.json–>window–>把 enablePullDownRefresh 设为 true,效果如图
7、 设置下拉刷新时背景颜色
当全局开启下拉刷新功能之后,默认的窗口背景为白色,如果自定义下拉刷新窗口背景色
设置步骤:app.json–>window–>为 backgroundColor 指定16进制的颜色值 #9e9e9e,效果如下
8、 设置下拉刷新时 loading 的样式
当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果
设置步骤:app.json–>window–>为 backgroundTextStyle 指定 dark 值
可选值为 light 和 dark
9、设置上拉触底的距离
概念:上拉加载更多数据
设置步骤:app.json–>window–>为 onReachBottomDistance 设置新值。默认50px,px可省略
- 全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面 - 局部样式
在页面的.wxss 中的样式为局部样式,作用于当前页面
- 什么是WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS - WXSS 与 CSS 的 关系
WXSS具有Css大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
1、rpx 尺寸单位 2、@import 样式导入 - 什么是 rpx 尺寸单位
rpx (responsive pixel) 是微信小程序独有的,用来解决屏适配的尺寸单位。 - rpx 实现原理
rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)。
小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。 - 样式导入
使用WXSS 提供的 @import 语法,可以导入外联的样式表 - @import 的语法格式
@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例:
@import “xxx.wxss”;
1.wx:for
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法如下:
js里data:
1.wx:if
在小程序中,使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块
在 data里 设置属性 sex: 1
true显示,false隐藏
通过 bindinput 可以为文本框绑定输入事件
可以为组件通过 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值
xxx.js
data:{
count:0
},
ChangeCount(){
this.setData({
count: this.data.count +1
})
},
xxx.wxml

- 什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
- 小程序中常用的事件 (更多…)
- 数据绑定的基本原则
1. 在data中定义数据
2. 在WXML中使用数据 - 在data中定义页面的数据
在页面对应的.js文件中,数据定义到data对象中即可。
- Mustache 语法的格式
在data中的数据绑定到页面中渲染,使用Mustache 语法(双大括号)将变量名包起来即可。语法格式如下: (更多…)
- 小程序API概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。 - 小程序API的3大分类
小程序官方把api分为了如下3大类:
1. 事件监听api:
特点:以on开头,用来监听某些事件的触发。
举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
2. 同步api
特点1:以Sync结尾的api都是同步api
特点2:同步api的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync(‘key’,’value’)向本地存储中写入内容
3. 异步api
特点:类似于jQuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果
举例:wx.request() 发起网络请求,通过success 回调函数接收数据
- 小程序中组件的分类
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。
官方把小程序的组件分为9大类,分别是:
1. 视图容器、2. 基础内容、3.表单组件、4.导航组件、5.媒体组件、6.map地图组件、7.canvas画布组件、8.开放能力、9.无障碍访问 - 常用的视图容器类组件
1. view:普通视图区域、类似于HTML中的div,是一个块级元素,常用来实现页面的布局效果
2. scroll-view:可滚动的视图区域,常用来实现滚动列表效果 (更多…)
- 小程序启动的过程
1. 把小程序的代码包下载到本地
2.解析 app.json 全局配置文件
3. 执行 app.js 小程序入口文件,调用 App()创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成 - 小程序页面渲染的过程
1. 加载解析页面的 .json配置文件
2. 加载页面的 .wxml 模板 和 .wxss 样式
3. 执行页面的.js文件,调用 Page()创建页面实例
4. 页面渲染完成