前端微信小程序面试题总结_微信小程序前端面试题

目录

双向数据绑定

父子组件传值

 本地存储

组件生命周期函数

获取用户信息

页面的基本配置

tabBar的设置

uni-app引入vantUi

设置动态的顶部文字

封装axios请求

小程序的生命周期函数  uni-app同时兼容

开启关闭下拉刷新

自定义小程序导航栏

uni-app的分包

uni-app的路由  微信小程序除前缀不同外其余一致

图片的预览

uni-app的自带弹框

添加收货地址

checkbox组件的使用

分享

扫码

获取个人信息

---

双向数据绑定

1 普通的数据绑定是没有响应式的

<input value="{{value}}" />

使数据具有响应式

// 使用setData赋值，使其拥有响应式，达到双向数据绑定的效果
this.setData({
    dataAll: this.data.dataAll,
})

2 使用 model: 前缀来使数据绑定具有响应式

<input model:value="{{value}}" />

父子组件传值

定义子组件  

创建compontents文件夹，新建对应子组件

引入子组件

 json文件里 

 "usingComponents": {
    "header":"../../components/header"
  },

父传子

子组件里的 properties 就是 props ,用来接受父传子数据

格式一     text:String

格式二     text :{ type:String , value : '' ,}     // value是默认值

子传父

父组件中的自定义事件

bind:自定义事件名= " "

子组件中的调用

//作用与emit相似，建议用对象传值
this.triggerEvent('aaa', {k:v})  

 本地存储

异步

存    wx.setStorage({ key: "名称", data: JSON.stringify( 数据 ) })

取    wx.getStorage({ key: "名称", success:(res)=>{ 成功时 res就是对应数据 } })

同步

存  wx.setStorageSync('名称', JSON.stringify(数据))

取  wx.getStorageSync('名称')

组件生命周期函数

• created()：组件实例刚刚被创建好时触发。

• attached()：进入页面节点树后触发

• detached() 组件离开页面节点树后触发

获取用户信息

启用button组件

<button type="primary"  open-type="getUserInfo"
 bindgetuserinfo="handleGetUserInfo">
 登陆
</button>

open-type="getUserInfo"    设置按钮功能为获取用户信息

bindgetuserinfo    是点击后的调用  自带的形参中，就有用户信息

handleGetUserInfo(e) {
        console.log(e)
        const { userInfo } = e.detail;
 }

页面的基本配置

tabBar的设置

在uni-app中的 pages.json中进行配置

 "tabBar": {
    "color": "#000000",  
    "selectedColor": "#d00",  
    "borderStyle": "black",
    "backgroundColor": "#ffffff",  
    "position": "bottom"，     
    "list": [{
        "pagePath": "pages/index/index", 
        "text": "首页",
        "iconPath": "static/icon/shouye.png", 
        "selectedIconPath": "static/icon/pitch-icon/shouye.png"
      }
    // 此处进行配置第二个tabBar页面
   ]
 }

注意事项

1 tabBar最少两个，最多五个

2 下面的字体图标需要两种颜色，未选中与被选中，建议下载好之后，当做图片使用

3 当tabBar设置为顶部的时候，将不在有图标，只会有文字

uni-app引入vantUi

1  内置终端npm安装vant小程序版本

2  新建wxcomponents文件夹，复制@vant里的dist文件夹。并粘贴改名为vant

3 可以删除因为引入vant生成的文件夹

4  正常引入vant所需，但是文件路径为“/wxcomponents/vant/.....”

5  在pages.json中修改配置。让其可以使用vant和npm配置，具体代码如下

设置动态的顶部文字

pages.json中，在新建文件时，会自动增加对应数据，可以在这里设置头部文字，也可以引入vant的样式

 "path": "pages/list/list",
    "style": {
      "navigationBarTitleText": "列表",
      "enablePullDownRefresh": false,
      "usingComponents": {
        "van-icon": "/wxcomponents/vant/icon/index",
      }
    }

封装axios请求

创建utils文件夹，在文件夹中添加http.js文件

function axios({
  url,
  method = "get",
  data = {}
}) {
  uni.showLoading({
    title: '拼命加载中...',
    mask: true
  })
  return new Promise((resolve, reject) => {
    uni.request({
      url: "https://www.uinav.com/api/public/v1" + url,
      method,
      data,
      success(res) {
        resolve(res.data)
        uni.hideLoading()
      },
      fail(err) {
        reject(err)
        uni.hideLoading()
        uni.showToast({
          title: "请求失败"
        })
      }
    })
  })
}
 
 
 
export default axios

在页面使用时

引入

  import axios from '../../utils/http.js'

使用

 axios({ url: '/home/swiperdata'}).then(res => {
        console.log(res)
 })

小程序的生命周期函数  uni-app同时兼容

开启关闭下拉刷新

uni.startPullDownRefresh()      // 开启下拉刷新功能

uni.stopPullDownRefresh()      // 停止下拉刷新的方法

而在微信小程序中，则是wx.startPullDownRefresh()  

自定义小程序导航栏

1 在要使用的页面的pages里定义   "navigationStyle":"custom"

2 定义一个子组件，这个子组件就是自定义的头部导航栏,这个组件里没有onLode,可以使用mounted

  uni.getSystemInfo({}) 可以获取手机基础信息 

  statusBarHeight为手机导航栏高度

3 使用的页面引入该组件，可以正常使用父子组件传值

注意：如果点击事件在该组件里不生效，可以尝试子传父传入事件触发

uni-app的分包

1 pages是小程序用来放页面的位置，在跟它同级的位置，创建分包文件夹，创建对应文件，格式如下

2 在 pages.json 中，配置分包

   "subPackages": [{
    "root": "packageOne",
    "pages": [
      
    {
      "path": "search/search",
      "style": {
        "navigationBarTitleText": "商品搜索",
        "enablePullDownRefresh": true,
        "backgroundColor": "#d00",
        "onReachBottomDistance": 260
      }
    }
    //在此处添加另一个页面，{path:....,style....}
  ]  }]

root属性是分包的那个文件夹名称，pages数组中，放置分包的页面，其余和pages文件夹的页面配置一致

uni-app的路由  微信小程序除前缀不同外其余一致

标签跳转

标签名

<navigator url="/pages/home/home"  open-type="navigate"></navigator>

open-type参数

逻辑跳转

路由传参和接收参数

 注意：switchTab不能传递参数

 传参：wx.redirectTo({ url: '/pages/home/home?id='+id })

 接收：在监听页面加载的onLoad函数形参options对象里解构

图片的预览

 // 图片预览
 preview(img) {  //点击的图片的网址
  //接受一个数组或字符串，里面的内容是要预览的图片的网址的集合
    let image = this.dataAll.pics.map(item => item.pics_mid_url)
        uni.previewImage({  //开启预览的api
          current: img,   //当前点击的图片
          urls: image     //图片的集合
        })
 },

uni-app的自带弹框

弹出框

 uni.showToast({
          title: '添加成功',
          icon: 'checkbox',
          mask: true
 })

loading

  uni.showLoading({
    title: '拼命加载中...',
    mask: true
  })

添加收货地址

 addSite() {  //事件
 //uni-app获取用户收货地址的api  
    uni.chooseAddress({
      success(res) {   //成功时的回调
        console.log(res)
       }
    })
 }

checkbox组件的使用

因为它是封装好的组件，v-model 是不起作用的，设置其是否被勾选的值为 checked，可以通过 @click 来设置其点击事件，在事件中修改 checked 值 , 如果是循环的数据 ，在事件中传递 下标 来更改对应数据

分享

分享的按钮

<button open-type="share">分享</button>

对应逻辑

onShareAppMessage 是分享的函数，有参数 options, 可以return出几个数据

onShareAppMessage(
 return {
    title: " ",   //标题  
    path: '/pages/index/index',  //分享的页面
    imageUrl: '/images/chiken.webp'    //分享的主题图片 
 }
)

扫码

wx.scanCode({      //扫码事件函数
   onlyFromCamera: false,     //是否只能摄像头扫码，要关闭
   scanType: ['barCode', 'qrCode'],   //扫描的类型，条形码，二维码
   success: (result) => {},   //成功的回调
   fail: (res) => {},          //失败的回调
   complete: (res) => {}  
})

获取个人信息

1 书写一个 button 组件

<button type="primary" open-type="getUserInfo" 
   @click="add" v-if="!isWarrant">
登录</button>

2 使用 uni.getUserProfile 拉取用户授权，  success 是点击确定按钮时触发，res 参数是获取成功时返出的个人信息

 add() {
        uni.getUserProfile({
          desc: '用于获取个人资料', // 这里的desc在微信开发文档中要求必须填写的
          success: (res) => {
            this.isWarrant = true
            this.userInfo = res.userInfo
            console.log(res.userInfo)
          }
        })
  }