移动互联应用知识总结
2024-04-26 06:36:44
一、css动画
1.动画原理及2D变换
transform: 变换，用于描述物体的位置旋转缩放
①translate: 平移
第一个参数 水平平移量 右为正方向
第二个参数 竖直平移量 下为正方向
② rotate 旋转
参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180°
沿轴进行顺时针旋转为正方向，0°代表竖直向上
③scale 缩放
参数：比率 1 为原本大小
④skew 倾斜
⑤设置transform的原点
原点的位置会影响旋转的圆心，缩放的位置
/* 谷歌浏览器可以识别该属性 */-webkit-transform: translate(100px, 120px);/* 火狐浏览器可以识别该属性 */-moz-transform: translate(100px, 120px);/* 市面上现在流行使用postCss来解决css样式兼容性问题 */2.过渡动画
/* 定义初始状态 */transform: translateX(0px);/* transition: all 1s ease-in; *//* 播放过度动画至少包含 transition-property transition-duration *//* 指定css属性能够产生过度动画 */transition-property: left, transform;/* transition-property 还有两个待选项none: 无all: 所有属性都能播放过渡动画*/transition-property: all;/* 动画播放的时长 */transition-duration: 2s;/* 动画播放的速度曲线 *//* 待选项linear: 匀速直线运动ease-in: 慢进ease-out: 慢出ease-in-out: 慢进慢出cubic-bezier: 曲线函数*/transition-timing-function: linear;/* 动画播放延迟 */transition-delay: 3s;/* 合成属性 语法:transition: property duration timing-function delay;*/transition: all 3s linear 3s;3.3d变换和animation动画
3d变换：
总结：要使用3d变换需要依序执行以下步骤：1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;.scene {height: 100vh;/* 变换样式perserve-3d 代表将元素变成一个3D空间*/transform-style: preserve-3d;/* 灭点到屏幕的距离 *//* 若三维场景中不添加 perspective 则三维场景是一个正交视图 */perspective: 300px;/* 透视原点（灭点所在的坐标）原点为 0 值时，所在位置是scene的左上角*//* perspective-origin: center center; */perspective-origin: 0 0;}2. 在父元素上设置透视距离：perspective: 100px;3. 给场景添加演员，给场景元素添加子元素4. 在子元素上使用3d变换animation动画：
.box {/* 动画属性如下 *//* 动画animation必须包含 名称和时长两个属性才会进行播放 *//* animation一下四个属性可以和 tansition一块儿进行记忆 *//* 动画名称 */animation-name: move;/* 动画播放时长 */animation-duration: 3s;/* 动画播放的速度曲线 */animation-timing-function: linear;/* 动画延迟 *//* animation-delay: 3s; *//* 以下属性为 animation 独有的属性 *//* 动画的迭代次数infinite 无限次*/animation-iteration-count: 1;/* 动画播放方向待选项:normal: 顺向播放reverse: 反向播放alternate: 来回播放alternate-reverse: 反向来回播放*/animation-direction: normal;/* 动画填充模式（动画播放结束后所保留的状态）forwards: 保留结束帧的状态backwards: 保留起始帧的状态both: 保留初始和结束时的状态*/animation-fill-mode: both;/* 可以定义复合属性，取代上面的所有属性 *//* 赋值顺序，可以参考如下顺序 *//* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name *//* duration | timing-function | delay | name *//* duration | name *//* animation: 2s move;animation: 2s linear 3s move; */animation: move 3s linear 2s forwards;}/* 动画帧序列 */@keyframes move {/* 起始帧 */from {/* 每一帧中描述该元素的状态 */transform: translateX(0px);opacity: 0;}/* 可以用百分比来代表动画的中间状态 */50% {transform: translateX(600px);opacity: 1;}/* 结束帧 */to {transform: translateX(300px);}} let btn2 = document.querySelector('.btn2')let box = document.querySelector('.box')btn2.addEventListener('click', () => {// animationPlayState 动画播放状态// paused 暂停// running 播放if (box.style.animationPlayState === 'paused') {box.style.animationPlayState = 'running'} else {box.style.animationPlayState = 'paused'}})4.渐变色分栏布局与响应式
.box {/* 背景的渐变色实际上是设置的 background-image 而不是 background-color *//* 线性渐变 *//* 语法: linear-gradient(direction, color1, color2, color3 ... ) direction: 渐变色的朝向 以 to 开头, 或者可以添加角度值; 默认值为 to topcolor1 color2 ...: 渐变的颜色序列*/background-image: linear-gradient(30deg, #f00, #0f0, #00f);/* 颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变 */background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);/* 重复线性渐变 */background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);/* 径向渐变 */background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);/* 重复径向渐变 */background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);} .p {width: 800px;height: 500px;/* 设置文本列数 */column-count: 3;/* 设置列宽度 */column-width: 150px;/* 分栏边框，属性值和边框的属性值相同 */column-rule: 5px double red;/* 两列文本中间的间距 */column-gap: 100px;word-break: keep-all;} /* 什么是页面的响应式？页面的元素样式会根据页面的宽度做出变化*//* 为什么要使用页面响应式为了让同一个页面能够适配不同的设备*//* 如何实现响应式？ *//* 使用媒体查询，来实现响应式布局 *//* 媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式 *//* 语法：@media media-type and (condition1) and (condition2) ... *//* 媒体类型 media-type：备选项all: 所有设备print：打印机的预览模式screen：显示屏speech：语音合成器*//* min-width: 屏幕最小宽度 *//* max-width: 屏幕最大宽度 */二、jQuery
jquery 使用的方法：1. 查询并存储元素2. 操作元素，包括修改元素样式，绑定事件等什么是jquery 对象// 使用jquery $() 函数查询出来的返回值 就是一个jquery 对象// $box 就是一个jquery 对象// let $box = $('.box')获取jquery对象的方法有两种// 1. 使用 css 选择器let $li = $('ul>li')// 2. 使用 dom 对象// 先查询一个dom对象let box = document.querySelector('.box')// 使用dom对象获取一个jquery对象let $box = $(box)创建并插入元素// 创建一个节点，该节点就是一个jquery对象let $box = $(`<div class="box">new</div>`)// 某个元素追加一个子节点// $(document.body).append($box)// 追加一个子节点到另一个元素中// $box.appendTo($(document.body))// 某个元素追加一个节点到头部// $(document.body).prepend($box)// 追加一个子节点到另一个元素的头部// $box.prependTo($(document.body))let $box2 = $('.box').eq(1)// 某个元素的前面追加一个元素// $box2.before($box)// 某个元素被添加到另一个元素的前面// $box.insertBefore($box2)// 某个元素的后面添加一个元素// $box2.after($box)// 某个元素被添加到另一个元素的后面$box.insertAfter($box2)jquery对象的一些方法1、eq 读取对应索引位置的jquery对象let $li = $lis.eq(1)// 因为 $li 是jquery对象 所以可以直接使用jquery操作它$li.css('color', '#0f0')/2、get 读取对应索引位置的dom对象// let li = $lis.get(2)// li.style.color = '#f00'// 使用 [] 方括号的方式去获取索引对应的 dom 对象// 其结果等价于 get 函数获取的结果let li = $lis[2]li.style.color = '#f00'3、// 添加类$box.addClass('active')4、// 判断是否存在某个类名$box.hasClass('active')5、// 删除类$box.removeClass('active')6、// 读取属性let clazz = $box.attr('class')console.log(clazz);7、// 赋值属性$box.attr('my-data', 'hello world')8、// 删除属性$box.removeAttr('class')9、// 每一个元素都使用 div 来进行包裹// $('li').wrap('<div class="fs"></div>')10、// 所有的 li 元素用一个 div 进行包裹$('li').wrapAll('<div class="fs"></div>')11、// index() 查询某个节点在集合中的索引let index = $('.box').index($('.box:nth-child(3)'))console.log(index);12、// find() 查询某个节点的后代节点let $span = $('.box-list').find('.box>span')console.log($span);13、// js api 的查询方法let boxList = document.querySelector('.box-list')// 查询boxList的子节点console.log(boxList.querySelector('.box>span'));14、// closest 查询最近的父节点console.log($span.closest('.box-list'));jquery对象绑定事件// 和dom对象绑定事件进行类比// dom 对象有两种绑定事件的方法// 1. 使用 事件属性 例如: onclick onmousemove// 对应 jquery 的写法如下$btn.click(ev => {console.log('click');// ev 是jquery封装的事件对象console.log(ev);})// 再例如$btn.mousemove(ev => {console.log('mousemove');})// 可以直接使用事件对应的函数去触发事件，例如:$btn.click()$btn.mousemove()// 2. 使用事件监听器// $btn[0].addEventListener('click', ev=>{})// 对应的jquery写法：const handler = ev => {console.log(ev);console.log(1);}// 绑定事件$btn.on('click', handler)$btn.on('click', ev => {console.log(ev);console.log(2);})// 绑定一次性事件$btn.one('click', ev => {console.log(ev);console.log('one');})// 解绑指定事件处理程序// $btn.off('click', handler)// 解绑所有事件处理程序$btn.off('click')三、canvas画布
使用canvas的步骤
1. 创建canvas标签
2. 给canvas标签设置 width height 属性
3. 通过js 获取canvas标签
4. 通过canvas标签获取context画布上下文（画布对象）
5. 通过context绘制画布
1、// 绘制实心矩形(rectangle)// ctx.fillRect(x, y, w, h)// x: 水平坐标// y: 竖直坐标// 坐标原点在canvas左上角// w: 宽度// h: 高度2、// 镂空矩形// 参数和实心矩形相同// ctx.strokeRect(x, y, w, h)3、// 清空矩形, 用于清空画布ctx.clearRect(0, 0, 800, 600)4、// 绘制实心文字// 语法：ctx.fillText(text, x, y, max-width)// text: 要渲染的文本// x,y: 文本渲染的坐标位置// max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度// ctx.fillText('祖国万岁!!', 200, 100, 100)5、// 镂空文字// 参数和实心文本相同ctx.strokeText('祖国万岁!!', 200, 300)6、// 设置颜色和线宽ctx.strokeStyle = '#ff0'ctx.lineWidth = 15// 画线分两个步骤:// 1. 描点（设置路径）// 2. 画线（将所描的点连接起来）// 步骤一// 使用 beginPath 开启路径ctx.beginPath()// 移动笔头但不会记录路径上的线条ctx.moveTo(400, 100)// 用线绘制到下一个点ctx.lineTo(200, 200)ctx.lineTo(600, 200)ctx.lineTo(400, 100)// 将路径封闭ctx.closePath()// 注意：beginPath在画新的路径的时候必须调用，closePath选择性调用// 步骤二// 为了显示图形需要调用以下函数// 将路径所包围的图形用纯色来填充// ctx.fill()// 将路径用镂空线条进行绘制ctx.stroke()ctx.strokeStyle = '#f00'ctx.beginPath()ctx.moveTo(400, 400)ctx.lineTo(500, 400)// 角度转弧度的公式: rad = (PI / 180) * deg// 弧线// ctx.arc(x, y, r, start, end)// x: 圆心横坐标// y: 圆心纵坐标// r: 圆半径// start: 起始弧度 0度时的方向为水平向右 顺时针为正方向// end: 结束弧度ctx.arc(400, 400, 100, 0, Math.PI / 180 * 30)ctx.closePath()ctx.fill()// ctx.stroke()7、//绘制图片// 语法:// ctx.drawImage(image, dx, dy);// ctx.drawImage(image, dx, dy, dWidth, dHeight);// ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);// image: img 标签的 dom 对象// dx dy: 图片在canvas中的坐标// dWidth dHeight: 图片在canvas中的宽高// sx, sy: 参考图片源，截图的坐标// sWidth, sHeight: 截图的宽高四、多媒体标签、swiper和animate.css
1、多媒体标签
属性：
width 标签宽度
height 标签高度
controls 控制面板
muted 静音
autoplay 自动播放
src 媒体源
preload 预载模式
loop 循环
poster 海报
<body><!-- <video height="300" src="./video/oceans.mp4" controls muted loop poster="./img/desktop.png"></video> --><!-- 使用自动播放+静音，能实现自动播放的效果 --><!-- <video height="300" src="./video/oceans.mp4" controls autoplay muted></video> --><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio --><!-- 音频播放器 --><!-- 由于audio和video都属于HTMLMediaElement的实例所以audio的所有使用方法和video一样可以通过 instanceof 来判断一个对象是否是某个类型的实例video instanceof HTMLMediaElement--><!-- <audio src="./audio/moon.mp3" controls loop></audio> --><!-- source 标签若有多个，那么浏览器会从上至下加载直到某一个被加载成功为止 --><audio controls><!-- 数据源标签 --><source src="./audio/a44.mp3"><source src="./audio/b44.mp3"><source src="./audio/c4.mp3"></audio><video height="300" src="./video/oceans.mp4"></video><!-- 自定义控制器 --><div><button class="play">播放</button><button class="pause">暂停</button>当前时间：<span class="current-time"></span>总时间：<span class="total-time"></span><input class="inp" /><button class="go-to">跳转到此时间</button><button class="v-up">音量+</button><button class="v-down">音量-</button><button class="muted">静音</button></div><!-- 可以通过以下网站自定义滑块样式http://danielstern.ca/range.css/?ref=css-tricks#/--><input type="range" min="0" max="100" step="20" value="0"><span class="range-value">0</span><br /><!-- picture --><picture><!-- source 标签中有多个待选项时，使用srcset规定资源路径 --><!-- media 设置媒体查询 --><!-- 媒体查询的顺序由大到小 --><source srcset="./img/1.png" media="(min-width: 800px)"><source srcset="./img/2.png" media="(min-width: 600px)"><img width="500" src="./img/desktop.png"></picture>
</body>
<script>let inputRange = document.querySelector('input[type=range]')let rangeValue = document.querySelector('.range-value')inputRange.addEventListener('input', () => {rangeValue.textContent = inputRange.value})// 可以使用 Audio 类名来创建 audio 标签// let audio = new Audio()// audio.src = './audio/a4.mp3'// audio.play()let video = document.querySelector('video')let playBtn = document.querySelector('.play')let pauseBtn = document.querySelector('.pause')let totalTime = document.querySelector('.total-time')let currentTime = document.querySelector('.current-time')let inp = document.querySelector('.inp')let goToBtn = document.querySelector('.go-to')let vUpBtn = document.querySelector('.v-up')let vDownBtn = document.querySelector('.v-down')let mutedBtn = document.querySelector('.muted')let timer// 播放playBtn.addEventListener('click', () => {video.play()// 显示总时长// textContent 标签体的文本内容// duration 代表媒体时长，单位: 秒totalTime.textContent = video.durationcurrentTime.textContent = video.currentTimeclearInterval(timer)timer = setInterval(() => {// currentTime 代表当前播放的时间currentTime.textContent = video.currentTime}, 1000)})// 暂停pauseBtn.addEventListener('click', () => {video.pause()})// 跳转进度goToBtn.addEventListener('click', () => {let currentTime = Number(inp.value)// 直接赋值 video 的 currentTime 就可以跳转进度video.currentTime = currentTime})// 音量+vUpBtn.addEventListener('click', () => {// volume 是一个 0~1 的数字 用于控制音量video.volume = video.volume + 0.1 > 1 ? 1 : video.volume + 0.1})// 音量-vDownBtn.addEventListener('click', () => {// volume 是一个 0~1 的数字 用于控制音量video.volume = video.volume - 0.1 < 0 ? 0 : video.volume - 0.1})// 静音mutedBtn.addEventListener('click', () => {video.muted = !video.muted})
</script>2、animate.css
<!-- 动画必须添加 animate__animated其次添加动画名称所代表的类名--><!-- <h1 class="animate__animated animate__bounceInDown">hello world</h1> --><!-- 辅助类 --><!-- 延迟 --><!-- <h1 class="animate__animated animate__bounceInDown animate__delay-2s">hello world</h1> --><!-- 播放速度animate__slow 2sanimate__slower 3sanimate__fast 800msanimate__faster 500ms--><!-- <h1 class="animate__animated animate__bounceInDown animate__slower">hello world</h1> --><!-- 动画播放次数animate__repeat-1 1animate__repeat-2 2animate__repeat-3 3animate__infinite infinite--><!-- <h1 class="animate__animated animate__bounceInDown animate__infinite">hello world</h1> --><!-- 动态添加动画 --><!-- <h1>hello world</h1><button class="play">播放</button> --><!-- 动画的叠加 只需要添加多级元素来播放不同的动画即可--><!-- <div class="animate__animated animate__fadeInUpBig"><h1 class="animate__animated animate__bounceInRight">hello world</h1></div> --><!-- 自定义动画由于animate.css本质上是使用的 animation 样式播放的动画，所以可以手动强制修改 animation相关样式，来实现自定义--><h1 class="animate__animated animate__bounce">hello world</h1>3.swiper.js:是个专门用于播放滚动动画的工具
官网地址：<https://swiperjs.com/>
参考地址：<https://www.swiper.com.cn/>
安装方式：
1、cdn:从 <https://swiperjs.com/get-started#use-swiper-from-cdn> 找到 `cdn` 地址并引入即可
2、npm or yarn：在终端窗口中，通过两句命令 npm init -y 和 npm i swiper
五、微信小程序
1.微信小程序基础
①项目下的文件和文件夹的作用如下：
components: 小程序的自定义组件
images: 图片文件夹
pages: 存放页面文件的文件夹
index: 页面文件夹
index.js: 页面的js代码
index.json: 页面的配置
index.wxml: html模板文件
index.wxss: 页面的样式文件
app.js: 微信小程序的程序入口(程序入口：开始执行代码的地方)
app.json: 小程序应用程序的全局配置文件
app.wxss: 小程序的全局样式(.wxss文件是小程序的样式文件)
envList.js: 小程序云环境列表
project.config.json: 小程序项目的配置
sitemap.json: 小程序路由配置
②常用标签
<!-- page 标签相当于 html 中的 body -->
<page></page>
<!-- view 标签相当于 html 中的 div -->
<view></view>
<!-- text 相当于 html 中的 span -->
<text></text>
<!-- image 相当于 html 中的 img -->
<image></image>
<!-- block 是一个自身不会显示的标签 -->
<block></block>③单位rem和rpx
rem 是 html 中的长度单位，代表相对根节点(html)上字体的大小
rpx 是 微信wxml中的长度单位，iphone5 机器上1个像素长度等于1rpx
④模板语法
# 模板语法
参考：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
模板语法是微信规定的一套书写wxml的语法## 插值
作用：用于将变量值插入页面
语法：
```wxml
<!-- name 变量，定义在 js 文件的 data 中 -->
{{name}}
```
> 注意：插值运算的花括号中{{}}，填写的内容其实是js表达式## 循环渲染
作用：可以将数组数据循环显示到页面中
语法：
```wxml
<!-- wx: 开头的写在标签头部的东西 称为指令 -->
<!-- array: 来自js data中的数组 -->
<!-- 使用 wx:for 一定要加上 wx:key，wx:key的值是array对象中的不可重复的属性 -->
<view wx:for="{{array}}" wx:key="id"><!-- index: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前索引 --><!-- item: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前数组成员 -->{{index}}: {{item}}
</view>
```## 条件渲染
可以根据条件判断，选择性的渲染页面
语法：
```wxml
<view wx:for="{{table}}" wx:key="name"><text>{{index}}: 姓名 = {{item.name}}; 年龄 = {{item.age}}; 性别 = </text><!-- wx:if 指令的值为布尔表达式，为true是渲染该节点，否则不渲染 --><text wx:if="{{item.sex==='male'}}">男</text><!-- wx:if 可以和 wx:elif、wx:else 连用 --><text wx:elif="{{item.sex==='female'}}">女</text><text wx:else>其他</text>
</view>
```2.小程序应用开发
①阿里iconfont的使用
阿里iconfont是阿里的矢量图库，图库提供各式各样的图标。
矢量图描述了绘图时所使用的坐标点，在等比例缩放图片时，图片不会变模糊。
## 图库使用流程
网址：<https://www.iconfont.cn/>安装流程：
1. 选择图标，加入自己的项目
2. 下载自己项目
3. 解压下载的zip文件
4. 引入解压文件中的 iconfont.css 文件使用方法：
1. 使用 span 标签，给标签 class 加入 iconfont
2. 在自己的项目中选择一个图标的 class
3. 在 span 标签中加入所选 class 即可
> 注意：iconfont图标被当作字符使用，所以调节大小时，使用 font-size 属性## 在微信小程序中使用iconfont
1. 在 iconfont 网站的项目中点击 `项目设置` 设置字体类型为 `Base64` 然后下载项目
2. 将 iconfont.css 改名为 iconfont.wxss
3. 将 iconfont.wxss 放入小程序项目目录下
4. 在小程序的 app.wxss 第一行代码加入 @import '...' (此处是iconfont.wxss文件路径)
安装好后其余使用方法和 html 中的方法一样②页面底部选项卡
在 app.json 中 增加 tabBar 配置就能添加选项卡
```json
{"tabBar": {"selectedColor": "#444", // 选中的按钮的文本颜色"list": [ // 按钮列表{"pagePath": "pages/read/read", // 跳转的页面路径"text": "领读", // 按钮的文字描述"iconPath": "image/tab_icon1.png", // 未选中时的图标路径"selectedIconPath": "image/tab_icon1_active.png" // 选中时的图标路径}]},
}
```
注意：要显示选项卡，按钮列表中，必须要有一个配置的 pagePath 属性值，是小程序的入口页面
注意：底部选项卡指定的页面不能是分包里的页面自定义底部选项卡图标
可以在阿里适量图库下载需要的图标（一般来说是一个镂空图标和一个填充图标）
将下载后的图片复制到小程序项目目录下，然后再tabBar配置选项中配置即可
③导航与页面间传参
导航：引导页面跳转到指定位置
导航方法有两种：1. 页面标签进行导航，类似 html 中的 a 标签；2. 使用js进行导航，类似于 location.href
## 使用 navigator 标签
文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
语法：
```html
<!-- url：要跳转到的页面路径 -->
<!-- 若要传递参数，可以在url后面增加 ?key=value 的参数 -->
<navigator url="path"></navigator>
```## 使用 wx.navigateTo 函数
文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
语法：
```js
function(){wx.navigateTo({// path: 要跳转的路径// key=value: 要传递的参数url: 'path?key=value'})
}
// wx.navigateTo 跳转到某页 会新增堆栈
// wx.redirectTo 重定向到某页 不会新增堆栈
// wx.navigateBack 返回
```
> 参数的获取可以在另一个页面的 onLoad 声明周期函数中 options 变量中存放着参数④获取页面元素
## 方法：
步骤如下：
获取查询器：
let query = wx.createSelectorQuery()
使用查询器 查找节点
query.select(selector) 或者 query.selectAll(selector)
let nodeRef = query.select(selector) // nodeRef 大致可以理解为是页面元素
获取元素属性：
```js
// fields 接收两个参数,
// 第一个参数：查询属性的配置
// 第二个参数：查询结束的回调
nodeRef.fields({dataset: true, // 自定义属性，也就是标签上 data- 开头的属性size: true, // 元素的宽高rect: true, // 元素的位置 top left right bottomproperties: ['url'], // 元素的固有属性，不能查询 id class style 属性和绑定的事件属性computedStyle: ['backgroundColor', 'fontSize'] // 查询样式
}, (res)=>{// 该 res 就是查询的结果console.log(res)
})
```
当调用完 fields 后 ，一定要执行 exec，例如：
```js
query.exec()
```## 查询组件
小程序组件类似html标签，可以使用css选择器进行查询
```js
// this 是当前页面对象模型
// 通过 this.selectComponent 查询当前页中对应css选择器的组件
const checkbox = this.selectComponent('.checkbox')
```⑤自定义属性data-
和 html 一样，微信小程序的标签上也能自定属性，但是必须是以 data- 开头的属性，例如：
<!-- 此处的data-id就是一个自定义属性 -->
<text data-id="0">hello world</text>
除了使用 wx.createSelectorQuery 获取页面属性，来获取 data- 开头的自定义属性以外，还可以通过事件获取按钮上的自定义属性，例如：
<button data-id="0" bindtap="remove">删除</button>
⑥将数据保存到小程序的全局对象中
```js
// 获取小程序实例对象
const app = getApp()
app.globalData.x = 1 // 给小程序的全局对象赋值
// 只要不关闭小程序就能通过小程序全局对象保存参数
```## 持久化数据
什么叫持久化？持久化就是长期存储数据到磁盘中，关闭应用程序后，存储的数据还在
异步是什么？异步就是程序执行的时候不会等待或卡顿
同步是什么？同步的程序在调用的时候会等待或卡顿异步存储
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
wx.setStorage(Object object)
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorage.html
wx.getStorage(Object object)
异步删除
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.removeStorage.html
wx.removeStorage(Object object)下面的是上述方法的同步版本
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.htmlhttps://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.htmlhttps://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.removeStorageSync.html⑦分包：将项目资源切分成多个小块的过程就是分包
项目资源包只允许在2m以内，所以当项目过大时内容超过2m，则需要进行分包
⑧设备的本地功能调用
在不同的设备上可能存在一些设备独有的功能，例如：摄像头，陀螺仪，卫星定位等等
例如：扫描二维码
```js
wx.scanCode({onlyFromCamera: false,success: (res) => {console.log(res);},
});
```例如：摄像头拍照
```html
<!-- 添加相机组件到页面 -->
<cameradevice-position="7"flash="off"binderror="error"style="width: 100%; height: 300px;"
></camera>
```⑨事件
bind：普通的绑定事件，并且事件可以冒泡
catch：绑定事件，并不会冒泡
capture-bind：捕获事件并可以冒泡
capture-catch：捕获事件并不冒泡
⑩授权
用户需要使用本地设备上的一些设备功能时，需要向系统获取设备权限，例如：摄像头，定位信息，联系人，陀螺仪等
什么时候使用授权：在用户即将使用一些需要授权才能使用的本地设备功能时(微信小程序已经把这些功能制作成了接口，当需要调用这些接口的时候就可以进行授权)
流程
- 读取当前权限
- 判断是否存在权限
- 不存在权限就进行授权
（11）组件开发
组件：高度封装独立运行的模块 组件有自己的数据 自己的标签模板 等等
组件的作用就是为了复用代码
```js
// 在组件的配置中添加 properties 配置
Component({/*** 组件的属性列表*/properties: {// 声明属性 value// 具体声明方式可参考 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html#properties-%E5%AE%9A%E4%B9%89value: {type: String, // 属性类型 可以通过设置 optionalTypes 来接收多种类型的数据value: 'o,k', // 属性默认值// 属性变化监听器observer: function (newVal, oldVal) {console.log(newVal);console.log(oldVal);console.log(this)}}},
})
```
组件内设置属性的方法和 `Page` 设置 `data` 是一样的
```js
// 使用 setData 设置属性
this.setData({value: 'hello'})
```
在 `Page` 中注册组件后就可以将组件作为标签使用了
```json
// 注册组件
{"useingComponent": {"my-component": "path/to/component"}
}
```
```html
<!-- 使用组件 -->
<!-- _value 是当前页面 data 中的值 -->
<my-component value="{{_value}}"></my-component>
```
> 注意: 除了在组件内修改 `value` 值以外，还可以通过修改 `Page` 的 `_value` 来修改组件的 `value` 值
## 组件方法
### 获取组件并调用组件方法
```js
Page({getComponent() {// 给组件添加 class="my-component"// 通过 selectComponent 获取组件let com = this.selectComponent('.my-component')// 假设组件 methods 中有个方法叫 myFn// 调用组件方法com.myFn()}
})
```
## 组件事件
```html
<!-- 假设组件的模板如下 -->
<button bindtap="onClick">发送点击事件</button>
```
```js
// 组件声明如下
Component({methods: {onClick() {// triggerEvent 可以发出事件// 文档: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html#%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6// 第一个参数: 发出的事件名称// 第二个参数: 事件传递出去的参数// 第三个参数: 事件选项this.triggerEvent('my-click', 'my detail')}}
})
```
```html
<!-- Page 的 wxml 如下 -->
<!-- 通过 bind:<event-name> 的方式绑定事件 -->
<my-component bind:my-click="myClickHandler"></my-component>
```
```js
Page({// myClickHandler 将接收组件的 my-click 事件myClickHandler(event) {// event.detail 的值就是 triggerEvent 的第二个参数值console.log(event.detail)}
})
```3.云开发
①云环境：云端（远程端）的运行程序的平台
②云函数：云函数就是在云端（远程端）调用的函数
调用函数时，首先发起网络通信，让服务器调用函数，然后通过网络返回结果
定义云函数
1. 在编辑器的 cloudFunctions 文件夹中右键 新建node.js云函数
2. 编辑index.js中的main函数 返回想要的返回值
③云数据库：数据库软件在服务器上运行
数据库的增删改查
增删改查是数据库的四个操作
1. 增：添加数据
2. 删：删除数据
3. 改：修改数据
4. 查：查询数据
数据库的增删改查是数据库最基础的操作
### 初始化数据库连接
1. 在 app.js 的 onLaunch 中 初始化数据库
```js
//app.js
App({onLaunch: function () {......this.globalData = {}// 初始化数据库const db = wx.cloud.database()// 在全局对象中保存db对象this.globalData.db = db}
})
```
2. 在使用数据库的页面中获取db对象
```js
const db = getApp().globalData.db
```
3. 获取要操作的数据库表
```js
// 获取数据库表 参数为表名
const collection = db.collection('collectionName')
```
4. 通过表对象执行数据库操作### 插入数据
```js
insert() {// 获取插入数据的表格// 参数是表格名const students = db.collection('students')// 使用add函数插入数据students.add({// 要插入到数据库的数据data: {name: '法外狂徒张三',sex: 'other',age: 30},success(res) {console.log(res);},fail(reason) {console.error(reason);}})
}
```### 查询数据
从形式上来分，可以分为 列表查询和分页查询
列表查询：适用于手机等移动端查询一个数据列表的查询方法
分页查询：用于将数据像书页一样分页码进行查询
此处以列表查询为例
```js
// 获取数据库表
const students = db.collection('students')
// 查询数据并按照数据的更新时间进行排序
// orderBy 函数用于数据排序
// 第一个参数：排序字段
// 第二个参数：排序方法（是升序asc还是降序desc）
// limit 用于规定返回数据量
// get 查询函数 通常放在链式调用的尾部
students.orderBy('updateTime', 'desc').limit(2).get({success(res) {console.log(res);}
})
// 添加查询条件和查询指令
// 查询指令：用于规定如何查询的一些查询方法
// 文档地址：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/query.html
const _ = db.command // 获取指令对象
// where 添加查询约束（where是约束的意思）
students.orderBy('updateTime', 'desc').limit(2).where({// 参数是个对象// key 要添加约束的对象// value 什么样的约束 此处的例子 是查询 updateTime 字段小于指定值的数据updateTime: _.lt(new Date('Mon Sep 13 2021 09:40:13 GMT+0800'))
}).get({success(res) {console.log(res);}
})
```### 更新数据
```js
update() {const students = db.collection('students')const _ = db.command // 获取指令对象// 获取对应id的文档对象const student = students.doc('cd045e75613eabf80d332db93f080137')student.update({// data 要修改的字段集合data: {// 规范的做法是使用 set 指令经行修改// name: _.set('修成正果张三'),name: '修成正果张三',updateTime: new Date() // 更新时间},success(res) {console.log(res);}})// 多条数据的更新如下// 调用表格的 where 函数添加查询条件students.where({sex: 'male'}).update({ // 调用 update 函数进行更新data: {age: 16},success(res){}})
}
```### 删除数据
```js
remove() {const students = db.collection('students')// 获取对应id的文档对象// 此处的id就是想要删除的数据的idconst student = students.doc('cd045e75613eabf80d332db93f080137')// remove 删除对应id的数据student.remove({success(res) {console.log(res);}})// 批量删除// 调用表格的 where 函数添加查询条件students.where({sex: 'male'}).remove({ // 调用 remove 函数进行删除success(res){}})
}
```总结
这个阶段的内容知识点比较多，需要我们课下多花时间去练习记忆。
移动互联应用知识总结相关推荐
- 魔图互联：知识图谱推荐系统-给人们带来更个性化的推荐
魔图互联 知识图谱推荐系统:http://motuhulian.com/ 市场分析 首先是市场分析,第一,市场需求大,除了应用于推荐系统.舆情分析.文本检测等应用.知识图谱还可以应用于金融.零售.地产 ...
- 【c#】24点游戏的实现（可存档且局域网互联）
(更新,附上此款游戏的源代码供大家学习吧!http://download.csdn.net/detail/gshengod/5774531) lz辛苦考上了北邮的研究生,刚进入实验室,就接到了一个棘手 ...
- 线序及模式配置Linux,[CCNA图文笔记]-1-水晶头线序及设备互联法则
引言 这篇文章主要介绍水晶头的线序以及设备互联基础知识,压制水晶头是网络工程师最基本的一项技能,希望大家从这篇文章出发,展开一段愉快的CCNA学习之旅. 文章目录 0×1.水晶头的排线顺序 对于有线网 ...
- 知识图谱从入门到应用——知识图谱的应用
分类目录:<知识图谱从入门到应用>总目录 相关文章: · 知识图谱的基础知识 · 知识图谱的发展 · 知识图谱的应用 · 知识图谱的技术结构 知识图谱支持语义搜索 知识图谱源于互联网,所以 ...
- 【工业智能】知识进化论：卓越运营是如何拥抱工业智能，如虎添翼的？
小江按:2017年的句号,2018年的起点,我们从知识进化论的角度来聊一聊卓越运营是如何拥抱工业智能,为2018的企业转型升级提供思路. 要 点 卓越运营中关于流的改进的四个方面: 物料流 信 ...
- 知识图谱学习笔记02-经典的知识图谱项目介绍
CYC Cyc是一个知识库系统,由Douglas Lenat于1984年开始创建.其最初目标是建立人类最大的常识知识库,其中包含了典型的常识知识,例如"每棵树都是一种植物"和&qu ...
- 知识图谱_概述：课程PPT+个人理解
//2019.05.08 一.概念(是什么) 1.知识 :有不同的解释,可以是"不变的真理"."经验.背景.解释"."交工的信息" (1)分 ...
- 什么是图数据库？图数据库实践与创新浅析
近日,中国工程院院士,清华大学计算机科学与技术系教授郑纬民先生,在人民日报发表文章<把握图数据库自主创新机遇>,建议国内科研学者和工程人员,要在图数据库的理论研究与工程研发上坚持自主创新道 ...
- 领域应用 | 基于知识图谱的警用安保机器人大数据分析技术研究
本文转载自公众号:警察技术杂志. 郝久月 樊志英 汪宁 王欣 摘 要:构建大数据支撑下的智能应用是公安信息化发展的趋势,警用安保机器人大数据分析平台的核心功能包括机器人智能人机交互和 ...
最新文章
- puppet recurse 导致的性能问题一例
- 使用IntelliJ IDEA 2016创建maven管理的Java Web项目
- js webapp://_Project Student：维护Webapp（只读）
- 华为linux版笔记本安装win7,华为MateBook X Pro笔记本怎样安装win7系统
- url参数拼接 php,PHP解析url并得到url参数方法总结
- 拓端tecdat|R语言推特twitter网络转发可视化分析
- Pycharm导入MySQL驱动包误区
- JS 幻灯片代码(含自动播放)
- 谷歌ai人工智能叫什么_为Google产品提供动力的人工智能
- ARM7、ARM9、ARM11、ARM-Cortex的关系
- 无疆_炎戎的2011跨年总结
- java速算24,java枚举速算24正解集合
- 【经典算法实现 3】冒泡排序算法（单向冒泡，双向冒泡）
- 学计算机未来的规划,未来学习计划范本
- css文件处理，安装 less-loader
- 为什么梦幻西游服务器名字有显示但是区名字没有了,梦幻西游：三月份的第一个新区注定要变鬼，从名字就能看得出来...
- Java基础匿名内部类
- RPG游戏《黑暗之光》流程介绍与代码分析之（二）：角色创建界面的实现
- Javascript在线调试安卓工具的实现
- 产品运营要怎么进行用户拉新？