微信小程序相关面试题

微信小程序相关面试题

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

微信小程序项目结构主要有四个文件类型

  • WXML (WeiXin Markup Language) 是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件
  • WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式
  • js 逻辑处理,网络请求
  • json 小程序设置,如页面注册,页面标题及tabBar

主要文件

  • app.json 必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全部配置.包括页面注册,网路设置,以及小程序的window 背景色,配置导航条样式,配置默认标题
  • app.js 这个文件也是必须要有的,但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理 小程序的生命周期函数、声明全局变量
  • app.wxss可选

2. 简述微信小程序原理

微信小程序采用 javaScriptWXMLwxss三种技术进行开发,本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口
微信的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现·
小程序分为两个部分webviewappService。其中webview主要来展现UIappService用来处理业务逻辑、数据及接口调用。他们在两个进程中运行,通过系统层JSBridge实现通信,实现ui的渲染、事件的处理

3.小程序的双向绑定和Vue哪里不一样

小程序直接this.data的属性是不可以同步到视图的,必须调用:
this.setDat({
  // 设置
})

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

wxsscss类似,不过在css的基础上做了一些补充和修改

  • 尺寸单位 rpx
rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素
  • 使用@import标识符来导入外联样式。@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
// index.wxss
@import './index.wxss';
.head{
  color:red;
}

5.小程序页面间有哪些传递数据的方法

  • 使用全局变量实现数据传递
app.js文件中定义全局变量globalData,将需要存储的信息存放在里面
// app.js
App({
     // 全局变量
  globalData: {
    userInfo: null
  }
})

使用的时候,直接使用getApp()拿到存储的信息

  • 使用wx.navigateTowx.redirectTo的时候,可以将部分数据放在URL里面,并在新页面onLoad的时候初始化
//pageA.js
// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})
// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})
// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})
需要注意的问题:

wx.navigateTowx.redirectTo 不允许跳转到 tab 所包含的页面
onLoad 只执行一次
使用本地缓存 Storage 相关

6. 小程序的生命周期函数

  • onLoad 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数
  • onShow() 页面显示/切入前台时触发
  • onReady() 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
  • onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等
  • onUnload() 页面卸载时触发。如 redirectTonavigateBack 到其他页面时

7.怎么封装微信小程序的数据请求

网络请求小程序提供了wx.request

// 官方例子
wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

Promise封装

const baseUrl = 'https://xxxxx';

const http = ({ url = '', param = {}, ...other } = {}) => {
    wx.showLoading({
        title: '请求中,请耐心等待..'
    });
    let timeStart = Date.now();
    return new Promise((resolve, reject) => {
        wx.request({
            url: getUrl(url),
            data: param,
            header: {
                'content-type': 'application/json' // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"
            },
            ...other,
            complete: (res) => {
                wx.hideLoading();
                console.log(`耗时${Date.now() - timeStart}`);
                if (res.statusCode >= 200 && res.statusCode < 300) {
                    resolve(res.data)
                } else {
                    reject(res)
                }
            }
        })
    })
}

const getUrl = (url) => {
    if (url.indexOf('://') == -1) {
        url = baseUrl + url;
    }
    return url
}

// get方法
const _get = (url, param = {}) => {
    return http({
        url,
        param
    })
}

const _post = (url, param = {}) => {
    return http({
        url,
        param,
        method: 'post'
    })
}

const _put = (url, param = {}) => {
    return http({
        url,
        param,
        method: 'put'
    })
}

const _delete = (url, param = {}) => {
    return http({
        url,
        param,
        method: 'put'
    })
}
module.exports = {
    baseUrl,
    _get,
    _post,
    _put,
    _delete
}

使用

const api = require('../../utils/api.js')

// 单个请求
api.get('list').then(res => {
  console.log(res)
}).catch(e => {
  console.log(e)
})

// 一个页面多个请求
Promise.all([
  api.get('list'),
  api.get(`detail/${id}`)
]).then(result => {
  console.log(result)
}).catch(e => {
  console.log(e)
})

8. 哪些方法可以用来提高微信小程序的应用速度

1、 提高页面加载速度

2、用户行为预测

3、减少默认 data 的大小

4、组件化方案

9. 微信小程序的优劣势

优势

  • 即用即走,不用安装,省流量,省安装时间,不占用桌面
  • 依托微信流量,天生推广传播优势
  • 开发成本比 App

缺点

  • 用户留存,即用即走是优势,也存在一些问题
  • 入口相对传统 App 要深很多
  • 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面

10. 怎么解决小程序的异步请求问题

  • 在返回成功的回调里面处理逻辑
  • Promise 异步

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

如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 unionid 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 unionid 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用, unionid 是相同的

12. 如何实现下拉刷新

  • 首先在全局 config 中的 window 配置 enablePullDownRefresh
  • 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后,该钩子函数执行,发起请求方法
  • 请求返回后,调用 wx.stopPullDownRefresh 停止下拉刷新

参考https://juejin.cn/post/6844903560027570183

13. 小程序还有哪些功能?

客服功能,录音,视频,音频,地图,定位,拍照,动画,canvas

14.微信小程序与H5的区别?

第一条是运行环境的不同

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

第二条是开发成本的不同

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

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

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

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

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

15.bindtap和catchtap的区别是什么

相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分
不同点:他们的不同点主要是bindtap是不会阻止冒泡事件的,catchtap是阻值冒泡的

14. 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

  • wx.navigateTo():保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
  • wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
  • wx.switchTab():跳转到 abBar 页面,并关闭其他所有非 tabBar 页面
  • wx.navigateBack()关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
  • wx.reLaunch():关闭所有页面,打开到应用内的某个页面
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值