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

news/2024/7/20 2:58:49 标签: 小程序, 微信小程序, 前端, javascript

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

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'

  }
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DeUB75H5-1637291525654)(../images/miniProgram_001.png)]

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文件


http://www.niftyadmin.cn/n/806001.html

相关文章

AirPods Pro真香,包邮送一台!

小编换了AirPods Pro &#xff0c;长时间使用之后&#xff0c;我发现这款耳机降噪效果非常好&#xff0c;音质比之前的白开水改善了不少&#xff0c;长时间佩戴舒适&#xff0c;还有人把 AirPods Pro 当夜间入眠的耳塞用。用了一圈耳机&#xff0c;还是 AirPods Pro 比较香&…

RFC2617- HTTP Authentication自译本-(1) (转)

RFC2617- HTTP Authentication自译本-(1) (转)[more] XML:namespace prefix o ns "urn:schemas-microsoft-com:Office:office" /> .NETwork Working Group J. Franks Request for Comments: 2617 Northwestern University Obsoletes: 2069 P. Hallam-Baker …

【并发容器源码系列】 ConcurrentHashMap 存入相关源码解析

put public V put(K key, V value) {return putVal(key, value, false); }final V putVal(K key, V value, boolean onlyIfAbsent) {if (key null || value null) throw new NullPointerException();// 计算hash值&#xff1a;(h ^ (h >>> 16)) & HASH_BITSint…

html table斑马表格,一行灰一行白交替的效果

table样式 ._table{width: 100%; border-collapse: collapse; border:0px;} ._table thead tr {font-size: 13px; color: #2e3b45; text-align: center; background-color: rgba(230, 255, 250, 0.92); font-weight:bold;} ._table td{line-height: 20px; text-align: center;…

Css设置图片垂直居中

说明&#xff1a;样式设置主要是针对图片的父级元素&#xff0c;并非图片元素本身。 Css代码[图片父级点的样式]&#xff1a; <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-a…

CSS面试题汇总(四)

往期点这里&#xff1a;↓ CSS面试题汇总&#xff08;一&#xff09; CSS面试题汇总&#xff08;二&#xff09; CSS面试题汇总&#xff08;三&#xff09; 31. 什么是 FOUC? 如何避免 参考答案&#xff1a; 1. 什么是 Fouc(文档样式短暂失效)&#xff1f; 在引用 css 的过…

RFC2617- HTTP Authentication自译本-(4) (转)

RFC2617- HTTP Authentication自译本-(4) (转)[more] 但它还是比在LDAP[10]、POP及IMAP&#xff08;见rfc2195[9]&#xff09;上用的CRAM-MD5要强许多。它将被用来替代薄弱的危机四伏的基本机制。 分类鉴别只提供对实际口令的加密保护。请求或回应的所有其它内容都可以被监听。…

Mybatis Mapper.xml 需要查询返回ListString

当需要查询返回 List<String> <select id"getList" parameterType"java.lang.String" resultType"java.util.List"> SELECT id, name FROM sys_user </select> 报错&#xff0c;需要将返回值改为:resultType"java.la…