2020前端面试题-wx小程序

拼搏现实的明天。 2022-12-26 04:48 103阅读 0赞

# 前端面试题-wx小程序 #

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

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

*  page.js

*   *  [官方文档][Link 1]

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

*  page.json

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

*  page.wxml

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

*   *  [基础组件（按钮、文本框等）官方文档][Link 2]

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

*  page.wxss

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

*   *  [官方文档][Link 3]

--------------------

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编码

*  [官方文档][Link 4]

3.小程序支付功能

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

*  实例代码
    
        wx.requestPayment({
          timeStamp: '',
          nonceStr: '',
          package: '',
          signType: 'MD5',
          paySign: '',
          success (res) { },
          fail (res) { }
        })

--------------------

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

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

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/
[WXML_5]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html