微信小程序
- 微信小程序的项目结构
前端代码分为结构层html（WXML），表现层css（WXSS），行为层 js，在这之前首先给大家介绍一下小程序里面的一些文件类型及用途：
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
根目录
1）app.json,project.config.json,app.wxss,app.js
app.json: 对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab ...
project.config.json: 工具个性化设置，例如界面颜色、编译配置，代码上传时自动压缩...
app.wxss: 全局样式，作用于小程序的所有页面
app.js：全局逻辑控制
2）components文件夹
小程序公共组价文件夹，一般存放小程序的header，footer等
3）page文件夹
存放小程序页面
.json 页面配置文件
.wxml 页面模板文件
.wxss 页面样式文件
.js 页面脚本逻辑文件
4）src文件夹
存放一些静态文件，比如图片，音频，视频...
5) utils文件夹
存放一些公共的js文件，文件里面是一些可以全局使用的函数，封装的接口，第三方插件...
- 配置tabbar的方式及注意事项
tabBar属性中配置项说明
属性 类型 必填 默认值 描述 平台差异说明
color HexColor 是 tab上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab的背景色
borderStyle String 否 black tabBar上边框的颜色，可选值black/white App 2.3.4+ 支持其他颜色值
list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top top 值仅微信小程序支持
fontSize String 否 10px 文字默认大小 App 2.3.4+
iconWidth String 否 24px 图标默认宽度（高度等比例缩放） App 2.3.4+
spacing String 否 3px 图标和文字的间距 App 2.3.4+
height String 否 50px tabBar默认高度 App 2.3.4+
midButton Object 否 中间按钮 仅在 list 项为偶数时有效 App 2.3.4+
list属性中配置项说明
属性 类型 必填 说明
pagePath String 是 页面路径，必须在pages中先定义
text String 是 tab上按钮的文字，在App和H5平台为非必填。例如中间可放一个没有文字的+号图标
iconPath String 否 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath String 否 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
三、注意事项
当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
- Wxml中常用的组件(标签)
一、视图容器(View Container)：
标签名 说明
view 视图容器
scroll-view 可滚动视图容器
swiper 可滑动的视图容器
二、基础内容(Basic Content)
标签名 说明
icon 图标
text 文字
progress 进度条
三、表单组件(Form)
标签名 说明
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
slider 滑动选择器
switch 开关选择器
label 标签
四、操作反馈组件(Interaction)
标签名 说明
action-sheet 上拉菜单
modal 模态弹窗
progress 进度条
toast 短通知
五、导航(Navigation)
组件名 说明
navigator 应用内跳转
六、多媒体(Media)
标签名 说明
audio 音频
image 图片
video 视频
七、地图(Map)
标签名 说明
map 地图
八、画布(Canvas)
标签名 说明
canvas 画布
- Wxss,相比较css的区别（扩展)
一、WXSS和CSS的区别
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3、此外 WXSS 仅支持部分 CSS 选择器
- 逻辑渲染与列表渲染的方式
(1)wx:if
除了数据绑定，我们常常会使用逻辑分支，这时候可以使用wx:if="{ {condition}}"来判断是否需要渲染该代码块
当showContent的值为true是，view会被渲染，为false时则不会。
和普通的编程语言一样，也可以用wx:elif和wx:else来添加一个else块：
(2)block wx:if
因为wx:if是一个控制属性，可以添置在任何组件的标签上，但如果我们需要包装多个组件，又不影响布局是，可以用<block/ >标签将多个组件包装起来，并在上边使用wx:if的控制属性。
(3)wx:if与hidden
除了wx:if还有hidden属性控制组件是否显示。
wx:if控制是否渲染条件内的模板，具有惰性，若条件为false是，则不会渲染。wx:if有更高的切换消耗。
hidden控制组件是否显示，组件始终会被渲染，只是简单控制显示与隐藏，并不会触发重新渲染和销毁。具有更高的初始消耗。
简而言之，如果需要频繁切换的情景下用hidden更合适，如果在运行时条件不太可能改变，则用wx:if更好。
列表渲染
列表渲染是将一个数组内的所有数据依次展示在界面上，相当于小程序页面输出循环语句。常用情景有：文章列表和商品列表等。
（1）wx:for
组件的wx:for控制属性可以用于遍历数组，重复渲染该组件，数组的当前项的下标变量名默认为“index”,数组当前项的变量名默认为“item”
通过遍历数组myarray，页面渲染了两个< view >
使用“wx:for-item”可以指定数组当前元素的变量名，使用"wx:for-index"可以指定数组当前下标的变量名。
2）block wx:for
类似于block wx:if，也可以将wx:for用在block标签上，一遍渲染一个包含多结点的结构块
（3）wx:key
如果列表中的项目的位置会动态改变或者新的项目添加到列表中，并且希望在列表中保持自己的特征和状态（如< input />中输入内容，< switch />的选中状态），需要使用wx:key来指定项目列表中的唯一标识符。wx:key的值以两种形式提供：
1、字符串，代表在for循环的array中的item的某个property，该property的值是列表中唯一的字符串或数字，且不能动态改变。
2、保留关键字“*this”代表在for循环的item本身，这种表示需要item本身是一个唯一的字符串或数字。
需要注意的是，如果不提供wx:key,则会报一个warning，如果明确知道该列表是静态的，或者不必关注其顺序的，可以选择忽略。
39. App.is的生命周期以及page 中的生命周期、组件的生命周期40.用户交互反馈的方式(loading、wx.showToast,·wx. showModal)41．微信小程序中本地存储的方式
42．小程序间页面的跳转
我们有两种方式实现小程序的页面跳转：用js的方式实现和用navigator组件的方式
1、wx.navigateTo(有返回键，不可以跳转到tabBar页面)
//保留当前页面，跳转到应用内的某个页面
wx.navigateTo({
url: '/pages/detail/detail?id=1'
})
2、wx.switchTab (没有返回键，只能跳转到tabBar页面，不可以携带参数)
wx.switchTab({
url: `/pages/detail/detail`,
})
3、wx.reLaunch(跳转任意页面，没有返回键 ，有首页按钮)
wx.reLaunch({
url: '/pages/detail/detail'
})
4、wx.redirectTo(关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面)
wx.redirectTo({
url: `/pages/detail/detail`,
})
5、wx.navigateBack(关闭当前页面，返回上一页面或多级页面，data值为1，表示跳转上一页，2表示跳两级)
wx.navigateBack({
delta:1
})
区别：
1wx.navigateTo是开启一个新页面，那个页面是隐藏了，原页面是onHide,所以是可以返回的，但是返回之后，跳转的页面就unload了
2、wx.redirectTo是当前页面替换成新的页面，所以返回不去onunload(页面被销毁)
3、tabBar无论跳那个页面都是onHide
传参注意：
跳转页面传递数组参数必须序列化
let arr=[1,2,3,4,5]
category = JSON.stringify(arr) //取子集分类 数组传递需要序列化
wx.navigateTo({
url: `/pages/detail/detail/?cate= ${category} `,
})
onLoad: function (options) {
let category = JSON.parse(options.cate);
console.log(category)
}
参数值过长接受时候内容不全的问题
//传参
wx.navigateTo({//wx.redirectTo、wx.reLaunch
url: '/pages/details/details?id=' + encodeURIComponent(id)
})
//接收
onLoad(options) {
var id = decodeURIComponent(options.id);
}
二、navigator组件实现
小程序官方文档
<navigator url = "/pages/details/details">跳转到新页面</navigator>
<navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>
对应 wx.redirectTo 的功能
<navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>
对应 wx.switchTab 的功能
<navigator url = "/pages/details/details" open-type = "reLaunch">跳转到新页面</navigator>
对应 wx.reLaunch 的功能
<navigator url = "/pages/details/details" open-type = "navigateBack">跳转到新页面</navigator>
对应 wx.navigateBack 的功能
- 小程序页面的传参
跳转路由传递参数
<view class="conent">
<navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>
<navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator>
</view>
上面代码中就是navigator目录下的navigator页面,title是参数.
navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.
<!--navigatort.wxml-->
<view style="text-align:center"> { {title}} </view>
在navigatort.wxml中通过js代码可以获取到title,代码如下
//navigatort.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
在redirect.wxml中通过js代码可以获取到title,代码如下
//redirect.js
<!--redirect.wxml-->
<view style="text-align:center"> { {title}} </view>
//redirect.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
- wx.request的使用方式以及封装
1.在utils文件夹中新建utils.js文件
const baseURL = 'https://************'
export const myRequest = (options) => {
// console.log(wx.getStorageSync('fy_token'))
// console.log(wx.getStorageSync('fy_password'))
// console.log(wx.getStorageSync('fy_token'))
let header = {
"Content-Type": "application/json",
"token": wx.getStorageSync('fy_token'),
"client_time_sign": new Date().setMonth(new Date().getMonth() - 6) / 1000 * 1.24,
"md": !wx.getStorageSync('loginUser') || wx.getStorageSync('loginUser')=="" ?
wx.getStorageSync('fy_password') : JSON.parse(wx.getStorageSync('fy_password')).password
}
return new Promise((resolve, reject) => {
wx.request({
url: baseURL + options.url,
method: options.method || 'POST',
header: header,
data: options.data || {},
success: (res) => {
resolve(res)
if (res.data.message == "传入的token值有误，不能通过签名验证") {
wx.showToast({
title: 'token值错误,请重新登录',
icon: "none"
})
// wx.navigateTo({
// url: '/pages/logs/logs',
// })
}
// console.log("token错误",res.data.status)
},
fail: (err) => {
wx.showToast({
title: '请求接口失败！'
})
reject(err)
},
complete() {
wx.hideLoading()
}
})
})
}
其中 baseURL 可以设置为请求的本地地址 和线上地址 ,可以配置请求头 header 当请求端口需要token 等一些验证信息时，需要配置。token错误可以根据code码进行判断,后端说配置不好code码只能进行返回的msg进行判断。可以验证
2.在需要使用的界面的js文件中引入utils文件
3.在wx.js文件使用
utils.myRequest({
url:"/**/**", //为后端给的接口地址
method:"POST"//请求方式，可以给post,也可以为get
data:{},//data为传给的后台的JSON对象。
}).then(res=>{
console.log(res.data)
//输出后台返回的值
)
- 小程序中组件以及插槽的使用
(一).image组件:
src指定要加载的图片的路径
mode决定图片内容如何和图片标签宽高做适配
<image mode= "bottom" lazy-load src="https://tva2.sinaimg.cn/large/0e7DFXOhgy1g51j]1zfb41j305ke2s0sp.jpg"/>
1
mode属性:
属性 功能
scaleToFill 默认值不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image 元素
aspectFit 保持宽高比确保图片的长边显示出来页面轮播图常用
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来.(少用)
widthFix 以前web的图片的宽度指定了之后高度会自己按比例来调整(常用)
top 不缩放图片。只显示图片的顶部区域
bottom 不缩放图片。只显示图片的底部区域
center 不缩放图片。只显示图片的中间区域
left 不缩放图片。只显示图片的左边区域
right 不缩放图片。只显示图片的右边区域
top left 不缩放图片，只显示图片的左上边区域
top right 不缩放图片。只显示图片的右上边区域
bottom left 不缩放图片。只显示图片的左下边区域
bottom right 不缩放图片。只显示图片的右下边区域
(二).button 组件
基础按钮:
1.外观的属性
(1) size控制按钮的大小1 default 默认大小 mini 小尺寸
(2) type用来控制按钮的颜色1 default 灰色
2 .primary绿色 warn红色
3 .plain按钮是否镂空，背景色透明
4 .loading 名称前是否带loading图标
开发能力:
open-type属性
contact直接打开客服对话功能―需要在微信小程序的后台配置
(1).将小程序的appid由测试号改为自己的 appid
(2).登录微信小程序官网, 添加 客服–微信
share转发当前的小程序到微信朋友中不能把小程序分享到朋友圈
getPhoneNumber 获取当前用户的手机号码信息结合一个事件来使用不是企业的小程序账号没有权限来获取用户的手机号码
(1)绑定一个事件 bindgetphonenumber
(2)在事件的回调函数中通过参数来获取信息
(3)获取到的信息己经加密过了需要用户自己待见小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了
getuserInfo获取当前用户的个人信息1使用方法类似获取用户的手机号码2可以直接获取不存在加密的字段
launchApp 在小程序当中直接打开 app
(1)需要现在app中通过app的某个链接打开小程F
(2)在小程序中再通过这个功能重新打开 app
(3)找到京东的app 和京东的小程序
opensetting打开小程序内置的授权页面1授权页面中只会出现用户曾经点击过的权限
feedback打开小程序内置的意见反馈页面1只能够通过真机调试来打开
(三).swiper 组件
轮播图外层容器 swiper
每一个轮播项swiper-item
swiper标签存在默认样式
(1) width 100%
(2) height 150px image存在默认宽度和高度320* 240
(3) swiper 高度无法实现由内容撑开
先找出来原图的宽度和高度等比例给swiper定宽度和高度
组件属性:
属性 作用
autoplay 自动轮播
interval 修改轮播时间
circular 衔接轮播
indicator-dots 显示指示器分页器索引器
indicator-color 指示器的未选择的颜色
indicator-active-color 选中的时候的指示器的颜色
(四). 导航组件
块级元素默认会换行可以直接加宽度和高度
基本属性:
属性 作用
url 要跳转的页面路径绝对路径相对路径
target 要跳转到当前的小程序还是其他的小程序的页面
self 默认值自己小程序的页面
miniProgram 其他的小程序的页面
open-type 跳转方式
open-type的值:
属性 作用
navigate 默认值―保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar页面
redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab 跳转到tabBar页面，并关闭其他所有非tabBar页面
reLaunch 关闭所有页面,打开到应用内的某个页面
(五). 自定义组件:
创建components文件夹,
在文件夹内components/Tabs下 创建组件名为tabs(新建文件时可使用右键的新建Component,这样工具会给你配置好)
使用组件时在使用者内填写被使用组件的路径
匿名插槽
<!-- json 配置 注册组件 -->
{
"usingComponents": {
"myHeader":"/components/myHeader/myHeader"
}
}
<!-- 普通插槽，在组件里写入 -->
<myHeader>
<view>用来放置要插入的内容</view>
</myHeader>
<!-- 子组件里写入 -->
<slot></slot>
具名插槽
如果之前玩过 vue 那么这个就很简单， 这个就是带有名字的插槽（具名插槽），可以吧内容插入到指定的位置，可以在组件中灵活的插值。
在子组件中的 json 中我们需要配置一下 multipleSlots:true ，默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。
Component({
options:{
multipleSlots:true
},
})
2.然后父组件中，要在标签上 slot="name1" 用于指定要传递内容
<myHeader>
<view slot="name1">
具名插槽111111
</view>
<view slot="name2">
具名插槽222222
</view>
</myHeader>
3.子组件中，给子组件添加 name，这样就ok了
<slot name="name1"></slot>
<slot name="name2"></slot>
- 父子组件传参的方式
一、父组件向子组件传参
方式：通过属性绑定的方式传递
1、在微信小程序结构目录中，新建一个组件组（组件的集合）。该组件组与页面在同一级目录下
2、新建一个header组件
a、header.json 设置"component": true ——含义：可设置自定义组件
b、父组件引用 ***.json设置 引用组件路径 "header":"../../components/header/header"
二、子组件向父组件传递参数
方式：通过方法绑定的方式传递
1.在子组件中通过triggerEvent定义一个函数并绑定参数
2.在父组件绑定子组件中定义的方法，并写一个处理的方法接受传递过来的参数
例如：在子组件中自定义一个itemChange方法 ，在父组件中绑定这个方法 （bind+itemChange）,并处理定义一个handleItemChange来处理接受的参数。
- Behavior的使用方式
什么是 behaviors
behaviors 是小程序中用于实现组件代码共享的特性，作用类似 Vue.js 中的 mixins。比如在多个组件中，有一部分代码是完全一样的，我们没有必要每个组件写一遍，为了方便，我们可以把这部分代码封装出来，放在 behaviors 中进行共享，谁用到这部分代码，直接引用就可以生效
behaviors 的工作方式
在小程序中，每个 behaviors 都可以包含一组属性、数据、生命周期和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件中可以引用多个 behaviors ，每个 behaviors 之间也可以相互引用
behaviors 的创建
调用 方法就可以创建一个共享的 behaviors 实例对象，供所有的组件使用
behaviors 的导入与使用
在组件中，使用 方法导入需要的 behaviors，挂载后即可访问 behaviors 中的数据或方法
behaviors 中所有可用的节点
比较常用的有 、、、
可用的节点 类型 是否必填 描述
properties Object Map 否 同组件的属性
data Object 否 同组件的数据
methods Object 否 同自定义组件的方法
behaviors Sting Array 否 引用其它的 behaviors
created Function 否 生命周期函数
attached Function 否 生命周期函数
ready Function 否 生命周期函数
moved Function 否 生命周期函数
detached Function 否 生命周期函数
UniApp（注意分清楚它和 wue和 wx,小程序的关系)
- 一句话总的形容一下uniapp.与vue,和微信小程序的异同点
uni-app是目前市面上比较流行的一种前端框架，它是基于vue框架而衍生出来的一个框架版本，它可以配合hbuilderx编辑器封装生成小程序、h5、app等，不用再去每个版本都去在编写一套程序，原生vue只能适配一个端，比如小程序是小程序,h5是h5，app是app，每一个端都要对vue进行适配，然后才能使用vue框架；
微信小程序是腾讯官方出的一款产品，他的设计思路和vue框架基本上差不多，就是语法上面有所不同，开发微信小程序可以用原生的小程序，也可以借用其他框架来开发小程序，一般来说，用其他框架引入到小程序里面，就得单独做一版专门针对小程序的框架版本。
综上所述，微信小程序是腾讯官方开发出来的一种特殊的产品，它必须依靠腾讯生态环境才能生存，vue移动端指的是把vue框架用在各种移动端代码上，uni-app是vue衍生出来的一套框架，他配合hbuilderx可以自动打包h5，打包app，打包小程序，不用再去 每种设备单独去做一套程序，也可以说一套代码，任何环境下都能运行。
- Uniapp中配置tabbar的方式
官方说：
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。
Tips
当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
- Uniapp,中常见的组件（说几个即可)
存储本地缓存
存储：
uni.setStorageSync('token', 'hello');
取值：
uni.getStorageSync('token');
表单组件
文本域
textarea值得注意的是默认限制输入长度140，如果打破这个限制，将其设置为-1
<textarea class="input-val" v-model="form.content" maxlength="-1" auto-height placeholder="请输入句子内容"/>
消息提示
最全的toast：
uni.showToast({
title:"请输入用户名密码!" ,
icon: 'none',
mask: true,
duration: 2000
})
icon值：
默认success。
（1）none：没有图标
（2）error：错误图标
（3）loading：加载
（4）success：成功
如果只是最简单的，超过7个字会显示不完全。
uni.showToast({
title:"请输入用户名密码!"
})
成功信息：
uni.showToast({
title: '提交成功',
duration: 2000
});
失败信息：
uni.showToast({
title: '提交失败',
icon: 'error',
duration: 2000
});
用户交互点击
uni.showModal({
title: '哦，答错了',
content: '是否加入错题本？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
- uniapp中常用的指令语句
Vue 指令 描述
v-text 更新元素的 textContent。
v-html 更新元素的 innerHTML。
v-show 根据表达式的真假值，切换元素的 display CSS property。
v-if 根据表达式的真假值来有条件地渲染元素。
v-else 为 v-if 或者 v-else-if 添加“else 块”。
v-else-if 表示 v-if 的“else if 块”。可以链式调用。
v-for 基于源数据多次渲染元素或模板块。
v-on 绑定事件监听器。
v-bind 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
v-model 在表单控件或者组件上创建双向绑定。
v-slot 提供具名插槽或需要接收 prop 的插槽。
v-pre 跳过这个元素和它的子元素的编译过程。
v-cloak 这个指令保持在元素上直到关联组件实例结束编译。
v-once 只渲染元素和组件一次。
v-is 在 DOM 内模板使用时，模板受原生 HTML 解析规则的约束。
52. Uniapp应用的生命周期、页面的生命周期、组件的生命周期
页面生命周期，其实就是小程序页面当中的生命周期。
页面生命周期
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动，则触底事件不会被触发
onTabItemTap 点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage 用户点击右上角分享
onPageScroll 监听页面滚动，参数为Object
onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object
onBackPress 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件
应用生命周期
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onUniNViewMessage 对 nvue 页面发送的数据进行监听
组件生命周期，其实也就是vue的生命周期，一般在uni-app当中在组件里面使用
组件生命周期
beforeCreate 实例已经开始初始化之后调用 【数据初始化未完成，页面没有开始渲染】
created 实例创建完成之后调用 【组件创建完成，不代表组件已挂载到页面】
beforeMount 在挂载开始之前被调用。
mounted 挂载到实例上去之后调用。 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
- 注意下拉刷新和触底加载的使用
uniapp触底加载
首先在packjson中编辑你需要该功能的页面下的style
在style中有一个参数为"enablePullDownRefresh",让参数值为true
"enablePullDownRefresh": true
在页面中 直接使用,与生命周期函数 同级别
onLoad(){
},
onReachBottom(){
// 触底的时候请求数据，即为上拉加载更多
var allTotal = this.page * this.pageSize
//this.page为加载次数，this.pageSize为每一次加载的数据条数
if(allTotal < this.totalElements){
//this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
this.allListItem = false;
this.page ++;
//加载次数递加
this.GetMoreCdcAccountList(this.usertoken); //请求更多数据列表
}else{
this.allListItem = true;
console.log('已加载全部数据')
}
},
methods:{
GetMoreCdcAccountList(){
console.log('请求更多数据')
//此处发送请求
uni.request（{
url：‘’
}）
}
}
下拉刷新
开启下拉刷新
在uni-app中有三种方式开启下拉刷新
方法一： 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
方法二: 在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。
方法三： 通过调用uni.startPullDownRefresh方法来开启下拉刷新
- uni.request的使用及封装
第一步： npm i uni-request -S
uni-app目录中默认是没有package.json文件，我们需要通过npm init进行生 成，生成之后就可以执行上面的命令
第二步：
import uniRequest from 'uni-request'
uniRequest.defaults.baseURL = '这里输入请求的网址'
uniRequest.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
uniRequest.timeout = 1000 * 60 //这里设置超时
/* 下面就是对请求进行拦截，设置token
在拦截时，对请求加入了一个时间参数t,加入这个参数的目的就是防止从缓存直接读取，因为每一次请求t参数的值都是不一样的 */
uniRequest.interceptors.request.use(request => {
let token = uni.getStorageSync('token') || ''
if (token) {
request.headers['token'] = token
}
request.headers['Content-Type'] = 'application/json; charset=utf-8'
if (request.method == 'post') {
request.data = {
...request.data,
t: new Date().getTime()
}
} else if (request.method == 'get') {
request.params = {
...request.params,
t: new Date().getTime()
}
}
return request
}, err => {
return Promise.reject(err)
})
/* 对响应的结果进行处理，根据具体情况封装*/
uniRequest.interceptors.response.use( response => {
if (response.data && response.data.code === 500 && response.data.msg !== "手机号未注册") {
uni.showToast({
icon: 'error',
title: response.data.msg,
duration: 2000
})
}
if (response.data && response.data.code === 401) {
uni.reLaunch({
url: '@/pages/login/login'
})
}
return response
}, error => {
if (error.response && error.response.data && error.response.data.msg) {
uni.showToast({
icon: 'error',
title: error.response.data.msg,
duration: 2000
})
}
return Promise.reject(error)
})
function doRequest(method, {url, params = {}, data={}, headers={}}) {
return uniRequest({
url,
method,
data,
params,
headers
})
}
/* 这里只对get post 请求进行，还有其它的，根据具体情况自己可以加的
这样处理完成之后，get,post请求其实形式上是完全一致的, 都是 get | post (url， 参数)*/
const post = (url,data = {}) => doRequest('POST', {url, params: {}, data, headers: {}})
const get = (url, params = {}) => doRequest('GET', {url, params, data: {}, headers: {}})
export default {
post,
get
}
- Uniapp, 中的本地缓存
1、uni.setStorage
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
存储成功之后，浏览器中查看：Application>localstorage,微信开发者工具中查看：storage
2、uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。推荐使用同步的接口，因为比较方便。
3、uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
注意：res={data:key对应的内容}
4、uni.getStorageSync
从本地缓存中同步获取指定 key 对应的内容。
5、uni.removeStorage
从本地缓存中异步移除指定 key。
6、uni.removeStorageSync
从本地缓存中同步移除指定 key。
- Uniapp,中的跳转方式(navigator标签、uni.navigateTo方法）及传参
uni中的导航跳转
利用navigator进行跳转
navigator详细文档：文档地址
跳转到普通页面
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
跳转到tabbar页面
<navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
利用编程式导航进行跳转
导航跳转文档
利用navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
<button type="primary" @click="goAbout">跳转到关于页面</button>
通过navigateTo方法进行跳转到普通页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
导航跳转传递参数
在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
接收参数的页面
<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
- Uniapp,中组件的创建以及使用和传参方式
uni-app中组件的创建
在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可
创建login组件，在component中创建login目录，然后新建login.vue文件
<template>
<view>
这是一个自定义组件
</view>
</template>
<script>
</script>
<style>
</style>
在其他组件中导入该组件并注册
import login from "@/components/test/test.vue"
注册组件
components: {test}
使用组件
<test></test>
组件的生命周期函数
beforeCreate 在实例初始化之后被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见
组件的通讯
父组件给子组件传值
通过props来接受外界传递到组件内部的值
<template>
<view>
这是一个自定义组件 { {msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
其他组件在使用login组件的时候传递值
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
子组件给父组件传值
通过$emit触发事件进行传递参数
<template>
<view>
这是一个自定义组件 { {msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
父组件定义自定义事件并接收参数
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
兄弟组件通讯
uni-ui的使用
uni-ui文档
1、进入Grid宫格组件
2、使用HBuilderX导入该组件
3、导入该组件
import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
4、注册组件
components: {uniGrid,uniGridItem}
5、使用组件
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
- Uniapp中的事件总线
事件总线
1.应用场景
除了父子组件传参之外，兄弟组件之间共享信息也是我们经常会遇到的。如果遇到这类问题，我们现在可以借助vuex，或者把数据统一放在他们父组件中处理。这两种方式都可以解决兄弟组件传递信息的问题。我们今天要介绍的是另一种方式-事件总线，事件总线也是我们开发过程中经常会用到的一种开发模式。
2.定义
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
3.监听事件
uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
uni.$on('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
4.触发事件
在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。
代码示例
uni.$emit('update',{msg:'页面更新'})
5.只监听一次——$once
监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
uni.$once(eventName,callback)
uni.$once('update',(data)=>{
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
6.移除监听
uni.$off([eventName, callback])
移除全局自定义事件监听器。
注意事项
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器；
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；