微信小程序和uni-app面试高频知识点

微信小程序

1. 微信小程序的项目结构

前端代码分为结构层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文件，文件里面是一些可以全局使用的函数，封装的接口，第三方插件...

1. 配置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->模板->顶部选项卡。

1. 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 画布

1. Wxss,相比较css的区别（扩展)

一、WXSS和CSS的区别

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3、此外 WXSS 仅支持部分 CSS 选择器

1. 逻辑渲染与列表渲染的方式

(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组件实现

小程序官方文档