一:运行环境不同
网页------浏览器
小程序------微信环境
二:开发模式不同
网页: 浏览器+代码编辑器
小程序 1:账号 2:微信开发者工具 3:创建和配置项目
三:API不同
网页 DOM+BOM
小程序 微信提供的API 地理定位 支付 扫码
2:小程序的组件
//思维铺
i靠
3:循环
*this 指的是item
4⼩程序页面有⼏个⽂件?
js 逻辑代码
json 配置文件
wxml 结构
wxss 样式
5:事件
data:{
fn:true
}
Fn(){
this.setData({
fn:!this.data.fn
})
}
6:文本框双向绑定
name(e){
this.setData({
username:e.detail.value
})
}
7:⼩程序WXSS与CSS 的区别
wxss 背景图⽚只能引⼊外链,不能使⽤本地图⽚
⼩程序样式使⽤ @import 引⼊ 外联样式⽂件,地址为相对路径。
尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。
8:下拉刷新和上拉加载
1.下拉刷新
手指在屏幕上下拉滑动操作,重新加载页面数据
1启动全局局部下拉刷新
2配置下拉刷新窗口样式
3监听下拉刷新事件
4停止下拉刷新动作
2.上拉加载
手指在屏幕上上拉滑动操作,加载更多数据
1.配置上拉触底距离
2.监听页面的上拉触底事件
3.上拉触底时要做合并
9:页面导航
声明式
跳转到非tabbar
//非tabbar
//tabbar
//返回
编程式
wx.navigateTo 【奶为GetTo】
wx.switchTab 【S维持Tab】
wx.navigateBack 【奶为Get罢课】
10:⼩程序wx:if和 hidden的区别
wx:if : 有更⾼的切换消耗。惰性
hidden : 有更⾼的初始渲染消耗。
使⽤
频繁切换使⽤ hidden , 运⾏时条件变化使⽤ wx: if
11:⼩程序的⽣命周期函数
1.应用生命周期
1.onLaunch() // 小程序初始化完成执行,全局只触发一次,可以做一些初始化工作 //赖吃 2.onShow() // 小程序启动,从后台进入到前台显示时的函数 3.onHide() // 小程序启动,从前台进入到后台显示时的函数
2.页面生命周期
1.onLoad() //生命周期函数--监听页面加载 一个页面只调用一次 //捞的
2.onReady() //生命周期函数--监听页面初次渲染完成 一个页面只调用一次 //软丢
3.onShow() //生命周期函数--监听页面显示
4.onHide() //生命周期函数--监听页面隐藏
5.onUnload() //生命周期函数--监听页面卸载 一个页面只调用一次 //昂捞的
12: ⼩程序的双向绑定和Vue哪⾥不⼀样?
⼩程序直接使⽤ this.data.key = value 是不能更新到视图当中的。 必须使⽤ this.setData({ key :value })
来更新值。
13:数据监听器
监听和响应任何属性和数据字段的变化,从而执行特定的操作
Component({
observers:{
'字段A,字段B':function(字段A的新值,字段B的新值){
//代码
}
}
})
14:小程序中如何自定义tabBar
在app.json中全局开启 在根目录下创建custom-tab-bar文件夹,里面放自定义的tabBar文件 【卡斯特姆】 最后再编写tabBar代码
15:什么是插槽
组件的wxml中可以提供一个
节点,用于承载组件引用时提供的子节点。
16:父子组件通信
父子组件之间通信的 3 种方式
① 属性绑定
-
用于父组件向子组件的指定属性设置数据,只能设置 json 兼容的数据
② 事件绑定
-
用于子组件向父组件传递数据,可以传递任意数据
③ 获取组件实例
-
父组件还可以通过 this.selectComponent() 获取子组件实例对象
-
这样就可以直接访问子组件的任意数据和方法
17:如何封装小程序请求
首先创建一个名为request.js文件 在js文件中var声明一个host【厚斯】变量为基准地址 再创建一个名为request【瑞快死】封装函数,函数中设置参数 【麦射死】【斯科塞斯】【费油】 分别(url,data,method, success, fail)对应地址,传递的数据,方法,成功的回调函数和失败的回调函数 在函数中让基准地址与url进行拼接,再配置其他参数执行的方法 再次封装常用方法的函数(get,post等) 同样在方法中调用request参数中请求方法为大写的GET,POST 最后再导出get,post方法
在组件中如何使用? 声明一个http变量 变量中require【瑞快额】相对路径到request.js【瑞快死】文件 创建一个对象,对象中所有传递请求参数赋值给变量params http.get()方法 参数为请求的地址,params传递的数据,成功的回调和失败函数的回调函数
18:组件生命周期
一.全部生命周期
1.created:在组件实例刚刚被创建时执行
2.attached:在组件实例进入页面节点树时执行
3.ready:在组件在视图层布局完成后执行
4.moved:在组件实例被移动到节点树另一个位置时执行
5.detached:在组件实例被从页面节点树移除时执行
6.error:每当组件方法抛出错误时执行
二.组件生命周期最主要的三个:
1.created:在组件实例刚刚被创建时执行
2.attached:在组件实例进入页面节点树时执行 //哎踏吃特
3.detached:在组件实例被从页面节点树移除时执行//戴特吃特
19:app.json全局配置⽂件描述
pages : ⽤于存放当前⼩程序的所有⻚⾯路径
window : ⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊配置。
tabBar : ⼩程序底部的 Tab ,最多5个,最少2个。
20.wxml与html的区别
wxml是微信自己定义的一套组件
html是超文本标记语言
22:分包
把一个完整的小程序项目,按照需求划分为不同的子包,最终打包成不同的分包,用户在使用时按需进行加载
好处:优化小程序首次启动的下载时间
分包体积限制
-
整个小程序所有包大小不超过16M(主包+分包)
-
单个分包/主包大小不能超过2M
24:组件和页面的区别?
都是由4个文件组成 .js .json .wxml .wxss 组件: 组件的json文件中需要声明 "component": true, 组件的 .js文件中调用Component() 函数 组件的事件处理函数需要定义到methods中 页面: 页面的 .js中调用 Page()方法
25:⼩程序怎么跟随事件传值
aa在⻚⾯标签上通过绑定dataset-key= value,然后绑定点击通过 e.currentTarget.dataset.key 来获取
27:节流
连续触发事件,但是在n秒中只执行一次函数
使用场景:轮播图点击效果,鼠标移动,滚动条滚动,上拉加载
案例:轮播图完成切换需要1s,不加节流,快速点击,它就快速切换 ;加了节流,不管快速点击多少次,1s内只执行一次
1. 什么是防抖和节流
本质是优化执行代码的一种手段
防抖:就是定义一个定时器,添加时间在定义的时间内只执行一次他的事件倒计时结束再执行
节流:防止额外的请求,就是定义一个变量判断是否在请求数据,请求之前开启节流阀 请求之后在再关闭
防抖
形象的说就是防止抖动 例如:
(1) 一个搜索框 用户不停的输入内容(这个时候就是抖动的过程),等用户输入停止后,再触发搜索
防抖函数在每一次都有内容后进行清除定时器,是为了保证当前执行的函数就是当前规定的时间内执行的最后一次操作
节流
形象的或就是节省交互沟通 例如:
(1) 点击按钮请求ajax数据 多次点击就是请求多次数据 创建节流阀(布尔值控制)
进入请求关闭节流阀 请求完毕开启节流阀
重复点击进入判断 上一次请求未结束(节流阀==false)不能再次重复请求
区别:
防抖 保证当前执行的函数就是当前规定时间内执行的最后一次操作
节流 保证在规定时间只会执行一次操作
2. JavaScript的数据类型都有什么?
基本数据类型:Number、String、Boolean、Null、Undefined
复杂数据类型:Object(Function、Array、Date、RegExp)
9、es6新增哪些特性?
es6新增了promise(标题)
es6新增了模块化
新增了class关键字
新增了箭头函数
新增了解构赋值
新增了let const关键字
新增了简单数据类型symbol
10.闭包
闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取
function person(){
let str="闭包"
function sum(){
console.log(str)
}
}