2020前端面试题-wx小程序

前端面试题-wx小程序

1.小程序一个页面有几个文件构成？

 

page.js     //功能类似javascript，为页面添加各种监听事件
page.json   //页面配置，设置tab栏，导航条等东西，是一个json文件
page.wxml   //前端页面，就是html，但语法不太一样
page.wxss   //页面样式，就是css，但语法不太一样

 

• page.js

• • 官方文档

• • 他的主体部分是一个Page()函数，只有参数、没有函数体、含有很多的监听函数

• page.json

• • 一个json文件、含有当前页面的各自配置：导航栏，tab栏...

• page.wxml

• • WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。类似HTML。虽然类似，但不一样，尤其是html中最常用的div标签，在wxml中，它被view标签代替了，而wxml中的div是另外的一个东西

• • 基础组件（按钮、文本框等）官方文档

• • WXML的能力有5种：数据绑定、列表渲染、条件渲染、模板、引用，具体使用可参考官方文档

• page.wxss

• • WXSS是一套样式语言，用于描述WXSS的组件样式。具体可以看官方文档

• • 官方文档

---

2. 小程序怎么跟后台交互

 

• 直接用微信官方的接口wx.request接口，跟jQuery的ajax差不多

---

3.小程序怎么实现扫码功能

 

调用微信提供的现成的接口

 

• 首先在.wxml写一个text组件，通过点击这个text来实现扫码功能。

  <text bindtap="scanCodeEvent">{{scanCode}}</text>
  //bindtap是给text绑定的点击事件；{{scanCode}}给这个text赋值，赋值的数据在.js文件的data里初始化。

• js文件

  Page({
   
    /**
     * 页面的初始数据
     */
    data: {
      scanCode:'扫码',
    },
   
    /**
     * 扫码事件
     */
    scanCodeEvent: function(){
      var that = this;
      wx.scanCode({
        onlyFromCamera: true,// 只允许从相机扫码
        success(res){
          console.log("扫码成功："+JSON.stringify(res))
   
          // 扫码成功后  在此处理接下来的逻辑
          that.setData({
            scanCode: res.result
          })
        }
      })
    },

• • 扫码中有几个可配置的参数注意下：

• • • onlyFromCamera：默认是false，允许从相机和相册扫码；如果设置为true，则只允许从相机扫码；

• • • scanType：['barCode', 'qrCode']数组类型，这个字段来设置扫码类型；

• • • success：扫码接口调用成功的回调函数；

• • • fail：扫码接口调用失败的回调函数。

• • 扫码成功success返回内容：

• • • res.result：所扫码的内容；

• • • res.scanType：所扫码的类型；

• • • res.charSet：所扫码的字符集；

• • • res.path：当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的 path

• • • res.rawData：原始数据，base64编码

• 官方文档

 

3.小程序支付功能

 

• 调用接口API
  wx.requestPayment(Object object)

• 实例代码

  wx.requestPayment({
    timeStamp: '',
    nonceStr: '',
    package: '',
    signType: 'MD5',
    paySign: '',
    success (res) { },
    fail (res) { }
  })

---

4.微信里面怎么获取用户的手机号？

 

• 直接用微信官方提供的现成组件button即可，具体用法是在button上加一个属性opent-type， 返回它的值为getPhoneNumber,