经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等
来源：jb51　　时间：2022/12/12 8:56:51　　对本文有异议

1）网络 API 列表：

  1. wx.request 发起网络请求
  2. wx.uploadFile 上传文件
  3. wx.downloadFile 下载文件
  4. wx.connectSocket 创建 WebSocket 连接
  5. wx.onSocketOpen 监听 WebSocket 打开
  6. wx.onSocketError 监听 WebSocket 错误
  7. wx.sendSocketMessage 发送 WebSocket 消息
  8. wx.onSocketMessage 接受 WebSocket 消息
  9. wx.closeSocket 关闭 WebSocket 连接
  10. wx.onSocketClose 监听 WebSocket 关闭

2）媒体 API 列表：

  1. wx.chooseImage 从相册选择图片，或者拍照
  2. wx.previewImage 预览图片
  3. wx.startRecord 开始录音
  4. wx.stopRecord 结束录音
  5. wx.playVoice 播放语音
  6. wx.pauseVoice 暂停播放语音
  7. wx.stopVoice 结束播放语音
  8. wx.getBackgroundAudioPlayerState 获取音乐播放状态
  9. wx.playBackgroundAudio 播放音乐
  10. wx.pauseBackgroundAudio 暂停播放音乐
  11. wx.seekBackgroundAudio 控制音乐播放进度
  12. wx.stopBackgroundAudio 停止播放音乐
  13. wx.onBackgroundAudioPlay 监听音乐开始播放
  14. wx.onBackgroundAudioPause 监听音乐暂停
  15. wx.onBackgroundAudioStop 监听音乐结束
  16. wx.chooseVideo 从相册选择视频，或者拍摄

3）文件 API 列表：

  1. wx.saveFile 保存文件
  2. wx.getSavedFileList 获取已保存的文件列表
  3. wx.getSavedFileInfo 获取已保存的文件信息
  4. wx.removeSavedFile 删除已保存的文件信息
  5. wx.openDocument 打开文件

4）数据 API 列表：

  1. wx.getStorage 获取本地数据缓存
  2. wx.getStorageSync 获取本地数据缓存
  3. wx.setStorage 设置本地数据缓存
  4. wx.setStorageSync 设置本地数据缓存
  5. wx.getStorageInfo 获取本地缓存的相关信息
  6. wx.getStorageInfoSync 获取本地缓存的相关信息
  7. wx.removeStorage 删除本地缓存内容
  8. wx.removeStorageSync 删除本地缓存内容
  9. wx.clearStorage 清理本地数据缓存
  10. wx.clearStorageSync 清理本地数据缓存

5）位置 API 列表：

  1. wx.getLocation 获取当前位置
  2. wx.chooseLocation 打开地图选择位置
  3. wx.openLocation 打开内置地图
  4. wx.createMapContext 地图组件控制

6）设备 API 列表：

  1. wx.getNetworkType 获取网络类型
  2. wx.onNetworkStatusChange 监听网络状态变化
  3. wx.getSystemInfo 获取系统信息
  4. wx.getSystemInfoSync 获取系统信息
  5. wx.onAccelerometerChange 监听加速度数据
  6. wx.startAccelerometer 开始监听加速度数据
  7. wx.stopAccelerometer 停止监听加速度数据
  8. wx.onCompassChange 监听罗盘数据
  9. wx.startCompass 开始监听罗盘数据
  10. wx.stopCompass 停止监听罗盘数据
  11. wx.setClipboardData 设置剪贴板内容
  12. wx.getClipboardData 获取剪贴板内容
  13. wx.makePhoneCall 拨打电话
  14. wx.scanCode 扫码

7）界面 API 列表：

  1. wx.showToast 显示提示框
  2. wx.showLoading 显示加载提示框
  3. wx.hideToast 隐藏提示框
  4. wx.hideLoading 隐藏提示框
  5. wx.showModal 显示模态弹窗
  6. wx.showActionSheet 显示菜单列表
  7. wx.setNavigationBarTitle 设置当前页面标题
  8. wx.showNavigationBarLoading 显示导航条加载动画
  9. wx.hideNavigationBarLoading 隐藏导航条加载动画
  10. wx.navigateTo 新窗口打开页面
  11. wx.redirectTo 原窗口打开页面
  12. wx.switchTab 切换到 tabbar 页面
  13. wx.navigateBack 退回上一个页面
  14. wx.createAnimation 动画
  15. wx.createContext 创建绘图上下文
  16. wx.drawCanvas 绘图
  17. wx.stopPullDownRefresh 停止下拉刷新动画

8）WXML节点信息 API 列表：

  1. wx.createSelectorQuery 创建查询请求
  2. selectorQuery.select 根据选择器选择单个节点
  3. selectorQuery.selectAll 根据选择器选择全部节点
  4. selectorQuery.selectViewport 选择显示区域
  5. nodesRef.boundingClientRect 获取布局位置和尺寸
  6. nodesRef.scrollOffset 获取滚动位置
  7. nodesRef.fields 获取任意字段
  8. selectorQuery.exec 执行查询请求

9）开放接口：

  1. wx.login 登录
  2. wx.getUserInfo 获取用户信息
  3. wx.chooseAddress 获取用户收货地址
  4. wx.requestPayment 发起微信支付
  5. wx.addCard 添加卡券
  6. wx.openCard 打开卡券

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. app.js:
  2.     success:function(info){
  3.         that.apirtnCallback(info)
  4.     }
  5. index.js:
  6.     onLoad:function(){
  7.         app.apirtnCallback=res=>{
  8.             console.log(res)
  9.         }
  10.     }

小程序支持大部分 ES6 语法
在返回成功的回调里面处理逻辑

Promise 异步

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

十九、wx:if与hidden的区别

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

二十、rpx

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

二十一、生命周期函数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. let options=wx.getLanchOptionsSync()

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

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

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

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

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

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

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

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

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

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

本文主要讲解了微信小程序,网络API,媒体API,文件API,微信小程序支付流程,位置API,界面API,微信小程序登录流程等，更多关于微信小程序相关知识请查看下面的相关链接

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号