关于微信小程序的相关接口以及问题_微信小程序内部接口设计

一、小程序接口功能列表

1）网络 API 列表：
wx.request 发起网络请求
wx.uploadFile 上传文件
wx.downloadFile 下载文件
wx.connectSocket 创建 WebSocket 连接
wx.onSocketOpen 监听 WebSocket 打开
wx.onSocketError 监听 WebSocket 错误
wx.sendSocketMessage 发送 WebSocket 消息
wx.onSocketMessage 接受 WebSocket 消息
wx.closeSocket 关闭 WebSocket 连接
wx.onSocketClose 监听 WebSocket 关闭

2）媒体 API 列表：
wx.chooseImage 从相册选择图片，或者拍照
wx.previewImage 预览图片
wx.startRecord 开始录音
wx.stopRecord 结束录音
wx.playVoice 播放语音
wx.pauseVoice 暂停播放语音
wx.stopVoice 结束播放语音
wx.getBackgroundAudioPlayerState 获取音乐播放状态
wx.playBackgroundAudio 播放音乐
wx.pauseBackgroundAudio 暂停播放音乐
wx.seekBackgroundAudio 控制音乐播放进度
wx.stopBackgroundAudio 停止播放音乐
wx.onBackgroundAudioPlay 监听音乐开始播放
wx.onBackgroundAudioPause 监听音乐暂停
wx.onBackgroundAudioStop 监听音乐结束
wx.chooseVideo 从相册选择视频，或者拍摄

3）文件 API 列表：
wx.saveFile 保存文件
wx.getSavedFileList 获取已保存的文件列表
wx.getSavedFileInfo 获取已保存的文件信息
wx.removeSavedFile 删除已保存的文件信息
wx.openDocument 打开文件

4）数据 API 列表：
wx.getStorage 获取本地数据缓存
wx.getStorageSync 获取本地数据缓存
wx.setStorage 设置本地数据缓存
wx.setStorageSync 设置本地数据缓存
wx.getStorageInfo 获取本地缓存的相关信息
wx.getStorageInfoSync 获取本地缓存的相关信息
wx.removeStorage 删除本地缓存内容
wx.removeStorageSync 删除本地缓存内容
wx.clearStorage 清理本地数据缓存
wx.clearStorageSync 清理本地数据缓存

5）位置 API 列表：
wx.getLocation 获取当前位置
wx.chooseLocation 打开地图选择位置
wx.openLocation 打开内置地图
wx.createMapContext 地图组件控制

6）设备 API 列表：
wx.getNetworkType 获取网络类型
wx.onNetworkStatusChange 监听网络状态变化
wx.getSystemInfo 获取系统信息
wx.getSystemInfoSync 获取系统信息
wx.onAccelerometerChange 监听加速度数据
wx.startAccelerometer 开始监听加速度数据
wx.stopAccelerometer 停止监听加速度数据
wx.onCompassChange 监听罗盘数据
wx.startCompass 开始监听罗盘数据
wx.stopCompass 停止监听罗盘数据
wx.setClipboardData 设置剪贴板内容
wx.getClipboardData 获取剪贴板内容
wx.makePhoneCall 拨打电话
wx.scanCode 扫码

7）界面 API 列表：
wx.showToast 显示提示框
wx.showLoading 显示加载提示框
wx.hideToast 隐藏提示框
wx.hideLoading 隐藏提示框
wx.showModal 显示模态弹窗
wx.showActionSheet 显示菜单列表
wx.setNavigationBarTitle 设置当前页面标题
wx.showNavigationBarLoading 显示导航条加载动画
wx.hideNavigationBarLoading 隐藏导航条加载动画
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗口打开页面
wx.switchTab 切换到 tabbar 页面
wx.navigateBack 退回上一个页面
wx.createAnimation 动画
wx.createContext 创建绘图上下文
wx.drawCanvas 绘图
wx.stopPullDownRefresh 停止下拉刷新动画

8）WXML节点信息 API 列表：
wx.createSelectorQuery 创建查询请求
selectorQuery.select 根据选择器选择单个节点
selectorQuery.selectAll 根据选择器选择全部节点
selectorQuery.selectViewport 选择显示区域
nodesRef.boundingClientRect 获取布局位置和尺寸
nodesRef.scrollOffset 获取滚动位置
nodesRef.fields 获取任意字段
selectorQuery.exec 执行查询请求

9）开放接口：
wx.login 登录
wx.getUserInfo 获取用户信息
wx.chooseAddress 获取用户收货地址
wx.requestPayment 发起微信支付
wx.addCard 添加卡券
wx.openCard 打开卡券
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

https://www.jianshu.com/p/935307165454 —wepy

https://blog.csdn.net/wlwlwlwl015/article/details/78868624

https://blog.csdn.net/wlwlwlwl015/article/details/79125921

二、简单描述微信小程序的相关文件类型？

1. .wxml
	---是框架设计的一套标签语言，结合基础组件，事件系统，可以构建出页面的结构，内部主要是微信自己定义的一套组件。
2. .wxss
	---是一套样式语言，用于描述wxml的组件样式
3. .js
	---是逻辑处理，网络请求
4. .json
	--- 而文件会报错小恒旭设置，如页面注册，页面标题及tabBar
5. app.json
	---必须要有这个文件，因为微信框架把这个文件作为配置文件入口，整个小程序的全局配置，包括页面注册，网络配置，以及小程序的window背景色，配置导航条样式，配置默认标题。
	pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
	window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的
	tab字段—小程序全局顶部或底部tab
6. app.js---可以在这个文件中监听并处理小程序的生命周期函数，声明全局变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1.将所有的接口放在统一的js文件中并导出
2.在app.js中创建封装请求数据的方法
3.在子页面中调用封装的方法请求数据

1.在根目录下创建utils目录及api.js文件和apiConfig.js文件；
2.在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；
3.在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；
4.在具体的页面中导入；
1
2
3
4
5
6
7
8

四、有哪些参数传值的方法？

1.给html元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或者是onload的param参数获取，但data-名称 不能有大写字母和不可存放对象
2.设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式传递数值
3.在navigator中添加参数传值
1
2
3

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

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

六、小程序和原生app哪个好？

小程序除了拥有公众号的地开发成本，无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使其能够承载跟复杂的服务功能以及用户获得更好的体验。
1

七、简述微信小程序的原理？

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和appService两个部分；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
1
2
3
4
5
6

八、分析微信小程序的优劣势？

优势：
1.无需下载，通过搜索或者扫一扫就可以打开；2.良好的用户体验，打开速度快
3.开发成本比app低；4.安卓上可以添加到桌面，与原生app差不多；5.为用户提供良好的安全保障
劣势：
1.限制较多，页面大小不能超过1M,不能打开超过五个层级的页面；
2.样式单一；3.推广面窄，不能分享到朋友圈，只能分享给朋友；
4.依托于微信，无法开发后台管理功能
1
2
3
4
5
6
7

九、微信小程序与h5的区别？

1.运行环境的不同---h5的运行环境是浏览器，而微信小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准
2.开发成本的不同---微信小程序只在微信中运行，所以不用去顾虑浏览器兼容性问题
3.获取系统权限的不同---系统级权限都可以和微信小程序无缝衔接
4.生产环境的运行流畅度
1
2
3
4

十、怎么解决小程序的异步请求问题?

app.js:
    success:function(info){
        that.apirtnCallback(info)
    }
index.js:
    onLoad:function(){
        app.apirtnCallback=res=>{
        	console.log(res)
        }
    }
小程序支持大部分 ES6 语法
在返回成功的回调里面处理逻辑
Promise 异步
1
2
3
4
5
6
7
8
9
10
11
12
13

十一、小程序的双向绑定和vue哪里不一样？

小程序必须用this.setData({msg:'111'})方法来将数据同步到视图
1

十二、小程序的wxss和css的异同？

都是用来描述页面的样子；
WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
WXSS 仅支持部分 CSS 选择器；
WXSS 提供全局样式与局部样式1.wxss的图片引入需要使用外链地址；2.没有body,样式可直接使用import导入
1
2
3
4
5

十三、小程序关联微信公众号如何确定用户的唯一性？

使用ax.getUserInfo方法的withCredential为true时，可获取encryptedData,里面有union_id,
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的
1
2

十四、如何实现下拉刷新？

用view代替scroll-view，设置onPullDownRefresh函数实现
1

十五、小程序调用后台接口遇到哪些问题？

1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启；
2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢
1
2

十六、小程序和Vue写法的区别

1.循环遍历的时候：小程序是wx:for="list",而Vue是v-for="info in list"
2.调用data模型的时候：小程序是this.data.uinfo,而vue是this.unifo,给模型赋值也不一样，小程序是this.setData({unifo:1}),而Vue是直接this.unifo=1
1
2

十七、 为什么要对小程序进行组件模块化设计

1、微信小程序有代码大小限制，微信小程序最大为2M
2、提高代码的复用率
1
2

十八、 如何进行组件化模块化设计

通过WXML的import和include来使用文件模版
使用WXSS的@import引用WXSS文件
使用JS的require来引用JS文件
1
2
3

十九、wx:if与hidden的区别

wx:if是遇到true的时候显示，hidden是遇到false的时候显示
wx:if在隐藏的时候不渲染，而hidden在隐藏的时候仍然渲染，只是不显示
频繁切换的话，用wx:if将会消耗更多的资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。
如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
1
2
3
4

http://www.imooc.com/article/271503

二十、rpx

微信小程序新定义了一个尺寸单位，可以适配不同分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。
1

https://blog.csdn.net/xchaha/article/details/81019945

二十一、生命周期函数

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

二十二、wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo
1

二十三、 本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用<image/>标签
1

二十四、bindtap和catchtap有什么区别？

相同点：首先他们都是作为点击事件，就是点击时触发
不同点：主要是bindtap不会阻止冒泡事件，而catchtap会阻止冒泡
1
2

二十五、简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
1
2
3
4
5

二十六、请谈谈原生开发小程序、wepy、mpvue 的对比

个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。
而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。
而如果如果团队前端强大，自己做一套框架也没问题。
1
2
3

二十七、谈谈wxml与标准html的异同

都是用来描述页面的结构；
都由标签、属性等构成；
标签名字不一样，且小程序标签更少，单一标签更多；
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
组件封装不同， WXML对组件进行了重新封装，
小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。
1
2
3
4
5
6
7

二十八、微信小程序常见bug

1.域名必须是HTTPS
2. input组件placeholder字体颜色
3. wx.navigateTo无法跳转到带tabbar的页面
4. tabbar在切换时页面数据无法刷新
5.如何去掉自定义button灰色的圆角边框
6.input textarea是APP的原生组件，z-index层级最高
7.一段文字如何换行
8.设置最外层标签的margin-bottom在IOS下不生效
9.小程序中canvas的图片不支持base64格式
10.回到页面顶部
11.wx.setStorageSync和wx.getStorageSync报错问题
12.如何获取微信群名称？
13.new Date跨平台兼容性问题
14.wx.getSystemInfoSync获取windowHeight不准确
15.图片本地资源名称，尽量使用小写命名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二十九、 小程序获取场景值的方法？

let options=wx.getLanchOptionsSync()
1

三十、小程序onPageScroll方法的使用注意什么？

由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。
1

三十一、小程序视图渲染结束回调？

使用setData(data, callback)，在callback回调方法中添加后续操作代码
1

三十二、小程序同步API和异步API使用时注意事项

像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作。
1

三十三、如果需要用户授权，用户选择拒绝授权，此时应该如何处理？

获取用户信息，需要先调用 wx.login 接口。
接口调用结束的回调函数（调用成功、失败都会执行）
wx.getUserInfo 接口需要用户授权，我们就是要在用户点击拒绝的时候，弹出提示框，提示用户以提升用户体验。
wx.getUserInfo({
	success:function(resuser){
		console.log(success)
	},
	fail:function(){
		wx.showModal({
			title:'警告',
			content:'',
			success:function(res){
				if(res.confirm){
					console.log('用户点击确定')
				}
			}
		})
	}
})
这样用户就获得了提示信息，但此时，用户还是停留在页面的，如果某些展示信息，还是给要给用户展示的，只是在进行某些操作的时候要对授权进行验证的话，那就得继续修改我们的代码，保存用户的登录态，在其他地方做验证使用。
第一种思路：
wx.getUserInfo({
	success: function (resuser) {
		let userInfo = resuser.userInfo
		that.healthApi.login(code, userInfo).then(logindata => {   
		// 这里将微信的请求封装成Promiese 风格
		if (logindata.code === 0) {
            var sessionId = logindata.data// 调用微信wechat.setStorage将换回来的 SessionId 存在本地缓存
            that.wechat.setStorage('sessionId', sessionId).then(() => {
            	that.globalData.userInfo = userInfo
            	typeof cb == "function" && cb(that.globalData.userInfo)
				})
			}
		})
	},
        fail: function () {
            wx.showModal({
            title: '警告',
            content: '',
                success: function (res) {
                if (res.confirm) {
                console.log('用户点击确定')
                }
            }
        })
    }
})
这样我们将登录态保存在了 SessionId 中，在每次登录的时候我们只需要再调用一个 检查 SessionId的接口就行，检查不通过再调用微信登录接口。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

三十四、简述微信小程序登录流程

1.判断用户是否登陆过，如果已经登陆过，则直接获取个人信息进入主页
2.未登录则引导登录，直接跳转到登录页面，封装方法获取code值，调用wx.login()方法,获取到用户信息登陆成功就跳转到个人主页
//获取code
wx.login({
	success:function(result){
		console.log(result)
		wx.request({
			url:'/login',
			data:{
				code:result.code
			},
			success:function(myres){
				if(myres.state==='登录成功'){
					wx.setStorageSync('isLogin',true)
					wx.navigateBack()
				}else{
                    wx.showToast({
                        title:''
                    })
				}
			}
		})
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三十五、微信小程序支付流程

1.小程序调用登录接口获取code，传递给商户服务器用来获取用户的openId
  小程序调用wx.login()获取临时凭证code,并回转到开发者服务器，开发者服务器以code换取用户唯一表示openid和会话密钥session_key
getToken:function(){
	wx.login({
	success:function(res){
            var code=res.code
            wx.request({
                url:商户服务器接口地址，
                data:{
                    code:code
                },
                method:'POST',
                success:function(res){
                	wx.setStorageSync('token',res.data)
                },
                fail:function(res){
                conso.sole.log(res.data)
                }
            })
        }
	})
}
2.token的生成以及缓存
3.调用统一下单接口，获取prepay_id再次签名
4.小程序获取五个参数后，鉴权调起支付
1).下载微信JS-SDK：2).调用统一下单api3).再次签名
5.支付回调,实际上我们需要重写WxPayNotify类的NotifyProcess方法，这里记得Loader::impor(）引入那个入口类。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三十六、小程序绑定事件

事件绑定的写法同组件的属性，以 key、value 的形式。
key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。value 是一个字符串，
需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
1
2
3
4