一. 页面样式和结构
1.1 小程序组件(html)
(1) 区域布局组件
view定义块级区域，相当于网页中的div标签text定义行内区域，相当于网页中的span标签
(2) 链接跳转组件
navigator 组件相当于网页中的 a 标签，用来实现页面之间的跳转。
-
url属性支持相对和绝对路径，路径为空时会报错 -
hover-class属性定义点击态的样式，none值表示禁用点击效果 -
open-type属性定义跳转方式，tabBar 类型的页面时值为switchTab，默认值为navigate注意: 如果跳转的页面是在app.json的tabBar中注册过的, 必须要添加
open-type="switchTab"才可以, 否则跳转不起作用
(3) 图片组件
image 组件用来在页面中显示图片相当于网页中的 img （注意单词不同）
image默认具有宽高尺寸**（320 * 240px）** 占位容器- 当占位容器与图片实际尺寸宽高比不一致时，图片无法正常显示
mode属性控制图片的显示方式scaleToFill图片提伸铺满占位容器aspectFit图片同比例缩放显示，长边完整显示出来（占位容器可能会留白）aspectFill图片同比例缩放显示，短边完整显示出来（图片可能被裁切）widthFix宽度固定, 高度自适应heightFix高度固定, 宽度自适应
(4) 滑动组件(轮播图)
swiper 组件在页面中创建可以滑动的区块，常常用来实现轮播图的交互效果。
- 组件的结构
swiper滑块容器，内部只能嵌套swiper-item，默认高度为150pxswiper-item滑块单元，内部嵌套任意内容，如image组件
<swiper>
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
</swiper>
-
组件属性
-
indicator-dots是否显示小圆点小圆点的颜色可以改变
indicator-color未选中时的颜色设置indicator-active-color选中时的颜色设置 -
autoplay是否自动播放 -
interval自动切换的时间间隔(单位: ms) -
circular是否衔接滑动
-
(5) 表单组件
- button组件
size指定按钮的大小- default 默认大小
- mini 小尺寸
type颜色样式- primary 绿色
- default 白色
- warn 红色
plain按钮是否镂空，背景色透明- 用户头像
button组件的open-type属性设置为chooseAvatar- 监听
button组件的chooseavatar事件（没有大写字母） - 事件回调中通过事件对象
ev.detail.avatarUrl
- input输入框组件与网页中
input标签的作用一致
type属性指定表单的类型text文本输入键盘number数字输入键盘idcard身份证输入键盘digit带小数点的数字输入键盘nickname昵称输入键盘
value输入框的初始内容placeholder属性指定输入框为空时的占位文字password是否是密码类型focus是否获取焦点
- radio-group 和 radio 单选框组件, 相当于网页中的
<input type="radio" />
value定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 valuechecked定义选中的状态, 可用来设置默认选中disabled是否禁用colorcheckbox 的 颜色
- checkbox-group 和 check 复选框组件, 相当于网页中的
<input type="checkbox" />
value定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 valuechecked定义选中的状态, 可用来设置默认选中disabled是否禁用colorcheckbox 的 颜色
- picker 选择框组件 相当于网页中的
select标签
mode属性定义选择框的类型selector普通选择器multiSelector所列选择器time时间选择器date日期选择器region省市区选择器
- switch 开关选择器
checked选中状态type样式 有效值：switch(默认) checkbox
(6) 区域滚动组件
scroll-view 在页面中指定一个可以滚动的区域，并且这个可滚动的区域能够实现一些高级的交互，比如下拉刷新等。
scroll-view 中嵌套任意需要滚动的内容，要求必须有溢出，垂直滚动时 scroll-view 必须要指定高度。
scroll-x属性是否允许水平方面滚动scroll-y属性是否允许垂直方向滚动refresher-enable属性是否开启下拉刷新的交互refresher-triggered设置下拉刷新状态，true 下拉刷新已经被触发，false 表示下拉刷新未被触发
(7) rich-text
微信小程序中不支持网页的标签结构, 只有用rich-text 转化, 才能是使网页标签起作用
nodesHTML 字符串或数组user-select文本是否可选，该属性会使节点显示为 block
1.2 小程序样式(css)
小程序中的样式和网页中的样式基本一致 , 其中, 写在页面的 wxss 中的样式是局部样式 , 只对当前的页面起作用 , 写在app.wxss中的样式为全局样式 , 对所有的页面都起作用
局部样式的优先级 > 全局样式的优先级
注：page 在每个页面中都有，它是由小程序自动添加上的，相当于网页中的 body 标签。
(1) 样式导入
通过导入样式, 可以复用其他页面中的样式
语法: @import '样式文件地址'
(2) 资源使用
小程序中 .wxss 文件中不支持使用本地路径的资源，比如背景图片是不允许使用本地国片路径的，必须使用网络路径（https:// 或 http:// 开头）或者转换成 base64 编码。
(3) 字体图标
小程序中字体图片的使用与网页中基本上是一致的，唯一的区别是小程序的 .wxss 文件中不支持使用本地字体文件，我们使用 iconfont 平台提供的服务生成字体文件后，直接使用其线上的字体文件地址。
@font-face {
font-family: "iconfont"; /* Project id 3632516 */
src:
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATYAAsAAAAACVwAAASMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDIgqFfIUjATYCJAMUCwwABCAFhGcHRxs0CFGU7k2N7Mdg204e4YSRdMLR9eNemN8PCiyrdGcE0VpZPQtPxIpIv8IQqHchGxsFLsrGxhhAx0bc/7WZn5C0kYUVY0mFNZOTCiVD4qRkau43dTv25XLOxDa2INyuQk54Qj83jTax/7Y8D8SS8H/u9+pPS9C6v8Itu+yBfdEPtOgA2YB35nOfim6k2DXM5CkCtZYVUBxV1DUCfc1jB7CUtOUgbI9rs5EHteyQl7SHaqGse2QO8QZUpFeKq8Br9+fjv5RQg6TIQDvP6eNyA5x8P+b9Q3K8m4PsG3tJwNYJBTLMz8wV98sDN5F+YR6pNk9SaRko5frUa8ztxsXcVzBTOWd/LsM/L0rQDPXA7+nz3VKafIJf9xV5xgewyWB8iKKE82mlFnUXxXkCGmHcHZJMLg35UwFUjBflFd1vxEL6xJ9OSP90CjR+KLzpuzGbFThHUktQW+ZlIdsrWv7QI/S8whctg46TLcOWVYTXrKYrK1xsOrytY0NuNKqWpbXYGi9ajMIGr0se0MwjabII6NAkMH6x5AUWJYTNdDSzTAk4/vv/2azv84s17vqzNoNPi6QR56SANi9l7TMve37qijdO4vQth3ab81kSDQaB8UvYqAktbBAFb6/n6YnltktVYnQe8t51ouQN5okt2t28tNJCpcl06pIWPh9i8XZo9iNTz2bOXC/FsWPr4keXGVJbkhoak5tTLjWnOuzJjSktl1KarY1J0TMbSj/siz52bPqA4Wbtm5eNlTHlUVHl0ZXbDSlJA29l9HaSp1AxuJjvFgPu5wzQM/qh9n5U1PSp7DSousf+up18OnRA8gDCL7Fpwo64weSRwr4xu5mm2otUCDWO9tF70+OoYHB8JIjpXxExR31Y/bT6iFpn6p6Gd51DTPsKfOAc4baukuywEr2PvjgsOrRa8/l/6RdCKw6/BcQLZ3A/ImRBUHnQgnJhnbjz6p1qSb1Lvc7USeH7wMZbCx2iD6EphvXewFQwG7xZJoL7J3EMHcKG0EyAW40AumKtmPC2nhmaYP2MOUuc9/ChN0aXxUTWxJ32CGaDqdM72UY+LxeGA1TOk4fJUJH6glxPcvT35AqSDa0ig76uv7H57l9qj2feP3WdEuDnrSsk4pXzSmjvUn2hA8G3ZOysiZgzGRnzvFnTJzCn80iNhFo9TQW0SKvn/ZjaaucI1TGlBEmVPshUG0Xn+Fko1FmFUrVtqDWn/Pg6bZxIkWuASZM4CM12QNLoPWSaXUDn+AdQ6PQBSs3+Q62zoM5WZzKEUhnxGBm4QSM4syA5RMOM3VXrkXGIjZezss1IdpmR5pITkpLlSuRAchf7uIYaUzAWOVGW7FyFeD1ks0mcU5YsSMAJJoydOYmJYt6nJAiSHUrJEB6GGHAGGYFjJpA4iDYyjv++eojREDY8uSa62Sdz8XJanZMsQVINdKXBUWvuTNZ3GcooBYaJ/HYimcSOU8F8iE0vSDjO/M0sEAGWwNQi55QjkZDEuoaE8U32C6z8kRdqZy9CQZCEklARfaB8gnhZMCmRwYxV7kZIsKpcJl5GAA==') format('woff2'),
url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.woff?t=1672223363723') format('woff'),
url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.ttf?t=1672223363723') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
content: "\e67d";
}
.icon-edit:before {
content: "\e6d8";
}
.icon-check:before {
content: "\e6d7";
}
.icon-share:before {
content: "\e6d6";
}
二. 页面布局
一个完整的小程序页面需要包括 4 个类型的文件：
.wxml定义页面的结构，类似于.html.wxss定义页面的样式，类似于.css.js定义页面的逻辑，监听事件、发起请求等.json定义页面的配置，如页面标题等
2.1 js页面的布局
每个js页面都必须要调用 Page 函数来注册页面 , 且要传入对象类型的参数：
data初始化页面中的数据- 访问的方式:
this.data.数据名
- 访问的方式:
setData更新数据- 修改data中的数据:
this.setData({ data中的数据名: 值})
- 修改data中的数据:
Page({
data: { /*页面的初始数据*/},
//事件函数, 和data平级
函数名(){},
//生命周期函数
onLoad(options) { //页面一加载就调用},
onShow() { // 页面显示就加载 },
onHide() { // 页面隐藏就加载},
onUnload() { //页面卸载},
})
2.2 长度单位
小程序将设备页面分为750份,每一份就是1rpx
主要作用: 解决移动适配
iphone 宽度 375px----->750rpx 1px ==== 2rpx
1倍图 ---- 量100px — 200rpx
设计图–2倍图 量的100px— 100px/2*2 rpx
结论: 在二倍图上, 量多少px , 取多少rpx 两者比例为 1:1
注：上述的规则仅适用于设计稿宽度为 750px
三. 页面配置
小程序的配置可以配置页面路径、窗口表现、tabBar等，分为全局配置和页面配置，全局配置针对所有页面生效，页面配置只针对当前页生效。
3.1 全局配置 (app.json)
(1) 路径配置
pages 配置页面路径，未配置路径的页面无法被访问到
技巧 : 创建一个页面文件时, 在pages中添加一个配置项, 小程序开发工具自动把文件创建出来,不需要手动创建
//app.json 中
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/info/info",
],
}
(2) 起始页配置
entryPath 配置小程序默认的启动页面（首页） 如果不填，将默认为 pages 列表的第一项
{
"entryPagePath": "pages/home/home",
}
(3) window窗口配置
window 用于设置小程序的状态栏、导航条、标题、窗口背景色。
"window": {
"enablePullDownRefresh": true,
//窗口配置
"backgroundColor": "#eee",
"backgroundTextStyle": "dark",
//导航栏的配置
"navigationBarBackgroundColor": "#FFA500",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "我的小程序",
"navigationStyle": "default"
},
窗口的配置
backgroundColor窗口的背景色
导航栏的配置
-
navigationBarBackgroundColor导航栏背景颜色 (颜色是十六进制) -
navigationBarTextStyle导航栏标题颜色，仅支持black/white -
navigationBarTitleText导航栏标题文字内容 -
navigationStyle导航栏样式，仅支持以下值:default默认样式custom自定义导航栏
下拉刷新的配置
backgroundTextStyle下拉 loading 的样式，仅支持dark/lightenablePullDownRefresh是否开启全局的下拉刷新。
(4) tabBar 配置
tabBar 底部 Tab 栏（tabBar 中的页面必须配置在 pages 中）
"tabBar": {
"color": "#999",
"selectedColor": "#5792AF",
"backgroundColor": "#e0e0e0",
"borderStyle": "white",
"position": "bottom",
"list": [
{
"pagePath": "pages/home/home",
"text": "我的",
"iconPath": "/assets/icon/home.png",
"selectedIconPath": "/assets/icon/home-active.png"
},
]
},
color文字颜色，仅支持十六进制颜色selectedColor文字选中时的颜色，仅支持十六进制颜色backgroundColortab 的背景色，仅支持十六进制颜色borderStyletabbar上边框的颜色 , 仅支持black/whitelisttabBar 页面跳转的路径和图标配置pagePath跳转的页面路径texttabBar 上按钮文字iconPath图片路径 icon 大小限制为 40kb，不支持网络图片。 当position为top时，不显示 icon。selectedIconPath选中时的图片路径positiontabBar 的位置，仅支持bottom/top
3.2 页面配置
页面配置大部分与全局配置中的 window 是重叠的，页面配置的优先级大于全局配置的。
disableScroll只能用在在页面配置中，禁用页面滚动usingComponents后续学到自定义组件时再介绍
四. 模板语法
在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 Vue 中就是指令的概念。
4.1 数据绑定
-
插值
{{}}小程序中无论是属性的绑定还是内容的绑定都必须要使用
{{}}。--1. 属性绑定 <switch checked="{{false}}" /> --2. 类名绑定 <view class="{{isActive ? 'active' : ''}}" >首页</view> --3. 内容绑定 <text>{{ msg }}</text> -
简易数据绑定
model:value="{{数据名}}"语法实现了双向的数据绑定，但是目前只能用在input和textarea组件中。
4.2 条件渲染
-
控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性
wx:if根据表达式的值渲染内容，值为真时显示wx:elif条件语句wx:else用在wx:if的后面，不可单独使用，wx:if表达式值为假时显示
<!-- 条件渲染 wx:if --> <view wx:if="{{result===1}}">剪刀</view> <view wx:elif="{{result===2}}">石头</view> <view wx:else>布</view> -
组件属性：相当于vue 中的 v-show
hidden根据表达式的值渲染内容，值为真时隐藏- 通过
[hidden] { display: none; }来实现内容的隐藏
<!-- 隐藏 hidden --> <view hidden="{{result===2}}">测试hidden</view> <!-- 如果条件频繁切换,用hidden 不频繁 wx:if wx:elif wx:else -->
4.3 循环渲染
wx:for根据数组重复渲染组件内容index默认值，访问数组的索引值item默认值，访问数组的单元值
wx:key列表项的唯一标识符（不使用 {{}}）- 数组单元是对象时，只需要写属性名
- 数组单元是简单类型时，推荐使用
*this
wx:for-index自定义访问数组索引的变量名wx:for-item自定义访问数组单元的变量名
<!-- 列表渲染 循环 对象-->
<!-- wx:for="{{数据}}" 默认的 item 项 index 索引 -->
<!-- 如果item index 和其他名称冲突,
可以用 wx:for-item 和 wx:for-index
对默认的item index的名称进行修改 -->
<!-- wx:key 直接就填 字段名就可以了 -->
<view wx:for="{{students}}" wx:key="id">
索引:{{index}} 姓名: {{item.name}}---年龄:{{item.age}}
</view>
<!-- 数组 -->
<!-- 简单数据, wx:key 想要用自身的数据来显示 用 *this -->
<view wx:for="{{history}}" wx:key="*this">
{{item}}
</view>
五. 事件处理
5.1 事件绑定
bind:事件类型=事件回调 / bind事件类型=事件回调
<!-- 按钮的点击事件的监听
bind(绑定,监听) tap(事件类型) tap 轻击
bing:tap / bingtap
-->
<button type="primary" bindtap="onBtn" data-info="⭐"
>click me</button>
小程序中使用 bind 进行事件的绑定 , 且在绑定的事件函数中, 是不可以传参的 , 所有只能使用其他的方式传参
事件传参
<!-- 小程序中的事件传参
传参: data-*(自定义参数名)
mark: *
-->
<button bindtap="onBtn" data-id="{{index}}" mark:f2="f2">事件传参</button>
- data- 自定义参数名=“值”
- mark : 自定义参数名=“值”
参数接收
小程序里面的参数是用事件对象完成接收的
data - * 传递的参数 是在 e.target.dataset中
mark: * 传递的参数 是在 e.mark 中
page({
onBtn(e){
// 参数接收 e.target.dataset.info
console.log(e);
},
})
5.2 常用的通用事件
bindtap点击事件bindlongpress长按事件bindinput键盘输入事件bindconfirm回车事件bindfocus输入框聚焦事件bindblur输入框失焦事件bindchangevalue 改变事件bindsubmit表单提交事件bindreset重置表单事件
5.3 组件事件
前面介绍的 tap 事件可以在绝大部分组件是监听，我们可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，我们将其称为组件事件。
scroll-view 组件中的事件：
bind:scrolltolower当滚动内容到达底部或最右侧时触发bind:refresherrefresh执行下拉操作时触发refresher-enable启用自定义下拉刷新
表单组件中的事件：
change表单数据发生改变时触发（input 不支持）submit表单提交时触发，button按钮必须指定form-type属性
六. 生命周期
生命周期是一些名称固定自动执行的函数。
6.1 页面生命周期
onLoad在页面加载时触发，一个页面只会执行 1 次，常用于获取地址参数和网络请求- 参数 options 接收的是传递到当前页面路径中的参数
onShow页面显示/切入前台时触发，常用于动态更新数据或状态onReady在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景onHide在页面隐藏/切入后台时触发，常用于销毁长时间运行的任务，如定时器onUnload页面卸载时触发
6.2 组件生命周期
小程序自定义组件的生命周期需要定义在 lifetimes 中：
Component({
//组件生命周期
lifetimes: {}
})
created在组件初步创建时执行，注意此时不能调用setDataattached在组件完成页面初始化的时候执行ready在组件布局完成后执行detached在组件被销毁的时候触发
6.3 小程序生命周期
小程序的生命周期定义在app.js里面
App({
/*当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/
onLaunch: function () {
console.log('小程序启动了')
},
/* 当小程序启动，或从后台进入前台显示，会触发 onShow*/
onShow: function (options) {
console.log('小程序显示了',options)
},
/*当小程序从前台进入后台，会触发 onHide */
onHide: function () {
console.log('小程序隐藏了')
},
/* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/
onError: function (msg) {}
})
onLaunch小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）onShow小程序前台运行时执行，常用于更新数据或状态onHide小程序后台运行时执地，常用于销毁长时间运行的任务，如定时器onError当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
七. 自定义组件
创建自定义组件
(1) 在根目录下创建一个文件
(2) 在创建的文件内创建一个存放页面文件的文件
(3) 右键----新建 Component(输入页面名, 回车) 自动创建组件页面文件
创建好的自定义组件从结构上看与页面是完全一致的，由 .wxml、.wxss、.js、.json 构成
7.1 组件页面配置
组件的 .json 文件中必须有 component: true
{
"component": true,
}
组件需要在页面(使用组件的页面)或全局中注册后才可以使用，注册组件会用到配置项 usingComponents
{
"usingComponents": {
"my-comp":"/components/my-comp/index"
}
}
7.2 组件页面布局
组件的 .js 文件中调用的是 Component 函数
properties接收父组件传值data数据methods方法lifetimes生命周期函数
// components/my-comp/index.js
Component({
//接收从组件外传的值
properties: {
userAge:Number,
userName:{
type:String, //类型
value:'zz' //默认值
}
},
/* 组件的初始数据*/
data: { },
/* 组件的方法列表*/
组件内的函数和事件方法都是定义在和data同级的methods里面
methods: { }
//组件的生命周期
lifetimes:{
created() {console.log('组件初步创建')},
attached() {console.log('组件完成初始化')},
detached() {console.log('组件销毁')}
},
})
7.3 组件样式
在开发中经常会需要修改自定义组件内部的样式，有两种方式可以实现这个目的。
- 样式隔离：默认情况下页面的样式无法影响自定义组件的样式
- 组件内的
options属性内addGlobalClass: true允许在页面中修改自定义组件的样式，但要求必须使用组件本身的类名 - 在组件中定义样式时使用的选择器不能是标签选择器、ID选择器或属性选择器
- 组件内的
/* 如何让外界能影响组件内部的样式呢? */
/* 方式一: 为组件的options新增一个 addGlobalClass: true
缺点: 该方式需要提前直到组件内有什么类名, 有点麻烦
*/
Component({
// 解决组件样式起作用的
options:{
addGlobalClass:true,
},
})
-
外部样式类：
externalClasses: ['xxx-class', 'yyy-class']开发自定义的样式类xxx-class和yyy-class可以接收外部传入的类名，并应用到组件的布局结构中
/* 方式二: 外部样式 externalClasses */ Component({ // 开发自定义的样式类 externalClasses: ['custom-class'] })组件页面
<view class="custom-class">我是组件!</view>父组件页面
<my-comp custom-class="my-bg"></my-comp> //样式 .my-bg { background-color: #eee; }
7.4 slot（插槽）
小程序中默认只能使用一个 slot 需要具名插槽时需要传入 options: { multipleSlots: true }。
Component({
options:{
// 具名插槽 需要声明的属性
multipleSlots:true
},
})
父页面
<my-comp>
<!-- 插槽 -->
<!-- 1. 默认插槽 接收 slot -->
<view>默认内容1111</view>
<view>默认内容22222</view>
<!--2. 具名插槽 -->
<text slot="before">前</text>
<text slot="after">后</text>
</my-comp>
子组件页面
<!-- 1. 默认插槽 接收 slot -->
<slot></slot>
<!-- 2. 具名插槽 -->
<slot name="before"></slot>
<slot name="after"></slot>
创建插槽：在组件的任意位置使用 <slot /> 进行占位
- 默认只能使用 1 个
<slot> options: { multipleSlots: true }启用多插槽name为不同的<slot />命名来区分不同的插槽
7.5 组件通信
组件通信是指将页面或组件的数据传入子组件内部或者将子组件的数据传入父组件或页面当中。
父向子传值
数据绑定实现父向子传值 自定义事件名="值/{{值}}"
<my-comp user-age="{{age}}" user-name="名字"></my-comp>
子接收 properties 里面接收
Component({
//接收从组件外传的值
properties: {
//简单
userAge:Number,
//复杂
userName:{
type:String, //类型
value:'zz' //默认值
}
},
})
子向父传值
子传值 this.triggerEvent('自定义事件名',值)
<!-- 子向父传值 -->
<button type="warn" bindtap="onAge"></button>
//让父组件内的age加1
onAge(){
// 子向父传值 this.triggerEvent('自定义事件名',传值)
this.triggerEvent('changeAge',1)
}
父接收 bind: 自定义事件名="函数"
<my-comp bind:changeAge="onChangeAge" />
//事件对象接收 e.detail
onChangeAge(e) {
console.log(e.detail);
},
八. 内置API
内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。
8.1 网络请求
调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互，其语法格式如下：
wx.request({
url: '这里是接口的地址',
method: '这里是请求的方法',
data: '请求时提交的数据',
header: {/* 请求头信息 */},
success: () => {/* 成功的回调 */},
fail: () => {/* 失败的回调 */},
complete: () => {/* 成功或失败的回调 */}
})
Page({
data: {
books: []
},
async onGetBooks(){
//加载效果
wx.showLoading({
title: '数据加载中...',
// 防止穿透的图层
mask:true,
})
const res = await this.getBooks()
// console.log(res);
this.setData({
books:res.data.data
})
},
//封装请求图书方法
getBooks(){
return new Promise((resolve,reject)=>{
//异步操作, 成功了就调用resolve ,失败调用 reject
// 获取成功的提示
wx.showToast({
title: '获取数据成功',
icon:'success'
})
// 发起请求
// 小程序由于没有浏览器环境,所以请求不存在跨域问题
// 但是为了安全,小程序规定,发起的请求的域名必须配置到(合法域名列表中)
// 也可以通过勾选,不校验合法域名临时解决(但后面小程序上线发起请求必须要配置合法域名)
wx.request({
url: 'https://hmajax.itheima.net/api/books',
method:'GET',
data:{
creator:'zz',
},
//this 指向, 所以用箭头函数
// success:(res)=>{
// //成功调用 resolve
// resolve(res)
// },
success:resolve,
// fail:(err){
// //失败调用 reject
// reject(err)
// },
fail:reject,
complete:()=>{
wx.hideLoading()
}
})
})
},
})
8.2 界面交互
-
wx.showLoading显示 loading 提示框-
title文字提示内容 -
mask是否显示透明蒙层，防止触摸穿透
-
-
wx.hideLoading隐藏 loading 提示框 -
wx.showToast消息提示框（轻提示）mask是否显示透明蒙层，防止触摸穿透duration延迟时间（提示框显示多久）icon指定图标，none不使用图标
8.3 本地存储
wx.setStorageSync('自定义属性名',数据)存入一个数据，复杂类型数据不需要JSON.stringify处理wx.getStorageSync('自定义属性名')读取一个数据，复杂类型数据不需要JSON.parse处理wx.removeStorageSync('自定义属性名')删除一个数据wx.clearStorageSync()清空全部数据
8.4 API 特征
小程序中提供的 API 数量相当的庞大，很难也没有必要将所有的 API 全部掌握，但是这些 API 具有一些共有的特征：
- 异步 API：绝大部分的 API 都是异步方式，通过回调函数获取 API 执行的结果
successAPI 调用成功时执行的回调failAPI 调用失败时执行的回调completeAPI 调用结束时执行的回调（无论成功或失败）
- 同步 API：部分 API 支持以同步方式获取结果，这些 API 的名称都以
Sync结尾，如wx.getStorageSync等 - Promise：部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合
asyc/await来使用
8.5 相册/拍照
wx.chooseMedia 调起摄像头拍照或读取相册内容，该 API 既支持回调方式获取结果，也支持 Promise 方式返回结果：
Page({
async chooseImage() {
// 读取结果
const result = await wx.chooseMedia({
count: 1, // 只选取一张图片
sourceType:['album'], //从相册选择
mediaType: ['image'] // 只选取图片
})
// console.log(result.tempFiles[0].tempFilePath);
console.log(result)
}
//上传图片 (变成网络图片)
wx.uploadFile({
filePath:res.tempFiles[0].tempFilePath,
name: 'image',
url: 'http://geek.itheima.net/v1_0/upload',
success:(res)=>{
// console.log('upload',res.data);//是一个JSON字符串
// console.log('upload',JSON.parse(res.data));
const imageUrl= JSON.parse(res.data).data.url
console.log(imageUrl); //上传的网络图片
},
fail:(err)=>{
console.log('err',err);
}
})
})
九. 分包加载
分包加载是优化小程序加载速度的一种手段。
9.1 为什么？
- 微信平台对小程序单个包的代码体积限制为 2M，超过 2M 的情况下可以采用分包来解决
- 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现按需加载
- 配置文件能忽略的只有静态资源，代码无法被忽略
9.2 使用分包
在全局配置中使用 subPackages 来配置分包的根目录和分包中的页面路径：
{
"subPackages": [
{
"root": "subpkg_test",
"pages": [
"pages/test/index"
]
},
{
"root": "subpkg_user",
"pages": [
"pages/profile/index"
]
}
],
}
root指定分包的根目录pages指定分包中的页面路径
注：根目录和路径不存在时，小程序开发者工具会自动创建。
9.3 分包预加载
在实际使用分包的过程中，纯粹的按需加载也不是最优的方案，可以将即将访问的页面的包预先下载下来，这样能进一步提升小程序加载的速度，通过 preloadRule 来配置预加载的包：
{
"preloadRule": {
"pages/framework/index": {
"network": "all",
"packages": ["subpkg_user"]
}
},
}
上述代码的含义是在加载 pages/framework/index 页面时，自动的去加载 subpkg_user 这个分包，等到要访问这个分包中的页面时会直接打开。
十. 框架接口
10.1 应用实例
在 app.js 中调用 App 时会注册应用实例，这个实例具有全局唯一性，通过调用 getApp 函数来获取。
在应用实例中可以添加一些需要共享的数据或方法：
App({
message: '应用实例中的数据...',
updateMessage() {
// this 指向应用实例本身
}
})
// 获取用应实例
const app = getApp()
Page({
onLoad() {
// 查看应用实例中的内容
console.log(app)
}
})
10.2 页面栈
页面栈本质上是一个数组，它记录着当前打开的全部页面历史，页面栈中的每个单元即为一个页面实例（调用 Page 函数时会注册页面实例）。
全局调用 getCurrentPages 函数可以获取当前的页面栈，通过页面栈可以看到所有的页面实例，借助于页面栈可以获取到页面中的一些有用信息：
data页面的初始数据setData更新数据onShow、onLoad等生命周期route页面的路径- 后续开发中还有其它…