整理一些微信小程序面试资料

微信小程序面试资料

一：面试题

1、简单描述下微信小程序的相关文件类型？

答：微信小程序项目结构主要有四个文件类型,如下

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

一、WXML （WeiXin Markup Language）

是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。

二、WXSS (WeiXin Style Sheets)

是一套样式语言，用于描述 WXML 的组件样式，

二、js

逻辑处理，网络请求

三、json

小程序设置，如页面注册，页面标题及tabBar。

四、app.json

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

     app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

我们简单说一下这个配置各个项的含义:

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。    

 这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

五、app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

六、app.wxss

全局配置的样式文件，项目非必须。

2、你是怎么封装微信小程序的数据请求的？

答：一、将所有的接口放在统一的js文件中并导出；

二、在app.js中创建封装请求数据的方法；

三、在子页面中调用封装的方法请求数据。

3、有哪些参数传值的方法？

答：一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象；

二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值；

三、在navigator中添加参数传值。

4、你使用过哪些方法，来提高微信小程序的应用速度？

答：一、提高页面加载速度；

二、用户行为预测；

三、减少默认data的大小；

四、组件化方案。

5、小程序与原生App哪个好？

答： 小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度  的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。

6、简述微信小程序原理？

答：微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。

    JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。

WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。

WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。

微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。

小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理。

7、分析下微信小程序的优劣势？

答：优势：1、无需下载，通过搜索和扫一扫就可以打开。

          2、良好的用户体验：打开速度快。

          3、开发成本要比App要低。

          4、安卓上可以添加到桌面，与原生App差不多。

          5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。

劣势：1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。

         2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。

         3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。

         4、依托于微信，无法开发后台管理功能。

8、微信小程序与H5的区别？

答：第一条是运行环境的不同:

   传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同:

    只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同:

    系统级权限都可以和微信小程序无缝衔接

第四条便是应用在生产环境的运行流畅度:

    长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立.

9、怎么解决小程序的异步请求问题？

答：在回调函数中调用下一个组件的函数：

app.js

success: function (info) {          

                that.apirtnCallback(info)

              }

index.js

 onLoad: function () {

   app.apirtnCallback = res => {

           console.log(res)

    }

｝

10、小程序的wxss和css有哪些不一样的地方？

答：一、wxss的图片引入需使用外链地址；

二、没有Body；样式可直接使用import导入.

11、webview中的页面怎么跳回小程序中？

答：首先要引入最新版的jweixin-1.3.2.js，然后

wx.miniProgram.navigateTo({

           url: '/pages/login/login'+'$params'

       })

12、小程序关联微信公众号如何确定用户的唯一性？

答：使用wx.getUserInfo方法withCredentials为 true 时 可获取encryptedData，里面有 union_id。后端需要进行对称解密。

13、如何实现下拉刷新？

答：用view代替scroll-view,,设置onPullDownRefresh函数实现

14、使用webview直接加载要注意哪些事项？

答: 一、必须要在小程序后台使用管理员添加业务域名；

二、h5页面跳转至小程序的脚本必须是1.3.1以上；

三、微信分享只可以都是小程序的主名称了，如果要自定义分享的内容，需小程序版本在1.7.1以上；

四、h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的。

15、小程序调用后台接口遇到哪些问题？

答：1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；

2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。

16、webview的页面怎么跳转到小程序导航的页面？

答：小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {

           var page = getCurrentPages().pop();

           if (page == undefined || page == null) return;

           page.onLoad();

          }

webview的页面，则通过

 wx.miniProgram.switchTab({

         url: '/pages/index/index'

       })

17、小程序和Vue写法的区别？

答：一、循环遍历的时候：小程序是wx:for="list"，而Vue是v-for="infoin list"

二、调用data模型的时候：小程序是this.data.uinfo，而Vue是this.uinfo；给模型赋值也不一样，小程序是this.setData({uinfo:1})，而Vue是直接this.uinfo=1

18、小程序的双向绑定和vue哪里不一样？

答：小程序直接this.data的属性是不可以同步到视图的，必须调用：

this.setData({

         noBind:true

       })

二：常见问题

1.rpx（responsivepixel）

微信小程序新定义了一个尺寸单位，可以适配不同分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。

2.40013错误

在微信小程序刚出来的时候如果没输入AppID，提示这个信息就表示没有破解，但是现在官方软件更新可以选择无AppID开发，我们可以通过选择无AppID，即可解决此错误。建议安装官方开发工具。

3.-4058错误

微信小程序创建项目时选择无AppID，创建项目时会生成app.json，app.josn是程序启动最重要的文件，程序的页面注册，窗口设置，tab设置及网络请求时间设置都是在此文件下的。如果你创建的项目目录下没有app.json文件就会报下面的错误。

我们看到上面的错误信息中有个数字-4058，这应该是初入微信小程序遇到最多的错误了，这种一般都是文件缺失，后面有个path，可以对着该路径看看是否存在这个文件。造成这种错误的原因一般都是创建项目选择的目录不正确，或者在app.json注册了一个不存在的页面。

当然还有一种情况就是在app.json文件的pages注册的页面是没有创建的，或者你删除了某个页面，但是没有取消注册也会是-4058错误。

4.Page注册错误

这个错误可能很容易理解，页面注册错误。页面是通过Page对象来渲染的，每个页面对应的js文件必须要创建page，最简单的方式就是在js文件下写入Page({})，在page中有管理页面渲染的生命周期，以及数据处理，事件都在这完成。这个错误引起的原因一般都是刚创建页面，js文件还有有处理或者忘了处理。所以要养成创建页面的同时在js文件先创建Page的习惯.

5.Page route错误

字面意思就是页面路由错误，在微信中有两种路由方式一种是在wxml文件使用

如下代码：

wxml文件：

<navigatorurl="search/search">

<viewclass="serach_view_show" bindtap="bindtap"> 搜索</view>

</navigator>

js文件事件处理函数：

bindtap:function(event){

wx.navigateTo({

url: "search/search"

})

}

如果你这样写的话，恭喜你，你就会看到上面提示的错误，这是因为重复调用路由引起的，处理方法就是删除一个路由，删除<navigator />组件或者删除wx.navigateTo。除了上面说的可能导致路由错误外，还有一种情况，类似于下面的代码

<navigatorurl="search/search">

<navigatorurl="search/search">

<viewclass="serach_view_show" bindtap="bindtap"> 搜索</view>

</navigator>

</navigator>

这种也是不允许的，也就是说<navigator/>组件内部不能再嵌套<navigator/>组件。它只能是单层存在的。

6.Do not have * handler in currentpage.

大概意思就是当前页面没有此处理，让确定是否已经定义，还指出了错误出现的可能位置pages/message/message,其实这种问题出现一般就是我们在wxml定义了一些处理事件，但是在js文件中没有实现这个时事件的处理方法，就会出现这个错误。那么我们按提示在js文件加上事件处理，如下代码，加上后就不会再有此错误提示。

  bindtap:function(event){

wx.navigateTo({

       url:"search/search"

})

  },

7.tabBar设置不显示

对于tabBar不显示，原因有很多，查找这个错误直接去app.json这个文件，最常见的也是刚学习微信小程序最容易犯的错误无外乎下面几种

注册页面即将页面写到app.json的pages字段中，如

"pages":[

    "pages/message/message",

    "pages/contact/contact",

    "pages/dynamic/dynamic",

    "pages/dynamic/music/music",

    "pages/index/index",

    "pages/logs/logs"

  ]

·  tabBar写法错误导致的不显示，将其中的大写字母B写成小写，导致tabBar不显示。

·  tabBar的list中没有写pagePath字段，或者pagePath中的页面没有注册

·  tabBar的list的pagePath指定的页面没有写在注册页面第一个。微信小程序的逻辑是"pages"中的第一个页面是首页，也就是程序启动后第一个显示的页面，如果tabBar的list的pagePath指定的页面都不是pages的第一个，当然也就不会显示tabBar了。

·  tabBar的数量低于两项或者高于五项，微信官方中明确规定tabBar的至少两项最多五项。超过或者少于都不会显示tabBar。

8. 生命周期函数

·        onLoad: 页面加载

o   一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

·        onShow: 页面显示

o   每次打开页面都会调用一次。

·        onReady: 页面初次渲染完成

o   一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

o   对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

·        onHide: 页面隐藏

o   当navigateTo或底部tab切换时调用。

·        onUnload: 页面卸载

o   当redirectTo或navigateBack的时候调用。

9.wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

10.本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用<image/>标签

11.页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中<navigator/>组件实现的，不管哪种实现都会有一个重要的参数就是url，它指定了要跳转的页面，并且页面之间数据传递也是通过url来实现的，这个数据传递有点类似于我们使用的get网络请求，把参数都拼接在要跳转界面地址的后面并以“？”连接。然后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如我们点击消息聊天记录，将列表上的数据传到下一个页面，可以这样写。

 <navigatorurl="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">

          <viewclass="item" >

             <viewclass="item-left">

                  <imagesrc="{{item.url}}" class="image"/>

             </view>

             <viewclass="item-middle">

                  <view>

                       <textclass="title">{{item.title}}</text>

                  </view>

                  <view>

                      <textclass="message">{{item.message}}</text>

                  </view>

            </view>

            <viewclass="item_right">

               <view><text class="time">{{item.time}}</text></view>

                <viewclass="mark" wx:if="{{item.count>0}}"><textclass="text">{{item.count}}</text></view>

            </view>

         </view>

         <view  class="line"></view>

       </navigator>

而数据接收是在js文件的page里接收的，page生命周期有一个onLoad函数，它就是做一些初始化数据的工作，onLoad函数有一个参数options，我们就可以通过key将数据获取，如下

Page({

  data:{

    // text:"这是一个页面"

    isHiddenToast:true

  }

  onLoad:function(options){

    // 页面初始化 options为页面跳转所带来的参数

    console.log(options.title)

    console.log(options.message)

  },

  onReady:function(){

    // 页面渲染完成

  },

  onShow:function(){

    // 页面显示

  },

  onHide:function(){

    // 页面隐藏

  },

  onUnload:function(){

    // 页面关闭

  },

  bindtap:function(event){

wx.navigateTo({

  url: "/pages/message/search/search"

})

  },

})

最后

以上就是深情楼房为你收集整理的整理一些微信小程序面试资料的全部内容，希望文章能够帮你解决整理一些微信小程序面试资料所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。