微信小程序常见面试题

目录

微信小程序的优势和劣势

配置tabBar

微信小程序中常用的标签

微信小程序的生命周期 

微信小程序常见的事件类型 

同步缓存以及异步缓存 

小程序页面跳转及传参 

小程序中的请求方式 

 小程序中的插槽

小程序中父子传参 


 微信小程序的优势和劣势

 优势
微信助理,容易推广。在微信中,小程序拥有众多入口,例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量,从而进行转化、变现。
使用便捷。用户在使用小程序时,只需要轻轻点一下就可以使用,更加符合用户对使用方便、快捷的需求,所以小程序的用户数量不断增加。
体验良好,有接近原生app的体验。在微信生态里,小程序在功能和体验上是可以秒杀掉 H5 页面的,H5 页面经常出现卡顿、延时、加载慢、权限不足等原因,而这些问题在小程序里都不会出现。
成本更低,从开发成本到运营推广成本,小程序的花费仅为APP的十分之一,无论是对创业者还是传统商家来说都是一大优势。
不足
单个包大小限制为2M,这导致无法开发大型的应用,采用分包最大是20M(这个值一直在变化,以官网为准)。
需要像app一样审核上架,这点相对于H5的发布要麻烦一些。
处处受微信限制。例如不能直接分享到朋友圈,涉及到积分,或者虚拟交易的时候,小程序也是不允许的。

配置tabBar

"tabBar": {
    "color": "#000",
    "selectedColor": "#f00",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "index",
        "iconPath": "./asstes/hot-active.png",
        "selectedIconPath": "./asstes/hot.png"
      }],

微信小程序中常用的标签

view标签是我们开发过程中最常用的标签了,这个就相当于Html中的div。
text标签也是我们开发中常用的,这个相当于Html中的span
image标签相当于我们Html中的img。

微信小程序的生命周期 

生命周期
onLoad:生命周期函数--监听页面加载,触发时机早于onShow和onReady
onReady:生命周期函数--监听页面初次渲染完成
onShow:生命周期函数--监听页面显示,触发事件早于onReady
onHide:生命周期函数--监听页面隐藏
onUnload:生命周期函数--监听页面卸载 

微信小程序常见的事件类型 

 常见的事件类型
touchstart    手指触摸动作开始
touchmove    手指触摸后移动
touchcancel    手指触摸动作被打断,如来电提醒,弹窗
touchend    手指触摸动作结束
tap    手指触摸后马上离开
longpress    手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
longtap    手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
transitionend    会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart    会在一个 WXSS animation 动画开始时触发
animationiteration    会在一个 WXSS animation 一次迭代结束时触发
animationend    会在一个 WXSS animation 动画完成时触发
在小程序中除了通过bind之外,还可以通过catch进行事件绑定,通过catch绑定的事件不会触发事件冒泡。
事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发,可以通过capture-bind进行事件绑定
传参data-msg="我是事件的参数"

同步缓存以及异步缓存 

 同步缓存wx.setStorageSync(key:要存的东西),取wx.getStorageSync(key)
异步缓存wx.setStorage(key:,data,success(){}),取wx.getStorage(),取wx.getStorage(key,success(){})

小程序页面跳转及传参 

 页面跳转wx.navigateTo({url:})保留当前页面,只能打开非 tabBar 页面。wx.redirectTo({})关闭卸载当前页面,只能打开非 tabBar 页面
tabBar跳转wx.switchTab关闭所有非tabbar页面, 只能打开 tabBar 页面,不能url传参
wx.reLaunch({})关闭卸载所有页面,可以打开任意页面。
返回wx.navigateBack({data:1})返回的页数

传参是在路径后直接?拼接,在跳转后的页面中的onload生命周期中有一个option参数可以拿到传的参数

小程序中的请求方式 

wx.request({url:,method:'post',data,success:})
wx.request({
      url: 'https://showme.myhope365.com/api/cms/article/open/list',
      method: "POST",
      data: {
        pageNum: 1,
        pageSize: 10
      },
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      success: res => {
        console.log(res.data.rows)
      }
})

 小程序中的插槽

配置文件中设置component:true,引入在父组件的json文件中的usingComponents写子组件的名字:路径,然后当作标签使用
具名插槽,子组件中的slot加name,父组件中给view加slot='子组件中的名字'
使用多个具名插槽在子组件中的js中options: {
    styleIsolation: 'isolated'
  } 

小程序中父子传参 

 父传子:父组件中定义一个自定义属性属性值为要传的东西,在子组件中的properties中接受自定义属性名:{type:[],value:'默认值'} { {自定义属性名}}
子传父:在子组件中定义一个点击事件事件里写this.triggerEvent('myevent', myEventDetail, myEventOption),在父组件中定义一个事件,这个方法自带参数,子传父的东西就在里面

猜你喜欢

转载自blog.csdn.net/m0_63349753/article/details/128028341
今日推荐