微信小程序常见知识点总结

1、小程序中如何进行接口请求？会不会跨域，为什么

2、小程序的常用命令有哪些

3、你认为微信小程序的优点是什么，缺点是什么

4、微信小程序中的js和浏览器中和node中的区别

5、微信小程序中的数据渲染浏览器中有什么不同

6、简述一下微信小程序中通讯模型

7、谈谈对微信小程序中生命周期函数的理解

8、微信小程序中如何进行事件的定义，传参

9、wxss和css有什么区别

10、小程序如何进行页面的跳转传参以及接收数据

11、小程序如何进行本地存储

12、谈谈你对微信小程序请求封装的理解

13、对小程序中常见的开放能力API有什么了解

14、小程序的父子传参和vue中的有什么区别

15、谈谈你对behavior的理解

16、如何优化首次加载小程序的速度

17、如何实现瀑布流效果

18、谈谈你对WebSocket的理解

1、小程序中如何进行接口请求？会不会跨域，为什么

wx.request

不会跨域

因为不是浏览器，没有同源策略

2、小程序的常用命令有哪些

（1）bindTap 当用户点击组件时，会在js文件中的page里面找到对应的事件处理函数

（2）wx:for 可以循环数组

wx:for-index指定数组当前下标的变量名（也就是索引）

wx:for-item 指定数组当前元素的变量名（也就是键值）

wx:key唯一标识避免重复

（3）wx:if wx:elif wx:else 条件渲染

3、你认为微信小程序的优点是什么，缺点是什么

优势：①容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口，这些都有助于推广小程序；②使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用；③体验良好。小程序不会像H5页面一样经常出现卡顿、延时、加载慢、权限不足等问题④；成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一。

劣势：①单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M；②需要像app一样审核上架，这点相对于H5的发布要麻烦一些；③处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

4、微信小程序中的js和浏览器中和node中的区别

浏览器中JS：ES，DOM，BOM，

Node中的JS：ES，NPM，Native

小程序中的JS：ES小程序框架Ø小程序API

直观的说小程序中没有Dom和Bom对象

5、微信小程序中的数据渲染浏览器中有什么不同

浏览器中渲染是单线程的。

而在小程序中的运行环境分成渲染层和逻辑层， WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

6、简述一下微信小程序中通讯模型

小程序中的运行环境分成渲染层和逻辑层，

WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理

渲染层的界面使用了WebView 进行渲染；

逻辑层采用JsCore线程运行JS脚本。逻辑层的js是单线程的

这两个线程的通信会经由Native（微信客户端）做中转，逻辑层发送网络请求也经由Native转发。

7、谈谈对微信小程序中生命周期函数的理解

（1）程序的生命周期：

onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onShow：当小程序启动，或从后台进入前台显示，会触发 onShow

onHide：当小程序从前台进入后台，会触发 onHide

onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。

其他字段：可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问。

App({onLaunch: function(options) {},onShow: function(options) {},onHide: function() {},onError: function(msg) {},globalData: 'I am global data'
})

（2）页面（page）

①生命周期

onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady

onReady：生命周期函数--监听页面初次渲染完成

onShow：生命周期函数--监听页面显示，触发事件早于onReady

onHide：生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

②页面的用户行为：

onPullDownRefresh 下拉刷新

onReachBottom 上拉触底

（3）组件：

created：在组件实例刚刚被创建时执行

attached：在组件实例进入页面节点树时执行

ready：在组件在视图层布局完成后执行

moved：在组件实例被移动到节点树的另一个位置时执行

detached：在组件实例被从页面节点树移除时执行

error：每当组件方法抛出错误时执行

8、微信小程序中如何进行事件的定义，传参

事件定义：bind+事件类型或bind事件类型

点击事件：

<view bindtap="handleTap">点击事件</view>
<view bind:tap="handleTap">另一种写法</view>

阻止事件冒泡：bindTap换成catchTap

事件捕获：capture-bind

事件传参：data-参数名=’参数值’

<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路由传递的参数。

handleTap(e){
console.log("执行了点击事件");// 通过currentTarget中的dataset属性可以获取时间参数console.log(e.currentTarget.dataset.msg);
}

9、wxss和css有什么区别

wxss是一套用于小程序样式的语言，用于描述wxml的组件样式

（1）不同尺寸单位在wxss中，引入了rpx单位，引用这个单位的目的，适配不同宽度的手机，开发起来简单在iphone6手机下，屏幕宽度是375px 单位换算1px =2rpx

（2）样式导入 @import ‘外联样式表的相对路径’，wxss最终被编译打包到目标文件，用户只需要下载一次，在使用过程中，不会因为样式的引用而产生多余的文件请求

（3）样式选择器类名 id 元素伪类选择器

10、小程序如何进行页面的跳转传参以及接收数据

（1）声明式：

<navigator url='url?id=1'></navigator>
<navigator url='url?id={{变量名}}'></navigator>

（2）函数式：

 wx.navigateTo({
url:'url?id=123',
})wx.navigateTo({
url:'url?id={{变量名}}',
})注意：wx.switchTab和wx.navigateBack不能传递参数

（3）接收参数：

onLoad(options) {console.log(options);
},

11、小程序如何进行本地存储

（1）存储

①异步存储

 wx.setStorage({data: {name:"天亮教育",age:4},//需要存储的内容。
key: 'list',//本地缓存中指定的 key
})

②同步存储

wx.setStorageSync('list1', {name:"尚云科技",age:5})

（2）读取本地数据

①异步操作

wx.getStorage({key: 'list',success(res){console.log(res);}})

②同步操作

const list = wx.getStorageSync('list')

12、谈谈你对微信小程序请求封装的理解

在开发中，页面之间有很多相似的代码，我们可以对其相似的代码块进行封装，进行复用。

步骤：

①创建组件：在配置文件中设置component:true

②引入组件：在需要使用的页面配置文件中写入路径

③可以设置插槽

默认插槽：<slot></slot>

命名插槽：<slot name=’common111’></slot>

页面中：

   <common>这是默认插槽<view slot=’common111’>这是命名插槽</view></common>

优点：

高内聚低耦合；

避免了代码间的冲突；

容易维护；

提高开发效率，方便重复利用，提高可维护性；

13、对小程序中常见的开放能力API有什么了解

wx.getNetworkType({}) ----检查网络类型，例如：wifi,5g,4g,3g,2g等

wx.downloadFile({

url:'地址'，

success(){

wx.openDocument({})----下载成功后预览文档

}

}）：从网络上下载文档

wx.scanCode({}）：扫一扫

wx.canIUse() ：判断小程序的API，回调，参数，组件等是否在当前版本可用。返回值为布尔

类型。

wx.getUserProfile ：获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。wx.getUserInfo：获取用户信息。//已经停止使用

14、小程序的父子传参和vue中的有什么区别

有两种方式：父传子；子传父

（1）父传子

在父页面中：
<son msg=’hello’></son>
<son></son>
子组件接收：
properties:{msg:{type:[String,Number],value:’hello world’,}}
子组件：<view>{{msg}}</view>

（2）子传父：

父页面：
<son bind:fromson=’fromson’></son>
子组件：
<button bindtap=’tofather’>子传父</button>
子组件中触发：
methods：{tofather(){
this.triggerEvent(‘fromson’,’111’)
}
}
父组件接收子组件参数：fromson(res){
console.log(res.detail)
this.setData({
“fromson”:res.detail
})
}

15、谈谈你对behavior的理解

behaviors是用于组件间代码共享的特性。

每个 behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个behavior , behavior也可以引用其它 behavior 。

暂时性的我们可以把它理解成为我们一个组件js代码太长了，可以把js代码拆分成多个js文件，然后将这些文件引入我们那个组件的js中，就是通过behaviors来引入的.并月我们拆分出来的这柴is文件是可以在不凤的驱真史卖引思的。想当于拆分出来的这部分is伐殁类似天utls.但是基史熊包含生命周期。

综上， utis跟behaviors不同的点在于， behaviors能将某个页面js文件的生命周期也分割一出来，但是utils只能分割功能函数。

16、如何优化首次加载小程序的速度

控制代码包的大小：（1）代码包的体积压缩可以通过勾选开发者工具中“上传代码时，压缩代码”选项（2）及时清理无用的代码和资源文件（3）减少资源包中的图片等资源的数量和大小

分包加载,预加载：将用户访问率高的页面放在主包里，将访问率低的页面放入子包里，按需加载；采用子包预加载技术，并不需要等到用户点击到子包页面后在下载子包

预请求：请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据；尽量减少不必要的https请求，可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地

避免不当的使用setData：不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用

使用自定义组件：对于一些独立的模块我们尽可能抽离出来，这是因为自定义组件的更新并不会影响页面上其他元素的更新；各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用

17、如何实现瀑布流效果

将数组拆分成左右两个数组
记录左右数组的高度，遍历总数组，将新的元素放在高度比较小的数组里

//wxml文件<template name="postList"><view class="box"  bindtap="toChat" data-postid="{{item.postsId}}"><view class="title">{{item.title}}</view><view class="imgBox"><image src="{{item.coverImgUrl}}" mode="widthFix"></image></view></view></template>
<view class="bigBox"><view  class="leftBox"><template is="postList" data="{{item}}" wx:for="{{leftList}}" wx:key="postsId">                                                         </template></view><view class="leftBox"><template is="postList" data="{{item}}" wx:for="{{rightList}}" wx:key="postsId"></template></view>
</view>
<view class="load"><van-loading type="spinner" wx:if="{{isLoading}}" />
</view>
<view wx:if="{{isEnd}}" class="tip">没有更多了...</view>
<view class="back" hidden="{{backShow}}" bindtap="backTap" ><van-icon name="back-top" />
</view>

//js文件
import { getlist } from "../../api/chat"// pages/chat/chat.js
Page({/*** 页面的初始数据*/data: {list:[],leftList:[],rightList:[],leftHeight:0,rightHeight:0,// 整个数据处理完成finish:false,pageNum:1,pageSize:10,total:0,isEnd:false,isLoading:true,// 返回顶部backShow:true,},
// 请求的函数封装
getPost(){getlist(this.data.pageNum,this.data.pageSize).then(res=>{if(res.data.code == 0){wx.stopPullDownRefresh();this.initList(res.data.rows);this.data.total = res.data.total;}})
},
// 处理数据的封装
initList(list){this.data.finish = falseif(list.length == 0){this.data.finish = true;// 没数据了return}let item = list.shift();// 获取图片信息wx.getImageInfo({src:item.coverImgUrl,success:(res)=>{if(this.data.leftHeight <= this.data.rightHeight){// 加到左列表this.data.leftList.push(item);this.data.leftHeight += res.height / res.width}else{this.data.rightList.push(item);this.data.rightHeight += res.height / res.width}// 更改视图this.setData({leftList:this.data.leftList,rightList:this.data.rightList,isLoading:false})},complete:()=>{this.initList(list);}})
},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({isLoading:true})// 处理数据this.getPost();},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.setData({isEnd:false})// 下拉刷新if(this.data.finish){this.data.pageNum = 1this.setData({leftList:[],rightList:[],leftHeight:0,rightHeight:0})this.getPost();}else{return}},/*** 页面上拉触底事件的处理函数*/onReachBottom() {this.setData({isLoading:true,})// 触底了if(this.data.finish){if(this.data.pageNum * this.data.pageSize >= this.data.total){this.setData({isEnd:true,isLoading:false,})}else{this.data.pageNum ++;this.getPost()}}},
})

18、谈谈你对WebSocket的理解

（1）什么是WebSocket：WebSocket是一种基于TCP的全双工通信协议，在应用层。

（2）为什么需要WebSocket：

①传统上的HTTP协议它是无状态的，服务器不能够识别是哪个客户端发送的请求，不能够保存状态。

②WebSocket弥补了这一问题，在客户端向服务端发送请求之后，服务器处理请求并返回到客户端，使用WebSocket可以使得服务器主动向浏览器推送消息

（3）WebSocket与HTTP的区别：

①HTTP是客户端直接向服务端发送请求，WebSocket是在完成一次握手之后建立连接

②发送HTTP请求的时候，服务器不能记住是谁发给他的

③发送WebSocket请求，服务器可以记住是谁发给他的

（4）WebSocket协议的原理：

与服务器进行三次握手，建立TCP连接

向服务器发送HTTP请求，请求中包含WebSocket的版本信息：包括upgrade、connection等等。

服务器处理请求并返回客户端，此时可以进行WebSocket请求了

服务端也可以主动向客户端推送消息了。

（5）WebSocket的优缺点：

优点：建立WebSocket连接之后，客户端与服务端交流更方便

客户端只需要向服务端发送一次请求，服务端主动向客户端发送消息

缺点：在服务端的状态不会频繁变化的时候，就不需要使用WebSocket连接了，浪费性能

（6）WebSocket应用场景：即时聊天室，实时地图

（7）WebSocket协议有哪些特点：

①webSocket是一种在单个TCP连接上进行全双工通信的协议

②websocket建立连接时，数据是通过http传输的，建立连接后就不需要http协议了。

③websocket建立连接后就是全双工模式，也是基于tcp协议。

④建立连接之后，不必在客户端发送request之后服务器才能返回信息到浏览器，这时候服务器有主动权，允许可以随时发消息给客户端

⑤发送的信息中不必带有head部分信息了，相对于http来说，降低了服务器的压力，极大的减少了不必要的网络流量与延迟。

⑥没有同源限制，客户端可以与任意服务器通信

⑦协议标识符是ws（如果加密，则为wss），服务器网址就是 URL