微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

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

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

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

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

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

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

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

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

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

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

优势:
1.无需下载,通过搜索或者扫一扫就可以打开;2.良好的用户体验,打开速度快
3.开发成本比app低;4.安卓上可以添加到桌面,与原生app差不多;5.为用户提供良好的安全保障

劣势:
1.限制较多,页面大小不能超过1M,不能打开超过五个层级的页面;
2.样式单一;3.推广面窄,不能分享到朋友圈,只能分享给朋友;
4.依托于微信,无法开发后台管理功能

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

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

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

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

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

Promise 异步

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

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

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

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

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

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

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

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

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

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

十六、小程序和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、微信小程序有代码大小限制,微信小程序最大为2M
2、提高代码的复用率

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

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

十九、wx:if与hidden的区别

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

二十、rpx

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

二十一、生命周期函数

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

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

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

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

background-image:可以使用网络图片,或者 base64,或者使用<image/>标签

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

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

二十五、简述下 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():关闭所有页面,打开到应用内的某个页面

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

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

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

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

二十八、微信小程序常见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.图片本地资源名称,尽量使用小写命名

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

let options=wx.getLanchOptionsSync()

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

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

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

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

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

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

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

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.小程序调用登录接口获取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类的Not

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

(0)

相关推荐

  • 微信小程序获取用户头像昵称组件封装实例(最新版)

    目录 一.前言 二.组件使用 下载组件 组件导入 引用组件 使用组件 三.浅谈业务逻辑设置 注意事项 兼容性 四.结语 一.前言 微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接 我的项目比较多,而且大部分都是只需要获取用户的头像以及昵称,并不需要像官方的“最佳实践案例”那样,还需要用户设置其他信息.因此自己进行了一个组件封装,以弹窗形式让用户授权或设置头像以及昵称. 博客中也会浅谈一下该如何对新旧接口进行业务逻

  • 使用微信小程序API,调用微信的各种内置能力。

    目录 一.WXML 渲染语法 二.客户端数据储存 三.远程数据请求 四.<open-data>组件 五.获取用户个人信息 六.多页面的跳转 七.wx.navigateTo() 微信小程序如何使用小程序API,去调用微信提供的各种内置能力(即微信API).小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等. 一.WXML 渲染语法 前面说过,小程序的页面结构使用 WXML 语言进行描述. WXML 的全称是微信页面标签语言(Weixin M

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

  • 微信小程序父子组件通信详细介绍

    组件间的基本通信方式有以下几种: WXML 数据绑定:用于父组件向子组件的指定属性设置数据. 事件:用于子组件向父组件传递数据,可以传递任意数据. 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent() 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法. 父组件通过 properties 属性给子组件传递数据: // 父组件 home.wxml <search-input placeholderText="搜明星.达人">

  • 微信小程序获取当前位置的详细步骤

    目录 1 腾讯位置开发基本步骤 1.1 申请开发者密钥(key) 1.2 下载微信小程序JavaScriptSDK 1.3 安全域名设置 1.4 微信小程序设置隐私权限 2 获取位置信息 3 权限问题 总结 微信小程序获取位置信息的方式有两种,一种是调用微信官方的接口来获取,如getLocation,这种方式只能获取经纬度微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

  • 微信小程序如何设置基本的页面样式,做出用户界面UI

    目录 一.总体样式 二.Flex 布局 三.WeUI 四.加入图片 五.图片轮播 一.总体样式 微信小程序允许在顶层放置一个app.wxss文件,里面采用 CSS 语法设置页面样式.这个文件的设置,对所有页面都有效. 注意,小程序虽然使用 CSS 样式,但是样式文件的后缀名一律要写成.wxss. 打开上一篇教程的示例,在项目顶层新建一个app.wxss文件,内容如下. page { background-color: pink; } text { font-size: 24pt; color:

  • 制作微信小程序的小白简单入门教程

    目录 一.小程序是什么? 二.小程序的优势 三.知识准备 四.开发准备 五. hello world 示例 六.WXML 标签语言 七.小程序的项目结构 八.项目配置文件 app.json 小程序已经成为国内前端的一个重要业务,跟 Web 和手机 App 有着同等的重要性.小程序开发者供不应求,市场招聘需求极其旺盛,企业都抢着要. 尽管如此,小程序的教程却很缺,要么是不够系统,要么就是跳跃性太大,很多关键的地方寥寥数语,初学者摸不着头脑.我自己学的时候,就苦于找不到好一点的教程. 本文就是我的小

  • 微信小程序tabBar自定义弹窗遮挡不住解决技巧

    目录 背景 方法一:自定义tabbar 方法二:套用原生提供的tabbar自定义功能,嵌套自己的tabbar组件 总结 成果 背景 最近开发微信小程序发现一个问题,就是微信小程序官方自带的tabbar层级很高,自定义modal盖不住tabbar的问题:翻阅官方的社区,很多同学说 设置z-index:99999:可以解决这个问题,我实践下来是有问题的:ios是解决不了问题:经过反复实践有两种方法可以解决问题: 方法一:自定义tabbar 这个方法就是完全放弃微信官方的tabbar:自己用SPA的方

  • 微信小程序怎么加入JavaScript脚本,做出动态效果

    目录 一.数据绑定 二.全局数据 三.事件 四.动态提示 Toast 五.对话框 Modal 这篇文章主要介绍了教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动.学会了脚本,就能做出复杂的页面了. 一.数据绑定 前面的所有示例,小程序的页面都是写死的,也就是页面内容不会变.但是,页面数据其实可以通过脚本传入,通过脚本改变页面,实现动态效果. 小程序提供了一种特别的方法,让页面可以更方便地使用脚本数据,叫做"数据绑定"(data binding). 所谓&

  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    微信小程序 getApp() 方法 小程序提供了全局的 getApp() 方法,可获取当前小程序实例,一般用于在子页面中获取顶层应用. // app.js App({ globalData: 1 }); // page.js var app = getApp(); console.log(app.globalData); // 获取 globalData 一 整体结构 图片目录(images).页面目录(pages).公共脚本(utils).全局配置(app.json.project.confi

随机推荐