前端开发面试题总结-原生小程序部分

文章目录

• 1、wxss和css的区别?
• 2、原生小程序组件使用过哪些?
• 3、原生小程序中如何绑定事件?
• 4、原生小程序中如何修改数据并同步视图?
• 5、原生小程序中如何进行事件传参?
• 6、小程序中发起网络请求
• [7、 导航跳转方式?](#7、 导航跳转方式?)
• [8、 监听上拉触底和下拉刷新?](#8、 监听上拉触底和下拉刷新?)
• [9、 小程序的生命周期函数?](#9、 小程序的生命周期函数?)
• 10、定义全局组件和局部组件
• [11、 组件通信](#11、 组件通信)
• 12、wxs是什么?
• 13、原生小程序上线流程
• 14、登录流程
• [18、 小程序如何跳转另外一个小程序？](#18、 小程序如何跳转另外一个小程序？)
• 19、小程序地图

1、wxss和css的区别?

● wxss是小程序配合wxml渲染结构样式

● css是网页结合html渲染结构样式

● wxss新增了rpx，适配单位, 750rpx等于整屏的宽度

● wxss区分全局样式和局部样式

○全局样式app.wxss，局部样式则是每个页面内部的wxss文件

2、原生小程序组件使用过哪些?

● view: 盒子

● text: 文本

● rich-text: 富文本,可以通过nodes节点解析html标签

● scroll-view: 滚动区域

● swiper: 轮播图

● button: 按钮 open-type开放能力(share / contact / ...)

●map:地图组件

3、原生小程序中如何绑定事件?

● 通过bind: xxx 或者bindxxx

●比如：bind:tap 绑定点击事件

4、原生小程序中如何修改数据并同步视图?

● this.setData(), 既可以更改数据，也可以同步视图

● 不可以直接修改数据, 直接this.data.数据名=xxx只更改数据,视图不变

●注意: this.setData()是异步的，视图同步完毕后会触发setData函数的回调函数执行

this.setData({   
name: '张三' 
}, ()=>{  
// 视图更新完毕了, 就会触发该回调函数, 相当于vue中的$nextTick 
})

5、原生小程序中如何进行事件传参?

●通过data-属性名

 <view data-car="劳斯莱斯" 
 bind:tap="getCarName">x</view> 
 getCarName(ev) {    
    console.log(ev.currentTarget.dataset.car) // 劳斯莱斯  }

●通过mark:属性名(推荐)

 <view mark:car="劳斯莱斯" bind:tap="getCarName">x</view> 
  getCarName(ev) {     
  console.log(ev.mark.car) // 劳斯莱斯  
  }

6、小程序中发起网络请求

● 通过wx.request，这个方法不支持promise, 所以在原生小程序中需要对wx.request进行二次封装

● 注意：小程序中不存在跨域的问题，只有浏览器才有同源保护策略

● 三方的: wechat-http

7、 导航跳转方式?

● 声明式导航

○ navigator标签进行跳转, 使用to属性

○ 跳转到tabbar页面, 需要配合open-type="switchTab"

○ open-type="navigateBack" delta="层级"

● 编程式导航

○ wx.navigatorTo() 普通页面的跳转

○ wx.switchTab()跳转到tabbar页面,wx.navigateBack

● 导航传参

○ 通过query(?根参数 key=value&key=value)传递参数

○ 接收参数,通过onLoad的形参去接收

8、 监听上拉触底和下拉刷新?

● onPullDownRefresh 监听用户下拉动作

在 app.json中配置: "enablePullDownRefresh": true

● onReachBottom

在app.json中设置触底高度: "onReachBottomDistance": 100

一旦到达触底高度则会触发onReachBottom钩子函数的执行

9、 小程序的生命周期函数?

1.应用的·生命周期

// 触发一次 
onLaunch() {   
  console.log('小程序开启启动,初始化完成') 
},
 // 小程序显示,多次触发 
 onShow() {   
 console.lg('小程序显示了') 
 },
 onHide() {   
 console.log('小程序隐藏了') 
 },
 onError() {   
 console.log('小程序出现异常') 
 },

2.页面的生命周期

// 1. onLoad 页面开始加载 发送请求获取数据,获取到导航参数 
// 2. onShow 页面显示 (多次触发) 提示信息 
// 3. onReady 页面初次渲染完成 
// 4. onHide 页面隐藏  tabbar页面切换只是隐藏 
// 5. onUnload 页面销毁 不是tabbar页面 b页面 返回 A页面对应的页面销毁 // 清理操作

3.组件的生命周期函数

// 1. created 在组件实例刚刚被创建时执行(拿到数据) 
// 2. attached 在组件实例进入页面节点树时执行 
// 3. ready 在组件在视图层布局完成后执行 
// 4. moved 在组件实例被移动到节点树另一个位置时执行 
// 5. detached 在组件实例被从页面节点树移除时执行 
// 6. error 每当组件方法抛出错误时执行

10、定义全局组件和局部组件

全局组件

1. 创建一个组件
2. 通过app.json中的useingComponets进行组件注册, 注册为全局组件
   局部组件
3. 创建一个组件
   2.通过页面的json中的useingComponets进行组件注册, 注册为局部组件

11、 组件通信

父向子传值

<local-com list="{{swipers}}" />

子组件通过properties进行接收

properties: {   
list: {     
type: Array,     
required: true   
} 
},

子向父传值

1.子组件传值

this.triggerEvent('自定义事件名', 传递的数据)

2.父组件接收, 通过bind:绑定自定义的事件名, 通过事件函数的e.detail获取到子组件传递的数据

<local-com bind:自定义事件名="getImage" list="{{swipers}}" />

3.通过事件函数的e.detail接收数据

getImage(e) {
  console.log(e.detail)
},

获取子组件的方式

1.通过selectComponents获取子组件

this.selectComponents('组件对应的选择器')

12、wxs是什么?

wxs weixin script: 在模板中无法调用js中定义的函数,可以调用wxs定义的函数,一般用wxs进行数据处理

缺点:

1. 不支持es6
2. 不支持小程序的api
3. 隔离性, wxs和js不能互相调用
   优点:
   1.没有兼容性(小程序的版本库)
   2.在ios设备上比js快2-20倍

13、原生小程序上线流程

● 代码进行上传

● 将版本设置为体验版本(产品和ui进行体验)(测试)

● 改bug, 重复上述两个步骤

● 提交审核

●审核通过点击发布

14、登录流程

1.微信授权登录

1.1 获取用户信息(iv, rawData, encrytedData,signature)

const userInfo = await uni.getUserProfile({   
  desc: '智慧商城获取您的用户信息' }) 
const {   
iv,   
rawData,   
encrytedData,   
signature } = userInfo[1]

1.2 调用uni-app的login方法获取code(用户凭证)

const {  
  code 
} = await uni.login()

2.根据微信授权的信息进行接口登录

const res = await login({   
iv,   
rawData,   
encryptedData,   
signature,   
code })

登录成功后

● 将token存到vuex

●判断是否有回跳地址,如果有,从哪来回哪去

// 1. 跳转到登录页面并传递回跳地址 uni.reLaunch(()=>{   
url: '/pages/login/login?redirectUrl=/pages/cart/cart' 
}) 
 // 2. 登录页面接收数据 onLoad(options){   
 // 2.1 接收参数并存储   
 this.redirectUrl = options.url } 
 // 3. 登录成功后回跳 this.$store.commit('user/setUserInfo', res.data) if(this.redirectUrl){   
 uni.switchTab({     
 url: this.redirectUrl   
 }) 
 }

16. 支付流程
    1.根据购买的商品信息生成订单,从而得到订单号

async createOrder() {  
// 要购买的商品   
const payGoods = this.$store.state.cart.list.filter(item => item.goods_state)   
// 通过map进行格式化   
const goods = payGoods.map(item => {     
return {       
goods_id: item.goods_id,       
goods_number: item.goods_count,       
goods_price: item.goods_price    
 }   
 })   
 // 调起创建订单的接口   
 const {    
  message: {       
  order_number     
  }   
  } = await createOrder({     
  order_price: this.totalPrice,     
  consignee_addr: this.$store.getters['user/addressStr'],     
  goods: goods   
  })   
  // 获取到订单id   
  this.payGoods(order_number) },

2.预支付: 根据订单号得到支付的参数

async payGoods(order_number) {   
// 获取支付参数   
const {     
message: {       
pay     
}   
} = await getPayParams({     
order_number   
})   
//  
},

3.uni.requestPayMent: 支付,需要很多参数

// 发起微信支付 
const [err, res] = await uni.requestPayment(pay) 
if (err) {   
uni.showToast('取消支付,跳转订单页面') 
} else {   
uni.showToast('支付成功,跳转订单页面') 
}

17. tabbar页面切换如何传递参数
    ●利用reLaunch

uni.reLaunch({   
url: '/pages/my/my?url=123' 
})

● vuex

●本地

18、 小程序如何跳转另外一个小程序？

wx.navigateToMiniProgram(Object object)

19、小程序地图

小程序中实现地图及定位功能，需借助小程序地图组件wxapp-map组件和小程序定位api（getLocation）

map组件

1.基本地图组件

<map id="map"></map>

2.样式

/* pages/home/home.wxss */    
page {   
height: 100%; }    
#map {   
width: 100%;   
height: 70%; }

地图定位

1.app.json配置

 "requiredPrivateInfos": [     
 "getLocation"   
 ],   
 "permission": {     
 "scope.userLocation": {      
  "desc": "用于测试小程序"     
  }   
  },