微信小程序基础知识 || 如何让微信开发者工具显示切后台按键
文章目录
- 初识
- 小程序与普通网页开发的区别
- 体验小程序
- 获取AppID
- 开发者工具下载
- 在模拟器上查看项目效果
- 在真机上预览项目效果
- 主界面的 5 个组成部分
- 常用快捷键
- 宿主环境简介
- 通信模型
- 运行机制
- 页面渲染的过程
- 初始时各文档情况
- MINA原生框架目录结构
- JSON 配置文件
- 配置文件.json的相关操作
- 新建小程序页面
- 修改项目首页
- WXML
- WXML 和 HTML 的区别
- WXSS
- WXSS 和 CSS 的区别
- 小程序中的 .js 文件
- 组件
- 小程序中组件的分类
- 常用的视图容器类组件
- view 组件的基本使用
- scroll-view 组件的基本使用
- 设置横向滚动
- 设置竖向滚动
- scrolltoupper和scrolltolower事件
- bindscroll事件
- 示例
- swiper 和 swiper-item 组件的基本使用
- swiper 组件的常用属性
- 常用的基础内容组件(text、rich-text)
- text 组件的基本使用
- rich-text 组件的基本使用
- 受信任的HTML节点及属性
- 其它常用组件
- button 按钮的基本使用
- image 组件的基本使用
- image 组件的 mode 属性
- icon组件
- 小程序 API
- 项目成员的组织结构
- 不同项目成员对应的权限
- 小程序的版本
- 小程序发布上线的整体步骤
- 上传代码
- 在后台查看上传之后的版本
- 发布
- 基于小程序码进行推广
- 数据绑定
- 在 data 中定义页面的数据
- Mustache 语法的格式
- 动态绑定内容
- 动态绑定属性
- 三元运算
- 算数运算
- 事件绑定
- 小程序中常用的事件
- 事件对象的属性列表
- 获取元素上的数据
- 事件冒泡和事件捕获
- target 和 currentTarget 的区别
- bindtap 的语法格式
- 在事件处理函数中为 data 中的数据赋值
- 点击按钮实现加1减1
- 事件传参
- bindinput 的语法格式
- 实现文本框和 data 之间的数据同步
- 条件渲染
- wx:if
- 结合 < block> 使用 wx:if
- hidden
- wx:if 与 hidden 的对比
- 列表渲染
- wx:for
- 手动指定索引和当前项的变量名(仅作了解)
- wx:key 的使用
- WXSS 模板样式
- WXSS 和 CSS 的关系
- rpx
- rpx 与 px 之间的单位换算(仅作了解)
- 样式导入(@import 的语法格式)
- 全局样式
- 局部样式
- 全局配置
- 配置项window
- 配置项tabBar
- tabBar 的 6 个组成部分
- tabBar小案例
- project.config.json 文件
- sitemap.json 文件
- 页面的 .json 配置文件
- 网络数据请求
- 配置 request 合法域名
- 发起 GET 请求
- 发起 POST 请求
- 在页面刚加载时请求数据
- 跳过 request 合法域名校验
- 关于跨域和 Ajax 的说明
- 本地生活小案例
- 页面导航
- 声明式导航
- 导航到 tabBar 页面
- 导航到非 tabBar 页面
- 后退导航
- 编程式导航
- 导航到 tabBar 页面
- 导航到非 tabBar 页面
- 后退导航
- 导航传参
- 声明式导航传参
- 编程式导航传参
- 在 onLoad 中接收导航参数
- 页面事件
- 下拉刷新事件
- 监听页面的下拉刷新事件
- 停止下拉刷新的效果
- 上拉触底事件
- 监听页面的上拉触底事件
- 配置上拉触底距离
- 上拉触底案例
- 展开运算符...
- wx.showLoading(Object object)
- 对上拉触底进行节流处理
- App生命周期
- onLaunch(options)
- onShow(options)
- onHide():
- onError(String error)
- getApp()
- 应用的生命周期函数
- 页面的生命周期函数
- Page对象
- Page对象作用
- 数据渲染
- Page生命周期函数
- onLoad(Object query)
- onShow()
- onReady()
- onHide()
- onUnload()
- 路由
- getCurrentPages()
- WXS 脚本
- wxs 和 JavaScript 的关系(仅作了解)
- 内嵌 wxs 脚本
- 定义外联的 wxs 脚本
- 使用外联的 wxs 脚本
- 本地生活(列表页面)案例
- 网络请求
- 用户授权
- 过期的授权方式
- 新的授权方式
- 微信小程序开发——this指针的指向问题
- (1)this指向
- (2)探究小程序中的this是怎么指的
- Promise风格调用
- 模块导入导出(import、export)
- 自定义组件
- 创建组件
- 使用组件
- 给自定义组件添加属性
- 在组件中添加节点
- 组件样式注意事项
- 事件
- 组件本身的生命周期
- 监听组件所在页面的生命周期
- 如何让微信开发者工具显示切后台按键
- 之后我会持续更新,如果喜欢我的文章,请记得一键三连哦,点赞关注收藏,你的每一个赞每一份关注每一次收藏都将是我前进路上的无限动力 !!!↖(▔▽▔)↗感谢支持!
初识
小程序与普通网页开发的区别
体验小程序
获取AppID
开发者工具下载
在模拟器上查看项目效果
在真机上预览项目效果
主界面的 5 个组成部分
常用快捷键
宿主环境简介
宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:
Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
通信模型
小程序中的通信模型分为两部分:
① 渲染层和逻辑层之间的通信:由微信客户端进行转发
② 逻辑层和第三方服务器之间的通信:由微信客户端进行转发
运行机制
页面渲染的过程
初始时各文档情况
MINA原生框架目录结构
First and foremost,多看官方文档总是不会错的
JSON 配置文件
JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。小程序项目中也不例外:通过不同的 .json 配置文件,可以对小程序项目进行不同级别的配置。
小程序项目中有 4 种 json 配置文件,分别是:
① 项目根目录中的 app.json 配置文件
② 项目根目录中的 project.config.json 配置文件
③ 项目根目录中的 sitemap.json 配置文件
④ 每个页面文件夹中的 .json 配置文件
配置文件.json的相关操作
新建小程序页面
只需要在 app.json -> pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件(记得按ctrl + s)
修改项目首页
只需要调整 app.json -> pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染
WXML
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的 HTML
WXML 和 HTML 的区别
WXSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的 CSS。
WXSS 和 CSS 的区别
小程序中的 .js 文件
一个项目仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。
组件
小程序中组件的分类
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
常用的视图容器类组件
view 组件的基本使用
微信官方文档指路
相当于是传统网页中的div,可以用来存放任何的其他子元素。
wxml
<!--index.wxml-->
<view class="container"><view>A</view><view>B</view><view>C</view>
</view>
wxss
/**index.wxss**/
.container {display: flex;flex-direction: row;justify-content: space-around;padding: 0;
}.container view {width: 100px;height: 100px;text-align: center;line-height: 100px;
}.container view:nth-child(1) {background-color: lightgreen;
}.container view:nth-child(2) {background-color: lightskyblue;
}.container view:nth-child(3) {background-color: lightcoral;
}
scroll-view 组件的基本使用
有时候我们的一些视图在手机指定的宽度和高度不够存放。那么可以放在scroll-view中。
设置横向滚动
index.wxss代码:
.scroll-x-view{width: 100%;height: 100px;background: gray;white-space: nowrap;
}.scroll-x-view .scroll-view-item{width: 200px;height: 100px;
}
.bg_red{background: red;
}
.bg_blue{background: blue;
}
.bg_green{background: green;
}
.bg_yellow{background: yellow;
}
设置竖向滚动
1.给scroll-view添加scroll-y="true"属性。
2.给scroll-view设置高度。
scrolltoupper和scrolltolower事件
bindscroll事件
示例
wxml
<!--index.wxml-->
<scroll-view class="container" scroll-y="true"><view>A</view><view>B</view><view>C</view>
</scroll-view>
wxss
/**index.wxss**/
.container {border: 3px solid red;padding: 0;width: 100px;/* 纵向滚动就得加强制性的高度 */height: 200px;
}.container view {width: 100px;height: 100px;text-align: center;line-height: 100px;
}.container view:nth-child(1) {background-color: lightgreen;
}.container view:nth-child(2) {background-color: lightskyblue;
}.container view:nth-child(3) {background-color: lightcoral;
}
swiper 和 swiper-item 组件的基本使用
wxml
<!--index.wxml-->
<swiper class="swiper-container"><swiper-item><view class="item">A</view></swiper-item><swiper-item><view class="item">B</view></swiper-item><swiper-item><view class="item">C</view></swiper-item>
</swiper>
wxss
/**index.wxss**/
.swiper-container {height: 150px;
}.item {height: 100%;line-height: 150px;text-align: center;
}swiper-item:nth-child(1) .item {background-color: lightgreen;
}swiper-item:nth-child(2) .item {background-color: lightsalmon;
}swiper-item:nth-child(3) .item {background-color: lightgoldenrodyellow;
}
swiper 组件的常用属性
详细看开发文档
wxml
<!--index.wxml-->
<swiper class="swiper-container" indicator-dots="{{true}}" indicator-color="white" indicator-active-color="#5534A5" autoplay="{{true}}" interval="3000" circular="{{true}}"><swiper-item><view class="item">A</view></swiper-item><swiper-item><view class="item">B</view></swiper-item><swiper-item><view class="item">C</view></swiper-item>
</swiper>
wxss
/**index.wxss**/
.swiper-container {height: 150px;
}.item {height: 100%;line-height: 150px;text-align: center;
}swiper-item:nth-child(1) .item {background-color: lightgreen;
}swiper-item:nth-child(2) .item {background-color: lightsalmon;
}swiper-item:nth-child(3) .item {background-color: lightgoldenrodyellow;
}
常用的基础内容组件(text、rich-text)
text 组件的基本使用
微信官方文档指路
除了以上官方文档中描述的,还需要注意:
1.text组件是行内元素,在布局的时候不会占据一整行。
2.给text组件设置宽高是没有效果的,他的宽高是根据里面的文字来的。
通过 text 组件的 selectable 属性,实现长按选中文本内容的效果
wxml
<!--index.wxml-->
<view><text selectable="{{true}}">She is confident</text>
</view>
rich-text 组件的基本使用
通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构
wxml
<!--index.wxml-->
<view><text selectable="{{true}}">She is confident</text>
</view><rich-text nodes="<h1 style='color: red'>标题</h1>"></rich-text>
受信任的HTML节点及属性
全局支持class和style属性,不支持id属性。
其它常用组件
button 按钮的基本使用
wxml
<!--index.wxml-->
<button>默认按钮</button>
<button type="primary">主色按钮</button>
<button type="warn">警告按钮</button>
<rich-text class="" nodes="<hr>">
</rich-text>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色按钮</button>
<button type="warn" size="mini">警告按钮</button>
<rich-text class="" nodes="<hr>">
</rich-text>
<button size="mini" plain="{{true}}">默认按钮</button>
<button type="primary" size="mini" plain="{{true}}">主色按钮</button>
<button type="warn" size="mini" plain="{{true}}">警告按钮</button>
image 组件的基本使用
wxml
<!--index.wxml-->
<image src="../../images/villier.jpg" mode="aspectFill"></image>
wxss
/**index.wxss**/
image {border: 1px solid orchid;
}
image 组件的 mode 属性
image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
icon组件
微信官方文档指路
小程序 API
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。
项目成员的组织结构
不同项目成员对应的权限
小程序的版本
小程序发布上线的整体步骤
一个小程序的发布上线,一般要经过上传代码 -> 提交审核 -> 发布这三个步骤
上传代码
在后台查看上传之后的版本
发布
基于小程序码进行推广
数据绑定
在 data 中定义页面的数据
Mustache 语法的格式
wxml
<!--index.wxml-->
<image src="../../images/villier.jpg" mode="aspectFill"></image>
<view>{{info}}</view>
js
// index.js
Page({data: {info: 'Aloha'}
})
动态绑定内容
动态绑定属性
三元运算
算数运算
事件绑定
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
小程序中常用的事件
事件对象的属性列表
获取元素上的数据
事件冒泡和事件捕获
微信官方文档
target 和 currentTarget 的区别
bindtap 的语法格式
在事件处理函数中为 data 中的数据赋值
wxml
<!--index.wxml-->
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="countChange">+1</button>
js
// index.js
Page({data: {info: 'Aloha',randomNum: Math.random().toFixed(6),count: 0},btnTapHandler(e) {console.log(e)},countChange() {this.setData({count: this.data.count + 1})}
})
点击按钮实现加1减1
wxml
<!--index.wxml-->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" type="primary" data-operation="{{1}}">+</button>
<button bindtap="handletap" type="primary" data-operation="{{-1}}">-</button>
<view>{{num}}
</view>
js
// index.js
Page({data: {num: 0},handleInput(e) {// console.log(e.detail.value);this.setData({num: e.detail.value})}, handletap(e) {const operation = e.currentTarget.dataset.operationthis.setData({num: this.data.num + operation})}
})
事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:
因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。
可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:
wxml
<!--index.wxml-->
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="countChange">+1</button>
<button type="primary" bindtap="btnTap2" data-info="{{3}}">+2</button>
js
// index.js
Page({data: {info: 'Aloha',randomNum: Math.random().toFixed(6),count: 0},btnTapHandler(e) {console.log(e)},countChange() {this.setData({count: this.data.count + 1})},btnTap2(e) {this.setData({count: this.data.count + e.target.dataset.info})}
})
bindinput 的语法格式
实现文本框和 data 之间的数据同步
条件渲染
wx:if
wxml
<!--index.wxml-->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
js
// index.js
Page({data: {info: 'Aloha',randomNum: Math.random().toFixed(6),count: 0,msg: 'LMLY',type: 1},btnTapHandler(e) {console.log(e)},countChange() {this.setData({count: this.data.count + 1})},btnTap2(e) {this.setData({count: this.data.count + e.target.dataset.info})},inputHandler(e) {this.setData({msg: e.detail.value})}
})
结合 < block> 使用 wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个 < block></ block > 标签将多个组件包装起来,并在< block> 标签上使用 wx:if 控制属性,示例如下:
注意: < block> 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
hidden
在小程序中,直接使用 hidden=“{{ condition }}” 也能控制元素的显示与隐藏:
wx:if 与 hidden 的对比
列表渲染
wx:for
js
// index.js
Page({data: {info: 'Aloha',randomNum: Math.random().toFixed(6),count: 0,msg: 'LMLY',type: 1,flag: true,arr: ['apple', 'HUAWEI', 'MI']},btnTapHandler(e) {console.log(e)},countChange() {this.setData({count: this.data.count + 1})},btnTap2(e) {this.setData({count: this.data.count + e.target.dataset.info})},inputHandler(e) {this.setData({msg: e.detail.value})}
})
手动指定索引和当前项的变量名(仅作了解)
wx:key 的使用
类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率,示例代码如下:
WXSS 模板样式
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS
WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
- rpx 尺寸单位
- @import 样式导入
rpx
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。
- 在较小的设备上,1rpx 所代表的宽度较小
- 在较大的设备上,1rpx 所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
rpx 与 px 之间的单位换算(仅作了解)
官方建议:开发微信小程序时,设计师可以用 iPhone6 作为视觉稿的标准。
开发举例:在 iPhone6 上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为 200rpx 和 40rpx。
样式导入(@import 的语法格式)
使用 WXSS 提供的 @import 语法,可以导入外联的样式表。
@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例如下:
全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面
局部样式
全局配置
小程序根目录下的app.json是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。
Demo 项目里边的 app.json 配置内容如下:
简单了解下这 4 个配置项的作用:
① pages:用来记录当前小程序所有页面的路径
② window:全局定义小程序所有页面的背景色、文字颜色等
③ style:全局定义小程序组件所使用的样式版本
④ sitemapLocation:用来指明 sitemap.json 的位置
注意!json中是不能写注释的!!!
配置项window
详情请参考微信官方文档
配置项tabBar
tabBar 的 6 个组成部分
tabBar小案例
tabBar的页面路径必须在pages配置里的前面,否则不生效
project.config.json 文件
project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:
- setting 中保存了编译相关的配置
- projectname 中保存的是项目名称
- appid 中保存的是小程序的账号 ID
sitemap.json 文件
页面的 .json 配置文件
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置
小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json 的 window 中相同的配置项
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。
一般开发的时候不要给"enablePullDownRefresh": true,只会给个别需要的页面"enablePullDownRefresh": true
网络数据请求
配置 request 合法域名
需求描述:假设在自己的微信小程序中,希望请求 https://www.escook.cn/ 域名下的接口
配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
发起 GET 请求
发起 POST 请求
wxml
<!--index.wxml-->
<button type="primary" bindtap="getInfo">发起GET请求</button>
<button type="primary" bindtap="postInfo">发起POST请求</button>
js
// index.js
Page({data: {info: 'Aloha',randomNum: Math.random().toFixed(6),count: 0,msg: 'LMLY',type: 1,flag: true,arr: ['apple', 'HUAWEI', 'MI'],userList: [{id: 1, name: 'red'},{id: 2, name: 'yellow'},{id: 3, name: 'white'}]},btnTapHandler(e) {console.log(e)},countChange() {this.setData({count: this.data.count + 1})},btnTap2(e) {this.setData({count: this.data.count + e.target.dataset.info})},inputHandler(e) {this.setData({msg: e.detail.value})},getInfo() {wx.request({url: 'https://www.escook.cn/api/get',method: 'GET',data: {name: 'Rihood',age: 21},success: (res) => {console.log(res)}})},postInfo() {wx.request({url: 'https://www.escook.cn/api/post',method: 'POST',data: {name: 'Rihood',age: 21},success: (res) => {console.log(res)}})}
})
在页面刚加载时请求数据
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数,示例代码如下:
跳过 request 合法域名校验
关于跨域和 Ajax 的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络数据请求”。
本地生活小案例
app.json
{"pages": ["pages/index/index","pages/message/message","pages/contact/contact"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#FFEBC1","navigationBarTitleText": "生活助手","navigationBarTextStyle": "black","enablePullDownRefresh": false,"backgroundColor": "#B9F8D3","backgroundTextStyle": "dark"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./images/tabs/home.png","selectedIconPath": "./images/tabs/home-active.png"}, {"pagePath": "pages/message/message","text": "消息","iconPath": "./images/tabs/message.png","selectedIconPath": "./images/tabs/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "./images/tabs/contact.png","selectedIconPath": "./images/tabs/contact-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}
index.wxml
<!--index.wxml-->
<swiper indicator-dots="true" circular="true" autoplay="true" interval="3000"><swiper-item wx:for="{{swiperList}}" wx:key="id"><image src="{{item.image}}"></image></swiper-item>
</swiper><view class="grid-list"><view class="grid-item" wx:for="{{gridList}}" wx:key="id"><image src="{{item.icon}}"></image><text>{{item.name}}</text></view>
</view><view class="img-box"><image src="../../images/link-01.png" mode="widthFix"></image><image src="../../images/link-02.png" mode="widthFix"></image>
</view>
index.wxss
/**index.wxss**/
swiper {height: 350rpx;
}swiper image {width: 100%;height: 100%;
}.grid-list {display: flex;flex-wrap: wrap;
}.grid-item{display: flex;width: 33.3333%;height: 200rpx;flex-direction: column;align-items: center;justify-content: center;border-right: 1px solid #efefef;border-bottom: 1px solid #efefef;box-sizing: border-box;
}.grid-item:nth-child(3n) {border-right: 0;
}.grid-item:nth-child(n+7) {border-bottom: 0;
}.grid-item image {width: 60rpx;height: 60rpx;
}.grid-item text {margin-top: 10rpx;font-size: 24rpx;
}.img-box {display: flex;padding: 20rpx 10rpx;justify-content: space-around;
}.img-box image {width: 45%;
}
index.js
// index.js
Page({data: {swiperList: [],gridList: []},onLoad: function (options) {this.getSwiperList()this.getGridList()},getSwiperList() {wx.request({url: 'https://www.escook.cn/slides',method: 'GET',success: (res) => {console.log(res)this.setData({swiperList: res.data})}})},getGridList() {wx.request({url: 'https://www.escook.cn/categories',method: 'GET',success: (res) => {this.setData({gridList: res.data})}})}
})
页面导航
页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种:
① < a> 链接
② location.href
声明式导航
导航到 tabBar 页面
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 < navigator> 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:
- url 表示要跳转的页面的地址,必须以 / 开头
- open-type 表示跳转的方式,必须为 switchTab
示例代码如下:
导航到非 tabBar 页面
非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 < navigator> 组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中:
- url 表示要跳转的页面的地址,必须以 / 开头
- open-type 表示跳转的方式,必须为 navigate
示例代码如下:
后退导航
如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:
- open-type 的值必须是 navigateBack,表示要进行后退导航
- delta 的值必须是数字,表示要后退的层级
示例代码如下:
编程式导航
导航到 tabBar 页面
调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下:
导航到非 tabBar 页面
调用 wx.navigateTo(Object object) 方法,可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下:
后退导航
调用 wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下:
导航传参
声明式导航传参
编程式导航传参
调用 wx.navigateTo(Object object) 方法跳转页面时,也可以携带参数,代码示例如下:
在 onLoad 中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到,示例代码如下:
info.js
// pages/info/info.js
Page({/*** 页面的初始数据*/data: {query: {}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options)this.setData({query: options})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
页面事件
下拉刷新事件
下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
监听页面的下拉刷新事件
在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
例如,在页面的 wxml 中有如下的 UI 结构,点击按钮可以让 count 值自增 +1:
wxml
<!--pages/message/message.wxml-->
<text>pages/message/message.wxml</text><view>count值是:{{count}}</view>
<button type="primary" bindtap="addCount">+1</button>
js
// pages/message/message.js
Page({/*** 页面的初始数据*/data: {count: 0},addCount() {this.setData({count: this.data.count + 1})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {console.log('触发了message页面')this.setData({count: 0})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
停止下拉刷新的效果
当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下:
上拉触底事件
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
监听页面的上拉触底事件
在页面的 .js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下:
配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。
上拉触底案例
展开运算符…
wx.showLoading(Object object)
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
对上拉触底进行节流处理
wxml
<!--pages/contact/contact.wxml-->
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>
wxss
/* pages/contact/contact.wxss */
.num-item {border: 1px solid #efefef;border-radius: 8rpx;line-height: 200rpx;margin: 15rpx;text-align: center;text-shadow: 0 0 5rpx #666;box-shadow: 2rpx 2rpx 6rpx #aaa;
}
js
// pages/contact/contact.js
Page({/*** 页面的初始数据*/data: {colorList: [],isloading: false},getColors() {this.setData({isloading: true})wx.showLoading({title: '数据加载中...'})wx.request({url: 'https://www.escook.cn/api/color',method: 'GET',success: ({data:res}) => { // data属性并重命名为resthis.setData({colorList: [...this.data.colorList, ...res.data]//展开运算符:将原数据与获取的当前页数据合并})},complete: () => {wx.hideLoading()this.setData({isloading: false})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getColors()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.isloading)returnthis.getColors()},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
App生命周期
微信官方文档指路
onLaunch(options)
调用时机:小程序被加载完毕的时候调用。这个方法一般用来做一些初始化的事情。比如获取用户信息、获取历史缓存信息、获取小程序打开来源等。
onShow(options)
onHide():
1.调用时机:小程序被切换到后台(包括微信自身被切换到后台或者小程序暂时被切换到后台时)。可以在这个方法中做一些数据的保存。
2.参数:无。
onError(String error)
1.调用时机:小程序发生脚本错误,或者 api 调用失败时触发。在小程序发生错误的时候,会把错误信息发送到这个函数中,所以可以在这个函数中做一些错误收集。
2.参数:error。
getApp()
微信官方文档指路
生命周期(Life Cycle)是指一个对象从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。
其中,页面的生命周期范围较小,应用程序的生命周期范围较大,如图所示:
应用的生命周期函数
页面的生命周期函数
Page对象
微信官方文档指路
Page对象作用
Page(Object)
函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
数据渲染
<view>{{person.username}}</view>
Page生命周期函数
onLoad(Object query)
页面加载时触发。一个页面只会调用一次,可以在 onLoad的参数中获取打开当前页面路径中的参数。一般建议在这个函数中做一些页面的数据初始化工作。
onShow()
页面显示/切入前台时触发。比如新推入了一个新的页面,那么原来的页面就处于后台,这时候如果把新页面又移除掉,那么下面的页面就会调用onShow方法。
onReady()
页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互了。对界面内容进行设置的 API 如wx.setNavigationBarTitleText,比较合适在这个里面执行。
onHide()
页面隐藏/切入后台时触发。如navigateTo或底部tab切换到其他页面,小程序切入后台等。
onUnload()
页面卸载时触发。如redirectTo或navigateBack到其他页面时。
路由
微信官方文档指路
在小程序中所有页面的路由全部由框架进行管理。getCurrentPages()可以获取当前状态下的页面栈。
getCurrentPages()
WXS 脚本
WXS(WeiXin Script)是小程序独有的一套脚本语言,结合 WXML,可以构建出页面的结构。
wxml 中无法调用在页面的 .js 中定义的函数,但是,wxml 中可以调用 wxs 中定义的函数。因此,小程序中wxs 的典型应用场景就是“过滤器”。
wxs 和 JavaScript 的关系(仅作了解)
内嵌 wxs 脚本
wxs 代码可以编写在 wxml 文件中的 < wxs> 标签内,就像 Javascript 代码可以编写在 html 文件中的 < script>
标签内一样。
wxml 文件中的每个 < wxs>< /wxs> 标签,必须提供 module 属性,用来指定当前 wxs 的模块名称,方便在wxml 中访问模块中的成员:
js
// pages/message/message.js
Page({/*** 页面的初始数据*/data: {count: 0,userName: 'rihood'},addCount() {this.setData({count: this.data.count + 1})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {console.log('触发了message页面')this.setData({count: 0})wx.stopPullDownRefresh()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
定义外联的 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下:
使用外联的 wxs 脚本
本地生活(列表页面)案例
app.json
{"pages": ["pages/index/index","pages/message/message","pages/contact/contact","pages/shoplist/shoplist","pages/info/info"],"window": {"backgroundColor": "#B9F8D3","backgroundTextStyle": "dark","navigationBarBackgroundColor": "#FFEBC1","navigationBarTitleText": "生活助手","navigationBarTextStyle": "black","enablePullDownRefresh": false},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./images/tabs/home.png","selectedIconPath": "./images/tabs/home-active.png"}, {"pagePath": "pages/message/message","text": "消息","iconPath": "./images/tabs/message.png","selectedIconPath": "./images/tabs/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "./images/tabs/contact.png","selectedIconPath": "./images/tabs/contact-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}
split() 方法用于把一个字符串分割成字符串数组。
语法:
stringObject.split(separator,howmany)
tool.wxs
function splitPhone(str) {if (str.length != 11)return strvar arr = str.split('')arr.splice(3, 0, '-')arr.splice(8, 0, '-')return arr.join('')
}module.exports = {splitPhone: splitPhone
}
shoplist.js
// pages/shoplist/shoplist.js
Page({/*** 页面的初始数据*/data: {query: {},shopList: [],page: 1,pageSize: 10,total: 0,isloading: false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({query: options}) this.getShopList()},getShopList() {this.setData({isloading: true})wx.showLoading({title: '数据加载中...',})wx.request({url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,method: 'GET',data: {_page: this.data.page,_limit: this.data.pageSize},success: (res) => {console.log(res)this.setData({shopList: [...this.data.shopList, ...res.data],total: res.header['X-Total-Count'] - 0})},complete: () => {wx.hideLoading()this.setData({isloading: false})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {wx.setNavigationBarTitle({title: this.data.query.title,})},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.setData({page: 1,shopList: [],total: 0})this.getShopList()wx.stopPullDownRefresh()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.page * this.data.pageSize >= this.data.total)return wx.showToast({title: '数据加载完毕!',icon: 'none'})if (this.data.isloading)returnthis.setData({page: this.data.page + 1})this.getShopList()},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
shoplist.json
{"usingComponents": {},"onReachBottomDistance": 200,"enablePullDownRefresh": true
}
shoplist.wxml
<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id"><view class="thumb"><image src="{{item.images[0]}}"></image></view><view class="info"><text class="shop-title">{{item.name}}</text><text>电话:{{tools.splitPhone(item.phone)}}</text><text>地址:{{item.address}}</text><text>营业时间:{{item.businessHours}}</text></view>
</view><wxs src="../../utils/tools.wxs" module="tools"></wxs>
shoplist.wxss
/* pages/shoplist/shoplist.wxss */
.shop-item {display: flex;padding: 15rpx;border: 1px solid #efefef;border-radius: 8rpx;margin: 15rpx;box-shadow: 2rpx 2rpx 15rpx #ddd;
}.thumb image {/* 消除图片之间的间隙 */display: block;width: 250rpx;height: 250rpx;margin-right: 15rpx;
}.info {display: flex;flex-direction: column;justify-content: space-around;font-size: 24rpx;
}.shop-title {font-weight: bold;
}
网络请求
用户授权
在云开发中,登录的概念被弱化了,取而代之的是授权功能,比如你想在小程序中发布一条微博,那么小程序必须要获取到你的相关的信息,比如微信昵称,头像,城市等。这时候就需要你授权给这个小程序。
过期的授权方式
新的授权方式
新的授权方式要分两步走,第一步是进行用户的授权,第二步才是去调用wx.getUserInfo
获取用户的信息。这两步的走法分别是:
1.专门写一个授权的页面,在这个页面中需要有一个button组件,并且他的open-type=‘getUserInfo’
示例代码如下:
<button type="primary" open-type="getUserInfo" bindgetuserinfo="onGetUserInfoTap">授权</button>
loadUserInfo: function(){const that = this;wx.getSetting({success: res => {const isUserInfo = res.authSetting['scope.userInfo'];if(isUserInfo){wx.getUserInfo({success: res => {const userInfo = res.userInfo;that.globalData.userInfo = userInfo;}})}}})}
微信小程序开发——this指针的指向问题
(1)this指向
在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。
a. 函数有所属对象时,则指向所属对象
var object1 = {value: 100
};
// 函数有所属对象时,通过 . 表达式调用,这时 this 自然指向所属对象。
object1.getValue = function () {console.log(this.value); // 输出 100// 其实就是 object1 对象本身console.log(this);return this.value;
};
console.log(object1.getValue());
getValue()
属于对象 object1
,并由 object1
进行 .
调用,因此 this
指针指向的是 object1
对象,因此object1
内的属性参数也是可以使用.
来获取的;
b. 函数没有所属对象,则指向全局对象
var object2 = {value: 100
};
object2.getValue = function () {var fun = function () {console.log(this.value) // undefinedconsole.log(this);// 输出全局对象 global};//fun函数虽然定义在getValue的函数体内,但它既不属于getValue也不属于object1,意即fun并没有被绑定在任何对象上fun();return this.value;
};
console.log(object2.getValue()); // => 100
当调用时, this
指针指向了全局对象 global
通过进一步查询资料与深入学习,了解到在小程序中的this指针,指向的是回调函数本身,真正的对象存放在堆内存中,因此它的指向在程序执行过程中会实时变化
(2)探究小程序中的this是怎么指的
在index.js中编写一个测试函数:
// index.jsPage({data: {content:'这是我的第一个微信小程序',motto: 'Hello World',},test1: function () {this.setData({contentview1:this.data.content,});function test2() {console.log(this.data.content) //undefined }test2();},onLoad() {this.test1();},
})
<!--index.wxml-->
<view class="container"><view class="usermotto"><text class="user-motto">{{motto}}</text></view><view class="usermotto"><text class="user-motto">{{contentview1}}</text><text class="user-motto">{{contentview2}}</text></view>
</view>
第一个this.data.test
可以打印出结果来,并成功传值到前端页面wxml,原因是因为this指向的是包含自定义函数test1()的Page对象。
第二个打印语句是会报错的,如下:
原因:
在自定义的函数test2()中,this指向已经发生了改变,在该函数中this指向的就只是该函数中定义的内容了,也不存在data属性
内部定义的函数function test2()
实际是一个闭包 ,是无法直接通过this来获取数据的,要想在该自定义的内部函数中使用data对象数据,就是使用 var that = this; 重新定义指针指向。修改后代码如下:
test1: function () {var that = this;this.setData({contentview1:this.data.content,});function test2() {console.log(that.data.content); }test2();},
两个指针指向的就都有数据显示了
Promise风格调用
// index.js
Page({data: {},onLoad: function (options) {this.promisedemo()},promisedemo: function() {let p = new Promise((resolve, reject) => {setTimeout(() => {resolve([1, 2])// reject("网络有问题")}, 1000)})p.then(res => {console.log(res);console.log("请求成功");}).catch(err => {console.log(err);console.log("请求失败");})}
})
模块导入导出(import、export)
自定义组件
创建组件
使用组件
给自定义组件添加属性
在组件中添加节点
组件样式注意事项
小程序官方文档
事件
组件本身的生命周期
监听组件所在页面的生命周期
如何让微信开发者工具显示切后台按键
之后我会持续更新,如果喜欢我的文章,请记得一键三连哦,点赞关注收藏,你的每一个赞每一份关注每一次收藏都将是我前进路上的无限动力 !!!↖(▔▽▔)↗感谢支持!
微信小程序基础知识 || 如何让微信开发者工具显示切后台按键相关推荐
- 《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
- 前端程序员需要了解的原生微信小程序-基础知识
前言:该学原生小程序啦 文档: 微信开放文档 工具下载: 稳定版 Stable Build | 微信开放文档 HBuilderX-高效极客技巧 你要是uniapp开发的就这个HB编译器打开项目 运行 ...
- 【微信小程序】微信小程序基础知识篇
开发文档 小程序简介 | 微信开放文档 1.微信小程序的环境准备 1.1注册账号 1.2获取APPID 是开发者唯一的身份认证,应用要发布要上线必须提供APPID 1.3开发工具 由于微信小程序自带开 ...
- 微信小程序 基础知识
一.微信小程序是什么 微信小程序是一种不需要下载安装即可使用的应用 微信小是2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线. 二.微信小程序商业价值 依托微信,有强大广 ...
- 微信小程序基础知识3
再续一篇- 十四. 页面导航 声明式导航 :在页面上声明一个<navigator>导航组件,通过点击<navigator>组件实现页面跳转 导航到 tabBar 页面:在使用 ...
- 微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频) 发布流程
第一章:小程序初级入门教程 小试牛刀[含视频] 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝试着写一个最简单的例子,包含 2 个静态页 ...
- 微信小程序基础库版本与微信版本对应关系
iOS 客户端版本 基础库版本 7.0.3 2.6.1 7.0.0 2.5.2 6.7.3 2.4.4 6.7.2 2.3.2 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2.0.9 ...
- 微信小程序踩坑(一)——开发者工具更新时,显示不能打开要写入的文件
当遇到这种情况, 关闭开发者工具,然后进程里还有的话也结束掉再重试就可以了. ctrl+shift+delete -------->打开任务管理器,清理相关的进程
- 【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要 基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接 微信小程序个人注册简单步骤 打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接 微 ...
最新文章
- 看完这篇 JVM 垃圾回收,和面试官扯皮没问题了
- 人类快感程度体验等级
- 来跟我一起分享技术、传递价值:阿里云MVP全球招募,火热启动!
- oracle 变量赋值_【赵强老师】Oracle存储过程中的out参数
- LeetCode12- 整数转罗马数字
- python ctypes实现api测试_Python与C之间的相互调用(Python C API及Python ctypes库)
- 网页中返回顶部代码(多种方法)另附注释说明
- Web服务必须要知道的几个概念
- 210122阶段三进程间信号
- Java类加载器(二)——自定义类加载器
- python 通过下载包setup.py安装模块
- 【专升本计算机】2021年甘肃省专升本计算机全真模拟试题(二)
- angular4点击事件监听_JavaScript从零开始——DOM事件编程(1)
- 以太坊2.0抵押地址新增13.47万ETH
- linux日志清除脚本,linux 日志清除脚本
- 鸿蒙渊 灵兽经验,【转】[攻略]传奇世界灵兽升级经验汇总
- apache phoenix的JAVA JDBC操作
- LinuxC网络编程
- win11开热点连接之后无网络解决方案
- 测试结果OK、POK、NG、NT的意义
热门文章
- MP3 PQF模块 matlab实现
- 3D游戏精灵-兔子脚本 (lua语言开发,xfun平台)最新版
- Python 制作迷宫游戏(三)——地图精灵
- 01A06.Learning Python 5th-动态类型
- 灰色关联分析(Grey Relational Analysis, GRA)
- 考研英语阅读的深切念怀
- 最小摩托车433胎压监测模块集成方案
- matlab 解方程 无穷解,成都火灾
- rational rose 绘制时序图
- 游戏技能系统(Gameplay Ability System,简称GAS)配合GASDocumentation阅读学习笔记