微信小程序面试题汇总(二）

往期点这里：↓
微信小程序面试题汇总(一）

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

参考答案：

1.wxss的图片引入需使用外链地址；
2. 没有Body, 样式可直接使用import导入；

12.webview中的页面怎么跳回小程序中？

参考答案：首先要引入最新版的jweixin-1. 3. 2. js，然后

wx.miniProgram.navigateTo({
    
    
    url: '/pages/login/login' + '$params'
})

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

参考答案：

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

14. 如何实现下拉刷新？

参考答案：

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

15. 使用webview直接加载要注意哪些事项？

参考答案：

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

二.h5页面跳转至小程序的脚本必须是1. 3. 1以上；

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

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

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

参考答案：

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

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

17.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'
})

18. 小程序和Vue写法的区别？

参考答案：

一. 循环遍历的时候：小程序是wx:for=“list”，而Vue是v-for="(item, index) in list"

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

19. 小程序生命周期

参考答案：

// app.js
App({
    
    
    onLaunch(options) {
    
    
        // Do something initial when launch.
    },
    onShow(options) {
    
    
        // Do something when show.
    },
    onHide() {
    
    
        // Do something when hide.
    },
    onError(msg) {
    
    
        console.log(msg)
    },
    globalData: 'I am global data'
})

//index.js
Page({
    
    
  data: {
    
    

    text: "This is page data."

  }, 
  onLoad: function(options) {
    
    

    // 页面创建时执行

  }, 
  onShow: function() {
    
    

    // 页面出现在前台时执行

  }, 
  onReady: function() {
    
    

    // 页面首次渲染完毕时执行

  }, 
  onHide: function() {
    
    

    // 页面从前台变为后台时执行

  }, 
  onUnload: function() {
    
    

    // 页面销毁时执行

  }, 
  onPullDownRefresh: function() {
    
    

    // 触发下拉刷新时执行

  }, 
  onReachBottom: function() {
    
    

    // 页面触底时执行

  }, 
  onShareAppMessage: function () {
    
    

    // 页面被用户分享时执行

  }, 
  onPageScroll: function() {
    
    

    // 页面滚动时执行

  }, 
  onResize: function() {
    
    

    // 页面尺寸变化时执行

  }, 
  onTabItemTap(item) {
    
    

    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)

  }, 
  // 事件响应函数
  viewTap: function() {
    
    

    this.setData({
    
    
      text: 'Set some data for updating view.'
    }, function() {
    
    
      // this is setData callback
    })

  }, 
  // 自由数据
  customData: {
    
    

    hi: 'MINA'

  }
})

20. h5页面如何传递参数给小程序？

参考答案：

1、H5页面
<script src="${base}/resources/common/js/jweixin.miniProgram.js"></script>

wx.miniProgram.postMessage({
  data: {
    shareUrl:href
  }
});

注意：传参必须使用data

2、小程序页面接收

Page({
//获取H5传给小程序的参数
getMessage: function(e) {
  if (!e.detail) {
    return
  }
  var datas = e.detail.data
  var shareUrl = datas.shareUrl;
}
})

index.wxml文件