小程序面试题

小程序授权登录流程

0、如何获得用户信息

a、open-type=getUserInfo 

或

b、直接调用wx. getUserInfo 方法

通过wx.longin

1.登陆只需发送code到后台，后台获取openid，根据openid到数据库中查找用户信息， 若有则返回用户信息，若没有将openid插入数据库，

2.后台生成token（可以是用户id和其他随机串组合的加密字符串）返回前台token和用户信息

3.前台判断用户信息是否包含用户名称，用户城市。。。等信息，若包含则登陆成功

4若不包含，则调用 wx.getUserInfo，发送encryptedData，iv，token到后台，后台根据token找到用户openid解密encryptedData和iv获取用户其他信息

5.然后更新数据库，并返回用户信息

小程序原理

答：微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。

JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，

微信提供的独有的某些API，H5也不支持或支持的不是特别好。

WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。

WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。

小程序的优势和劣势

优势：1、无需下载，通过搜索和扫一扫就可以打开。

2、良好的用户体验：打开速度快。

3、开发成本要比App要低。

4、安卓上可以添加到桌面，与原生App差不多。

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。

劣势： 1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。

2、样式单一。小程序  的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。

3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。

4、依托于微信，无法开发后台管理功能。

获取定位

首先我们需要从高德地图官网注册一个账号，然后获取自己的key，

调用微信接口wx.getloction，返回给我们一个json数组，数组中包含各种属性

我们最需要的就是经度和纬度，我们获取了经度和纬度就可以调用地图api，把我们的经纬度传上去，就可获得地图返回给我们当前位置的信息。

小程序如何实现双向数据绑定（搜索）

1、利用bindinput来触发改变

2、利用data-name来绑定获取的数据

3、bindinput触发时利用event获取name的值，然后用this.setData改变data-name绑定的参数。

4、利用data-name中间属性来动态指定对象还是非对象，入data-name="login"或data-name="login.username"，这样可以根据中间有没有. 来判断是对象还是直接参数

回到顶部

第一种情况,当页面在顶部的时候，回到顶部按钮是不会出现的。

第二种情况,当页面在离开顶部一定距离的时候，回到顶部按钮出现

在这里我们如果要使用滚动事件的话，小程序规定 最外层一定要使用scroll-view标签进行包裹，然后在设置scroll-y=”true” 意思是允许页面了纵向滚动，scroll-top是滚动到顶部做处理，一般绑定一个事件，bindscrolltolower同样的原理，滚动到底部做处理，bindscroll表示在滚动的时候出发这个事件。下面WXML内部的话，就是我们回到顶部的按钮设置，我们在点击它时绑定一个事件goTop，让他的滚动高度等于0，这样它就回到顶部了。

点击进入详情页

在wxml页面写一个data-自定义属性={写入参数}，然后在js里调用。点击跳入哪个页面在哪个页面后面写入你要传的参数。

更多商品点击进入有一个上拉加载

分类

分类界面实现

左边是一级目录，右边是一级目录对应的二级目录，根据这个需求，我们数据设计结构一定是一个数组，第一个数组包含一级目录数据，嵌套的数组包含的是二级目录数据。

总体主盒子：positon:relative  相对定位

左侧主盒子：设置行内级元素，display:inline-block

右侧主盒子：绝对定位

4.微信小程序的分享功能，实际上就是 转发 　　√

第一种用法是： 

onShareAppMessage 这个方法在每个页面 js 中 page里面，这个函数需要return一个对象，如果不设置这个函数，那么右上角的···则没有转发这个功能。

返回的对象有三个值：

title：这是转发的标题。默认值是当前小程序的名称

path：这是转发路径。默认值是当前页面，如果自己设定则是以 / 开头的完整路径：例如： /pages/index/index      就是 pages文件夹 下面 index文件夹 里的 index.wxml

imageUrl：自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。默认值是当前页面的截图

第二种用法是：

buttion 这个组件，添加  open-type="share" 属性 ，点击button的时候就能触发 onShareAppMessage 这个函数，当然，如果没定义这个函数，那么就没作用。

支付

在这里Catcher先通过wx.login这个API先取到了登录的凭证code，并把这个凭证code做为请求参数用wx.request这个API发起一个网络请求。

在这个网络请求处理后会返回小程序支付所需要的相关参数。拿到这些参数后，再调用wx.requestPayment这个支付API，此时才算是真正的发起支付。

小程序有哪些参数传值的方法

1.给html元素添加data-属性来传值，通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可存放对象

2.设置id的方法来传值通过e.currentTarget.id获取设置的id值，然后通过设置全局对象方式来传值

3.在navigator中添加参数传值 通过js中的onload生命周期的参数“options”进行接收。

<navigator url="list/list?title={{ title }}" >更多</navigator>传递；

小程序路由传参数

给HTML一个点击事件

  <view class="classify" wx:for="{{classifyData}}" wx:key="id" data-index="{{index}}" bindtap='active'>{{item}}</view>

然后在定义路由跳转的地方写点击事件并传参

active:function(e){ wx.navigateTo({ //跳转到新的页面 url: '../detail/detail?title=' + e.currentTarget.dataset.name//实际路径要写全 title是要传的参数 }) }

在目标页用options接收

onLoad: function (options) {

    console.log(options.title)  //此时值就是传的东西  },

小程序和h5的区别

第一条是运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，

而微信小程序的运行环境并非完整的浏览器，

是微信开发团队基于浏览器内核完全重构的一个内置解析器，

针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同

只在微信中运行，不用去顾虑浏览器兼容性，

不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同

系统级权限都可以和微信小程序无缝衔接

第四条便是应用在生产环境的运行流畅度

当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，

它的体验总是不尽人意，

需要不断的对项目优化来提升用户体验。

webview的页面怎么跳转到小程序导航页面

小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。

若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {

            var page = getCurrentPages().pop();

            if (page == undefined || page == null) return;

            page.onLoad();

           }

  webview的页面，则通过

 wx.miniProgram.switchTab({

          url: '/pages/index/index'

        })

webview（就是普通的h5网页）怎么跳转回小程序中

首先要引入最新版的jweixin-1.3.2.js，然后

wx.miniProgram.navigateTo({

            url: '/pages/login/login'+'$params'

        })

小程序如何跳转webview页面

直接写路径 url="/pages/index/index"

js写

bindViewTap: function() {

wx.navigateTo({

url: '../index/index'

})

},

view里边写bindtap=“bindViewTap”

小程序发布流程

先在微信公众平台登录你注册开发者时填写的邮箱账号和密码，使用你绑定的微信账号二维码扫描即可登录。

第一步：补充小程序的基本信息，如名称、图标、描述等。

第二步：现在可以直接去下载开发者工具进行代码的开发和上传

如果需要其他开发者配合，那就需要添加开发者了，需要用绑定的微信扫一扫二维码确认身份，填写上这个开发真的对应信息就可以了

第三步：在开发设置页面查看AppID和AppSecret，配置服务器域名

第四步：把你在编辑器中写好的代码提交到微信公众平台，然后提交审核，审核通过后可发布

小程序开发中遇到的问题。

0.不能打开超过5个层级的页面。

1.√

小程序中的背景图片不能使用本地的路径，要么使用在服务器上的图片路径，

要么编码成base64位。     image标签才可以使用本地路径。

2.点击view之后，获取该view的text值    √

 　　这个的解决办法就是：把view的text值放在data数据里面，然后点击事件触发的时候就获取对应data的数据

3 遇到当调用自定义的函数时，出现 function  is not defined 的情况   √

情景再现：

（1） 我自定义了一个myLoading的函数，然后通过某个事件需要调用该函数

（2） 错误的调用方式是：事件的名字里直接写我刚才自定义的函数名字，

这样调用会出现问题，正确的调用方式：需要在调用的函数前加入this.

这样调用就会出现上面的问题

（3） 正确的调用方式是：

需要在调用的函数前加上 this.  

4.微信小程序的分享功能，实际上就是 转发 　　√

第一种用法是： 

onShareAppMessage 这个方法在每个页面 js 中 page里面，这个函数需要return一个对象，如果不设置这个函数，那么右上角的···则没有转发这个功能。

返回的对象有三个值：

title：这是转发的标题。默认值是当前小程序的名称

path：这是转发路径。默认值是当前页面，如果自己设定则是以 / 开头的完整路径：例如： /pages/index/index      就是 pages文件夹 下面 index文件夹 里的 index.wxml

imageUrl：自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。默认值是当前页面的截图

第二种用法是：

buttion 这个组件，添加  open-type="share" 属性 ，点击button的时候就能触发 onShareAppMessage 这个函数，当然，如果没定义这个函数，那么就没作用。

 5.数据传值的问题：传值的方法。（案例例如一个for循环。然后点击item需要知道点击的是第几个item。）√

在view上面加一个属性id="需要得到的值"

然后设在点击事件。在js里面的这个函数里面获取。

在函数里面，参数是event。通过

event.currentTarget.id来获取。

6.form组件设置padding无效√

      解决方案：经过反复测试发现小程序的form组件是隶属于行内元素范围的。

因为我设置了padding属性一点效果都没有，我改为view有效，在改回form组件还是没有效果，判断form组件和我们所认为的正常html的form表单块元素是不一样的。而且小程序中的组件不知道为啥始终是在最顶层，观察了下wxml面板，并为发现自有css属性

因此可以将form组件改为block化，或者在form组件内先使用空的view来设置padding在根据页面需求进行下一步布局。

7.小程序中的scroll-view组件不能和textarea一起用，自己写的类似scroll-view组件（overflow-y：auto）也不能一起使用，使用的话，textarea的提示文字和光标会飘，根本无法使用。另外textarea，也不能display：none，最好的方法是            用条件判断去控制它wx:if="{{show}}"

小程序常用api 20个（如文件上传，下载，录音，音频播放，位置，设备，拨打电话…）

上传

wx.uploadFile() 

将本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data 。

如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

UploadTask一个可以监听上传进度变化事件，以及取消上传任务的对象

UploadTask.onProgressUpdate()监听上传进度变化事件

UploadTask.abort()中断上传任务

下载

wx.downloadFile()

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径

 音频组件

1、this.comp(“compID”).play()播放音乐链接中的音乐

2、this.comp(“compID”).pause()暂停播放

3、this.comp(“compID”).setSrc()设置音频链接

4、this.comp(“compID”).seek()从指定位置继续播放音乐

下拉刷新

wx.onDeviceMotionChange()

监听设备方向变化事件，频率根据 wx.startDeviceMotionListening() 的 interval 参数。可以使用 wx.stopDeviceMotionListening() 停止监听。

wx.stopPullDownRefresh()停止当前页面下拉刷新。

导航栏

wx.setNavigationBarTitle()动态设置当前页面的标题

wx.showNavigationBarLoading()在当前页面显示导航条加载动画

wx.hideNavigationBarLoading()在当前页面隐藏导航条加载动画

wx.setNavigationBarColor()颜色

设备

wx.startDeviceMotionListening()开始监听设备方向的变化。

wx.stopDeviceMotionListening()停止监听设备方向的变化。

wx.onDeviceMotionChange()

监听设备方向变化事件，频率根据 wx.startDeviceMotionListening() 的 interval 参数。可以使用 wx.stopDeviceMotionListening() 停止监听。

收货地址

wx.chooseAddress()调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。

转发

wx.getShareInfo()获取转发详细信息

wx.hideShareMenu()隐藏转发按钮

wx.showShareMenu()显示当前页面的转发按钮

wx.updateShareMenu()更新转发属性

支付

wx.faceVerifyForPay()支付各个安全场景验证人脸

wx.requestPayment()发起微信支付。

用户信息

wx.getUserInfo()调用前需要 用户授权 scope.userInfo。

UserInfo属性

string nickName用户昵称

string avatarUrl

用户头像图片的 URL。URL 最后一个数值代表正方形头像大小（有 0、46、64、96、132 数值可选，0 代表 640x640 的正方形头像，46 表示 46x46 的正方形头像，剩余数值以此类推。默认132），用户没有头像时该项为空。若用户更换头像，原有头像 URL 将失效。

number gender用户性别

客服消息

customerTyping下发客服当前输入状态给用户，

getTempMedia小程序可以使用本接口获取客服消息内的临时素材（即下载临时的多媒体文件）。目前小程序仅支持下载图片文件。

sendCustomerMessage发送客服消息给用户。

uploadTempMedia小程序可以使用本接口把媒体文件（目前仅支持图片）上传到微信服务器，用户发送客服消息或被动回复用户消息。

位置调用前需要 用户授权 scope.userLocation

wx.getLocation(Object object)获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。

wx.openLocation()​使用微信内置地图查看位置。

wx.chooseLocation()打开地图选择位置。

音频

wx.playVoice() 开始播放语音，同时只允许一个语音文件正在播放，如果前一个语音文件还没播放完，将中断前一个语音播放。

wx.pauseVoice()暂停正在播放的语音。再次调用 wx.playVoice 播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，需要先调用 wx.stopVoice。

InnerAudioContext.offStop()取消监听音频停止事件

InnerAudioContext.onEnded()监听音频自然播放至结束的事件

InnerAudioContext.offEnded()取消监听音频自然播放至结束的事件

InnerAudioContext.onTimeUpdate()监听音频播放进度更新事件

InnerAudioContext.offTimeUpdate()取消监听音频播放进度更新事件

图片

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

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

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

wx.saveImageToPhotosAlbum()保存图片到系统相册。

数据缓存

wx.getStorage( )从本地缓存中异步获取指定 key 的内容

wx.getStorageSync()wx.getStorage 的同步版本

wx.setStorage()将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容。

wx.setStorageSync()wx.setStorage 的同步版本

wx.removeStorage()从本地缓存中移除指定 key

wx.removeStorageSync()wx.removeStorage 的同步版本

wx.clearStorage()清理本地数据缓存

wx.clearStorageSync()wx.clearStorage 的同步版本

wx.getStorageInfo()异步获取当前storage的相关信息

Object wx.getStorageInfoSync()wx.getStorageInfo 的同步版本

1、你是怎么封装微信小程序的数据请求的？

答：

一、将所有的接口放在统一的js文件中并导出

二、在app.js中创建封装请求数据的方法

三、在子页面中调用封装的方法请求数据

2、你使用过哪些方法，来提高微信小程序的应用速度？

答：

一、提高页面加载速度

二、用户行为预测

三、减少默认data的大小

四、组件化方案

3、如何实现下拉刷新？

答：用view代替scroll-view,,设置onPullDownRefresh函数实现