目录
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 = false
if(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 = 1
this.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