小程序面试题20问

1.有哪些参数传值的方法
给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取，但data-名称不能有大写字母和不可以存放对象
设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值
在navigator中添加参数传值，但需要注意navigateTo等进行参数传递的时候有长度的限制，如果传递的参数是对象，首先需要转化数据类型JSON.stringify、JSON.parse，再则需要进行编码类型的转化encodeURIComponent、decodeURIComponent
使用组件模板template传递参数
可以利用globalData进行全局数据的设置以及在各个页面的获取处理
可以利用数据缓存的功能进行setStorage、getStorage的设值与获取
使用后端程序进行不同页面之间的传递数据
2.小程序修改数据值与Vue和React有什么差异
小程序不能直接this.data.xxx进行数据值的修改，Vue可以直接this.xxx进行数据值的修改

小程序需要利用this.setData进行数据值的修改，而React则是利用this.setState进行数据值的修改

小程序利用this.setData进行状态值的修改模式是同步及异步的，而React的this.setState是异步函数

this.setState({
    name:'zhang'
})
console.log(this.state.name);//不能立马获取到新的state值

this.setData({
    name:'zhang'
})
console.log(this.data.name);//可以立马获取到新的data值

可以看到 setData函数过程是：
将数据从逻辑层发送到视图层是异步
改变this.data是同步的
也就是说改变值是同步的，改变值之后渲染页面是异步的。如此操作的目的是为了提高性能，不可能改变一次数据渲染一次页面，等所有data改变完之后一块渲染页面
3.如何实现下拉刷新与上拉加载
首先需要思考的是操作的对象不同，有页面级的下拉刷新与上拉加载操作，也有scroll-view组件级的下拉刷新和上拉加载处理
针对于页面级：
可以在全局 config 中的 window 配置中设置 enablePullDownRefresh 属性，当然建议 enablePullDownRefresh 属性是在页面级配置中设置， 在 Page 中定义 onPullDownRefresh 事件函数
到达下拉刷新条件后，该事件函数执行，发起请求方法，下拉刷新请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新。
至于上拉加载则可以利用 onReachBottom 事件函数来确认后续的功能操作，一般它与 onReachBottomDistance 进行配合处理，确认距离底部的距离，而它的单位是px。
针对scroll-view组件级：
下拉刷新需要利用 refresher-enabled 开启，对应的阈值设置是 refresher-threshold
需要利用 refresher-triggered 来确认刷新的状态，在下拉刷新结束以后需要设置为 false 状态
利用 bindscrolltolower 实现上拉加载的功能处理
纵向滚动时需要给scroll-view设置具体的高度值
4.bindtap和catchtap的区别是什么
相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的
5.小程序有哪些导航API，它们各自的应用场景与差异区别是什么
导航相关的API主要包括：wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.navigateBack()、wx.reLaunch()
wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面
wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
6.小程序中如何使用第三方npm模块进行功能开发
npm init项目的初始化操作
npm install lodash --save等模块安装操作
微信开发者工具->详情->本地设置->使用npm模块
微信开发者工具->工具->构建npm
7.小程序的定位在开发环境的设置
使用定位操作需要授权处理，需在app.json中设置permission节点信息，将useLocation授权添加上

"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
}

开发环境使用定位需要在调试器中开启，在Sensor中将Geolocation的enable设置为开启状态

在测试开发环境下，利用wx.getLocation获取位置信息内容，获取到的将会是Sensor中设置的默认值信息

8.小程序的地图应用可以使用什么方式处理
API简易地图：先可以利用wx.getLocation获取位置的经纬度等信息，再使用wx.openLocation打开微信内置地图查看位置，不过获取的信息只有经纬度，所以像name,address等内容没有更好的办法进行显示，而且wx.openLocation仅限于查看地图查看位置，其它更多的地图内容不能够处理。
组件功能地图：如果需要标注、路线、俯视、旋转更多的地图操作功能，则需要利用map组件进行地图内容的展示操作
9.如何获取当前的省市区，并在地图上显示地理信息
需要通过第三方地图API接口进行地理信息的获取，比如腾讯地图、百度地图、高德地图等，但不管哪个第三方地图应用，其操作过程基本雷同

因为要请求第三方地图API接口，所以需要在微信平台的授权请求地址中将第三方地图API的请求地址内容进行授权设置，否则正式环境将无法允许应用请求对应的地址

如果没有在微信平台的授权请求地址，那么无法进行真机预览操作，但可以进行真机调试处理

第三方地图API接口的一般操作流程如下（以百度地图为例）：

创建地图应用

选择正确的应用类型以及设置小程序的AppID

获取AK信息

查看对应的文档资料

下载相应支持小程序的第三方地图库文件

利用第三方地图API进行地图内容的获取以及利用小程序map组件显示对应的地图信息

var bmap = require('../../utils/bmap-wx.min.js'); // 支持小程序的地图类库文件
var wxMarkerData = [];
Page({
  data: {
    markers: [],
    latitude: '',
    longitude: '',
  },
  onLoad() {
    var that = this;
    var BMap = new bmap.BMapWX({
      ak: 'jU4Ww0DiPzXUZmCshR6XjcH5Y3AG6GCE' // AK信息
    });
    var fail = function (err) {
      console.log(err)
    };
    var success = function (data) {
      wxMarkerData = data.wxMarkerData;
      that.setData({
        markers: wxMarkerData,
        latitude: wxMarkerData[0].latitude,
        longitude: wxMarkerData[0].longitude
      });
    }
    // 发起regeocoding检索请求 
    BMap.regeocoding({
      fail: fail,
      success: success,
    });
  },
})

<view class="container">
    <map id="map" 
       longitude="{{longitude}}" 
       latitude="{{latitude}}" 
       scale="10" 
       show-location 
       style="width: 100%; height: 300px;">
     </map>
</view>
省市区及详情地址信息在返回的百度地图信息中都已经包含，如果想显示标记信息等内容，可以利用map组件的markers等属性
源码示例：小程序地图调用百度地图API显示地理信息

10.小程序中如何显示HTML或者markdown的信息
利用第三方插件wxParse： 微信小程序富文本解析，https://github.com/csonchen/wxParse
Towxml：是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。https://github.com/sbfkcel/towxml
11.小程序中如何使用echart图表库
使用第三方插件echarts-for-weixin：https://github.com/ecomfe/echarts-for-weixin

可以将该项目直接下载解压，并在本地运行，查看各种不同图表类型的示例，注意导入项目的时候修改自己的AppId

在使用echart图表的时候，需要注意由于echart本身比较大，所以最好是将图表的功能内容规划到分包中去，并且不要在主包中进行图表功能的操作

源码示例：小程序中使用echart图表功能

12.小程序如何实现分享功能
在页面中如果不设置 onShareAppMessage 分享的事件回调函数，那么小程序右上角三个点的操作中不包含分享功能
通过button按钮的open-type属性设置为share则将调用页面中的 onShareAppMessage 事件，可以通过事件的 res中的 from 内容来判断是按钮button的分享处理还是右上角三个点menu的页面分享操作
13.sitemap 配置的作用是什么
微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。
当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。
小程序的sitemap类似网页的sitemap概念，提供的是可被抓取的页面内容，主要针对的是“小程序搜索引擎的SEO”优化操作
14.小程序是否支持双向数据绑定
支持双向数据绑定

但仅限于简易双向数据绑定，绑定的对象只能是一个单一字段的绑定，不支持对象等形式的数据路径设置操作

在自定义组件中也可以实现传递双向绑定操作

它的基本语法操作是

<input model:value="{{value}}" />

15.授权验证登录怎么做，用户退出后下次进入还需要再次授权吗
wx.login获取到一个code，拿这code去请求后台得到openId, sessionKey, unionId。
调wx.getUserInfo获取用户信息内容
一次性授权：每次授权都需要与后台进行权限认证操作
永久授权：调取授权登录接口并把获取到的用户公开信息存入数据库
16.验证授权是自动弹出还是触发，授权过程如何操作
按钮触发的，open-type指定为getUserInfo类型，可以从bindgetuserinfo回调中获取到用户信息
授权验证操作只执行一次，不会二次执行
授权以后可以通过wx.getUserInfo获取基础的用户信息
17.微信小程序之用户授权
用户授权包括很多内容：用户信息、地理位置、后台定位、录音功能、保存到相册、摄像头等

授权有效期：一旦用户明确同意或拒绝过授权，其授权关系会记录在后台，直到用户主动删除小程序。

授权操作主要分两种不同的情况：

弹出授权框用户点击允许，授权信息会直接记录，后续不再确认授权操作
弹出授权框用户点击拒绝，授权信息会直接记录，但用户还想再次操作对应功能，需要弹窗再次授权
查看所拥有权限
wx.authorize 发起请求用户授权，利用 wx.showModal 弹窗授权确认
wx.showModal 确认后利用 wx.openSetting 打开授权设置
确认授权设置打开授权信息
示例源码：位置授权示例，功能授权流程版

示例源码：位置授权示例，具体地理位置获取

18.如何利用createIntersectionObserver实现图片懒加载
节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Object options) Api （支持版本 >= 1.9.3），它的作用是创建并返回一个 IntersectionObserver 对象实例(交叉区域)，这个对象实例在小程序的解说如下：

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见，它有：relativeTo、relativeToViewport、observe、disconnect等方法

由此我们可以设置图片进入可见界面某一区域时的监听回调事件，以此实现图片的懒加载

 Page({
   data: {
     group: [
       {
         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
         show: false,
         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
       },
      ...... // 更多图片信息
     ]
   },
   onLoad: function () {
     let group = this.data.group  // 获取原数据
     for (let i in group) {
       // 设置监听回调事件，当元素 .loadImg{{i}},进入页面20px内就触发回调事件，设置图片为真正的图片，通过show控制
       wx.createIntersectionObserver().relativeToViewport({ bottom: 20 }).observe('.loadImg' + i, (ret) => {
         if (ret.intersectionRatio > 0) {
           group[i].show = true
         }
         this.setData({ // 更新数据
           group
         })
       })
     }
   }
 })

<block wx:for="{{group}}" wx:key="1">
  <view class="loadImg loadImg{{index}} {{item.show? 'active' : ''}}" >
    <!-- 通过条件判断确认图片的src -->
    <image wx:if='{{item.show}}' style='width:100%;height:100%;' src='{{item.src}}'></image>
    <image wx:else style='width:20%;height:20%;margin:0 auto;margin-top:50%;transform:translateY(-50%);' src='{{item.def}}' mode='aspectFit'></image>
  </view>
</block>
1
.loadImg{
  width:100vw;
  height:46.3vw;
  transition: all .2s ease-in-out;
  opacity: 0;
}
.loadImg.active{
  opacity: 1
}

示例源码：利用createIntersectionObserver实现图片懒加载

19.为什么需要获取界面上节点信息以及如何获取界面上的节点信息
节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息
最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置
可以利用获取节点信息动态计算scroll-view（纵向滚动需要定高）等组件的高度等内容
可以利用获取节点信息来确定页面中的元素显示与不显示，比如控制sticky吸顶操作
示例源码：通过查询节点信息确定页面中的元素显示与不显示

示例源码：通过查询节点信息动态计算scroll-view的高度值

20.如何保存图片到相册
需要判断用户是否授权了保存到本地的权限，通过getSetting可以获取authSetting，确认scope.writePhotosAlbum确认是否拥有
利用authorize进行授权请求操作，这是首次授权处理
如果拥有权限，则利用downLoadFile下载图片文件，再使用saveImageToPhotosAlbum进行图片保存相册的操作
如果没有授权，还想再次保存图片到相册操作，需要利用showModal进行对话框弹出确认操作，再次确认openSetting中的authSetting内容（需要用showModal），这是再次授权操作