微信小程序面试准备

目录

0.请谈谈微信小程序主要目录和文件的作用？

1.封装小程序的请求事件

2.有哪些参数传值方法

3.与css相比,wxss扩展的特征有

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

5.如何实现下拉刷新

6.页面跳转 

7.如何实现自定义tabBar

8.请谈谈小程序的双向绑定和vue的异同？

9..请谈谈小程序的生命周期函数

 10.简述微信小程序原理

11.那些方法来提高微信小程序的应用速度？

12.分析微信小程序的优劣势？

13.微信小程序和H5的区别？

 14.怎么解决微信小程序的异步请求问题？

15.小程序的发布流程（开发流程）

16、数据存储

17 图片 

18如何分包加载？分包加载的优势在哪

navigationBar头部导航栏

background 下拉刷新后,显示的背景部分,

page页面显示部分

window

0.请谈谈微信小程序主要目录和文件的作用？

project.config.json：项目配置文件，用的最多的就是配置是否开启https校验
App.js：设置一些全局的基础数据等
App.json：底部tab，标题栏和路由等设置
App.wxss：公共样式，引入iconfont等
pages：里面包含一个个具体的页面
index.json：配置当前页面标题和引入组件
index.wxml：页面结构
index.wxss：页面样式表
index.js：页面的逻辑，请求和数据处理
 

1.封装小程序的请求事件

(1).配置通用的url

(2) 设置发送请求前和发送请求后的遮罩信息

(3) 使用promise进行封装

一定要有域名和http协议  服务器域名必须在小程序后台管理页面开发request合法域名列表配置中配置.

加载中

wx.showLoading({
title:'正在加载中',
mask:true 
})

return new Promise(function(reslove,reject){
wx.request({
 url:'接口地址',
method:'get' //默认为get时可以不写
data:{} //参数写在data中
success:res=>{
    //请求成功后执行,值就是参数
resolve(res)
  } ,
fail:(err)=>{
reject(err)
 },
})
})

2.有哪些参数传值方法

1页面跳转或重定向时，使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递参数
或
给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值

wx.navigateTo({

url:'/pages/logs/log?type=1'

})

4.通过storage传递参数

wx.setStorageSync('local','参数')

3.与css相比,wxss扩展的特征有

响应式长度  小程序不支持通配符

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

可以通过unionID来区分用户的唯一性 因为统一用户,对同一个微信开放平台下的不同应用,unionID是相同的

5.如何实现下拉刷新

首先全局的config中的window配置 enablePullDownRefresh

在Page中定义 onPullDownRefresh钩子函数,达到下拉刷新条件后,该狗子函数执行,发起请求

请求返回后,调用wx.stopPullDownRefresh

6.bindtap和catchtap 的区别是什么

他们都作为点击事件 在作用上是一样的

不同点是catchtap可以组织事件冒泡 bindtap不能阻止事件冒泡

6.页面跳转 

wx.navigateTo()保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabBar页面

wx.redirecTo() 关闭当前页面,跳转到应用内某个页面,但是不允许条暗转到tabBar页面

wx.switchTab() 跳转到Tabbar页面,并关闭其他所有非tabBar页面

7.如何实现自定义tabBar

在pages.json里面设置tabBar对象 

list数组 pagePath 跳转路径

text按钮名称,信息 

iconPath 按钮没有选中时的图标

selectedIconPath 按钮选中时的图标

分包加载

在构建时打包成不同的分包,用户在使用时按需进行加载

8.请谈谈小程序的双向绑定和vue的异同？

大体相同，但小程序之间this.data的属性是不可以同步到视图的，必须调用this.setData()方法

9..请谈谈小程序的生命周期函数

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShow()页面显示/切入前台时候触发，一般用来发送数据请求
onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

 
10.简述微信小程序原理

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和APPService两个部分，webview主要用来展示UI，appservice用来处理业务逻辑，数据及接口调用，它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染，事件处理；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
javaScript的代码是运行在微信App中的，因此一些h5技术的应用需要微信APP提供对应的API支持
wxml 微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的
wxss具有css的大部分特性，但并不是所有都支持，没有详细文档（wxss的图片引入需要使用外链地址，没有body，样式可以使用import导入）
 

11.那些方法来提高微信小程序的应用速度？

提高页面的加载速度
用户行为预测
减少默认的data的大小
组件化方案

12.分析微信小程序的优劣势？

优势：

容易上手，基础组件库比较全，基本不需要考虑兼容问题
开发文档比较完善，开发社区比较活跃，支持插件式开发
良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多
开发成本比APP要低
为用户提供良好的保障（小程序发布，严格是审查流程）
劣势：

限制较多，页面大小不能超过1M，不能打开超过5个层级的页面
样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
依托与微信，无法开发后台管理功能
后台调试麻烦，因为api接口必须https请求且公网地址
真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢

13.微信小程序和H5的区别？

运行环境不同（小程序在微信运行，h5在浏览器运行）
开发成本不同（h5需要兼容不同的浏览器）
获取系统权限不同（系统级权限可以和小程序无缝衔接）
应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）
 

 14.怎么解决微信小程序的异步请求问题？

在回调函数中调用下一个组件的函数

app.js
 
success:function(info){
 
        that.apirtnCallback(info)
 
}

index.js
 
onLoad:function(){
 
        app.apirtnCallback = res =>{
 
                console.log(res)
 
        }
 
}

15.小程序的发布流程（开发流程）

1. 注册微信小程序账号
2. 获取微信小程序的AppID
3. 下载微信小程序开发者工具
4. 创建demo项目
5. 去微信公众号配置域名
6. 手机浏览
7. 代码上传
8. 提交审核
9. 小程序发布

16、数据存储

wx.setStorage(Object object)
将数据存储在本地缓存中指定的 key 中。

单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

wx.setStorageSync(string key, any data)
 wx.setStorageSync('key', 'value')
wx.getStorage(Object object)
any wx.getStorageSync(string key)
wx.removeStorage(Object object)
wx.clearStorage(Object object)
 

17 图片 

wx.previewImage() 在新的页面中全局预览图片,预览的过程中用户可以进行保存图片、发送给朋友等操作

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表

 wx.getImageInfo(Object object)  获取图片信息。网络图片需先配置download域名才能生效。

wx.compressImage(Object object) 压缩图片接口，可选压缩质量

wx.compressImage({
  src: '', // 图片路径
  quality: 80 // 压缩质量

wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照

18如何分包加载？分包加载的优势在哪？

分包加载的介绍
      大部分小程序都会由某几个功能组成，通常这几个功能之间是独立的，但会依赖一些公共的逻辑，并且这些功能通常会对应某几个独立的页面。那么小程序代码的打包，大可不必一定要打成一个，可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，才加载这个功能对应的分包。
对于用户来说，小程序加载流程变成了：
1.首次启动时，先下载小程序主包，显示主包内的页面；
2.如果用户进入了某个分包的页面，再下载这个对应分包，下载完毕后，显示分包的页面。
采用分包加载，对开发者而言，能使小程序有更大的代码体积，承载更多的功能与服务；而对用户而言，可以更快地打开小程序，同时在不影响启动速度前提下使用更多功能。
分包的划分
在配置前首先需要开发者规划下各个分包需要容纳的内容，我们建议开发者按照功能划分的的原则，将同一个功能下的页面和逻辑放置于同一个目录下，对于一些跨功能之间公共逻辑，将其放置于主包下，这样可以确保在分包引用这部分功能时，这部分的逻辑一定存在。
在分包划分时，应该注意以下事项：
1.避免分包与分包之间引用上的耦合。因为分包的加载是由用户操作触发的，并不能确保某分包加载时，另外一个分包就一定存在，这个时候可能会导致 JS 逻辑异常的情况，例如报「"xxx.js" is not defined」这样的错误；
2.一些公共用到的自定义组件，需要放在主包内。

 常见问题：
rpx：小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率屏幕
本地资源无法通过wxss获取：background-image：可以使用网络图片，或者base64，或者使用标签
wx.navigateTo无法打开页面：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
tabBar设置不显示：1.tabBar的数量少于2项或超过5项都不会显示。2.tabBar写法错误导致不会显示。3.tabBar没有写pagePath字段（程序启动后显示的第一个页面）