2023小程序面试题集_小程序面试题2023

小程序和普通网页区别

运行环境不同：网页在浏览器运行，小程序在微信环境运行
​
开发模式不同： 网页开发用浏览器+代码编辑器 小程序有自己的一套标准开发模式，使
用小程序开发工具
​
api不同 运行环境不同所以小程序没有办法调用bom和dom的api 小程序可以调用微信环境
提供的各种api 比如扫码，支付，地理定位，摇一摇，附近的人等等...
复制代码

小程序的项目构成

pages 用来存放所有小程序页面
utils 用来存放工具性质模块，比如格式化时间.wxs文件，封装请求数据组件.js文件
​
app.js 小程序项目的入口文件  类似vue的 app.vue 
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序是否允许被微信搜索引擎搜索到，比如：在微信小程序搜
京东，会弹出京东小程序，
如果关闭，搭建的项目，微信是无法搜索到的。
复制代码

小程序页面的组成部分**

每个页面由四个基本文件组成，在app.json文件中配置好pages后小程序会自动生成文件
1. .js文件 存放页面脚本文件，存放页面的数据，事件处理函数等 （写逻辑代码）
2. .json文件 当前页面配置文件，配置窗口的外观，表现等
3. .wxml文件 存放页面布局，类似html但不同，div=view span=text img=image 
4. .wxss文件 存放样式类似css但是和css不同，.wxss新增了rpx像素单位，只能引入外
链文件和样式背景图等都必须外链文件。
复制代码

app.json文件介绍

pages ：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景颜色，文字颜色等等...
style:全局定义小程序的组件所使用的样式版本
sitemapLocation：用来指明sitemap.json的位置
​
复制代码

如何自定义tabBar

首先在app.json中 配置“tabBar”，对象然后创建list数组，写实际的路径，最少两个，最多五个。
或者说：首先配置信息，添加tabBar代码，然后编写tabBar代码 创建list 最少两个最多五个
复制代码

小程序的组件

<view></view>
<text></text>
<swiper>
   <swiper-item></swiper-item>
</swiper>
<icon></icon>
<image  src=""></image>
<rich-text  nodes="<p></p>"></rich-text>
复制代码

小程序如何实现循环

<view  wx:for="{
 {arr}}"  wx:key="index"  >
<view  wx:for="{
 {arr}}"  wx:key="*this"  >
默认下标=index 默认内容=item   *this代表每个内容可以当（作为）下标使用
如果要修改默认值可以 wx:for-index="i" 将默认下标修改为i wx：key="i"即可
    
复制代码

事件

<view data-i="{
 {实际的值}}" bindtap="事件">
​
在.js页面
​
​
事件名（接受的值）{}
​
复制代码

如何实现文本框双向数据绑定

input value="msg" bindinput="事件名"
在.js页面
data中：msg："" 声明一下变量
事件名（e）{
    this.setData({
        msg:e.detail.value
    })
}
复制代码

页面导航

navigateTo 非tabBar页面
switchTab  tabBar页面
navigateBack 后退
exot 退出
声明式导航：<navigator url="路径" open-type="">
编程式导航：
wx.switchTab({
    url: `/pages/cart/cart?id=66`
})


复制代码

如何实现下拉刷新，上拉加载 （偏官方一点）

1.开启全局下拉刷新，在app.json节点中enablePullDownRefresh:true
  开启局部下拉刷新，在组件.json文件中 enablePullDownRefresh:true
2.配置下拉刷新的窗口样式
  backgroundTextStyle:dark loading效果
  backgroundColor窗口背景色
3.监听下拉刷新事件
  通过onPullDownRefresh()
  数据重置成功后调用关闭下拉刷新效果也可以在json文件中写入
  stopPullDownRefresh：true 或者在.js页面中wx.stopPullDownRefresh()
  
上拉加载：
1.onReachBottomDistance：60配置上拉触底距离为60 全局局部一样写法，
监听页面上拉触底事件 onReachBottom() { ‘触发了上拉触底事件’ }
复制代码

如何实现下拉刷新，上拉加载 （修改理解后更简单）

首先在在json文件中开启下拉刷新值为true，在app.json开启为全局，在组件.json开启
为局部
配置下拉刷新的窗口样式，如：配置loading效果，窗口背景色。配置下拉刷新后关闭下
拉刷新效果。
配置上拉加载的，上拉触底距离为60，然后监听事件。
onPulllDownRefresh下拉刷新事件
onReachBottom上拉加载事件
复制代码

网络请求限制，如何配置合法域名？

 1.出于安全考虑，小程序对数据接口的请求有限制要求，小程序只能请求https类型接口，
必须将接口的域名添加到信任列表中否则控制台会提示（警告）
 2.登录小程序公众平台--->开发管理---->开发设置--->服务器域名--->修改合法域名

复制代码

如何封装https网络请求

 1.在项目跟目录utils文件中，创建request.js 声明变量request复值function函数中写
request请求代码
var request = function (options){
     wx.request({
        url: options.url, //仅为示例，并非真实的接口地址
        data:options.data,
        method:options.method,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success:(res)=>{
          options.success(res)
        },
}
使用es5语法导出request实例 module export =request
使用时 const {request}