赞
踩
首先亮出微信小程序文档地址: https://developers.weixin.qq.com/miniprogram/dev/
一、指南
1、起步
小程序简介:
小程序技术发展史 -- 将h5的js-sdk如何变成小程序的
小程序与普通网页开发的区别
体验小程序
开始:
申请帐号 -- 拿到appid并设置服务器域名
安装开发工具
第一个小程序
编译预览
小程序代码构成:
JSON 配置文件
WXML 模板文件
WXSS 样式文件
脚本逻辑文件
小程序宿主环境:
...
小程序协同工作和发布:
...
小程序开发指南 -- 外链
2、配置小程序
全局配置 -- 整个APP的配置
页面配置 -- 某个page的配置
sitemap 配置 -- 小程序SEO的配置
3、小程序框架
场景值 -- 表示用户是从哪个地方打开小程序的
逻辑层 App Service -- 小程序注册、路由跳转等等
视图层 View -- WXML、WXSS、组件、动画等等
4、小程序运行时
小程序的运行环境
JavaScript 支持情况
小程序运行机制
小程序更新机制
5、自定义组件
组件模板和样式
Component构造器
组件间通信与事件
组件生命周期
behaviors
组件间关系
数据监听器
抽象节点
自定义组件扩展
开发第三方自定义组件
单元测试
6、插件 -- 给别人用时,别人看不到咱的源代码
开发插件
使用插件
插件调用 API 的限制
插件使用组件的限制
插件功能页
7、基础能力
网络 -- 小程序只可以跟指定的域名与进行网络通信(必须https、不能IP、可以二级域名、可以加端口号、必须ICP备案)
存储 -- 本地缓存(上限10MB、账号隔离)
文件系统
画布 -- canvas
分包加载
多线程 Worker
服务端能力 -- 后端 API、access_token
自定义 tabBar
8、硬件能力
蓝牙
NFC
Wi-Fi
9、开放能力
用户登录:
小程序登录 -- 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。
UnionID -- 有同一用户、不同应用、unionID相同
授权 -- 用户权限授权
开放数据校验与解密
获取手机号 -- 【针对非个人开发者,且完成了认证的小程序开放】
生物认证 小程序通过 SOTER 提供以下生物认证方式。
转发
打开APP
消息
卡券
获取小程序码 --
数据分析
附近的小程序
物流助手 -- 帮助开发者快速对接物流
广告
调试
10、性能
优化建议
分析工具
11、基础库
基础库版本分布
兼容
二、全局配置
1、小程序配置
全局配置 -- app.json 文件用来对微信小程序进行全局配置
页面配置 -- 每个页面的.json 文件来对本页面的窗口表现进行配置
sitemap 配置 -- sitemap.json 文件用于配置小程序及其页面是否被微信爬虫爬取
场景值 -- 场景值列表,表示用户从哪个地方打开的小程序
2、框架接口
小程序:
App(Object object) 注册小程序。必须调用且只能调用一次。不然会出现无法预期的后果。
AppObject getApp(Object object) 获取到小程序全局唯一的 App 实例。
页面:
Page(Object object) 注册小程序中的一个页面。
getCurrentPages() 获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。
自定义组件:
Component(Object object) 创建自定义组件。
Behavior(Object object) 注册一个 behavior
模块化:
require(string path) 引入模块。返回模块通过 module.exports 或 exports 暴露的接口。
基础功能:
wx: 小程序 API 全局对象,用于承载小程序能力相关 API
console 向调试面板中打印日志。
setTimeout 定时器
3、WXML语法参考
数据绑定
列表渲染
条件渲染
模板
引用
4、WXS 语法参考
模块
变量
注释
运算符
语句
数据类型
基础类库
三、组件
1、视图容器
view 视图容器
swiper 滑块视图容器
swiper-item 滑块视图容器的子组件
scroll-view 可滚动视图区域。
movable-view 可移动的视图容器,在页面中可以拖拽滑动
movable-area <movable-view>的可移动区域
cover-view 覆盖在原生组件之上的文本视图。
cover-image 覆盖在原生组件之上的图片视图
2、基础内容
text 文本。
rich-text 富文本。
progress 进度条组件
icon 图标。
3、表单组件
form 表单
input 输入框
label 文字提示
radio 单选框
radio-group 单选框的容器
checkbox 多选框。
checkbox-group 多选框的容器
switch 开关
slider 滑动选择器
textarea 多行文本域【原生组件】
picker 从底部弹起的滚动选择器。
picker-view 嵌入页面的滚动选择器
picker-view-column 滚动选择器子项
button 按钮。
button的open-type 微信开放能力
contact 打开客服会话
share 打开小程序转发
getPhoneNumber 获取用户手机号
getUserInfo 获取用户信息
launchApp 打开APP
openSetting 打开授权设置页
feedback 打开“意见反馈”页面
4、导航
navigator 页面链接
functional-page-navigator 仅在插件中有效,用于跳转到插件功能页。
5、媒体组件
image 图片
audio 音频
video 视频
camera 系统相机
live-player 实时音视频播放【部分主体开放】
live-pusher 实时音视频录制【部分主体开放】
6、地图
map 地图
7、画布
canvas 画布
8、开放能力
ad Banner 广告。图片广告
official-account 关注公众号组件【有场景限制】
open-data 用于展示微信开放的数据。
web-view 承载网页的容器【个人类型与海外类型的小程序暂不支持使用】
9、原生组件
10、无障碍访问
四、API
1、基础
wx.canIUse(string schema) 判断小程序的API,回调,参数,组件等是否在当前版本可用。
系统:
wx.getSystemInfoSync() 获取设备信息信息
更新:
wx.getUpdateManager() 获取全局唯一的版本更新管理器,用于管理小程序更新
wx.getUpdateManager 管理小程序更新等操作
小程序:
wx.getLaunchOptionsSync() 获取小程序启动时的参数
wx.onPageNotFound(fn) 监听小程序要打开的页面不存在事件
wx.onError(fc) 监听小程序错误事件
wx.onAudioInterruptionEnd(fn) 监听音频中断结束事件
wx.onAudioInterruptionBegin(fn) 监听音频因为受到系统占用而被中断开始事件
wx.onAppShow(fn) 监听小程序切前台事件
wx.onAppHide(fn) 监听小程序切后台事件
... 各种取消监听
调试:
wx.setEnableDebug(object) 设置是否打开调试开关。此开关对正式版也能生效。
wx.getLogManager(object) 获取日志管理对象
console 控制台打印
定时器:
setTimeout(fn) 延时函数
setInterval(fn) 定时函数
2、路由
wx.switchTab(Object object) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch(Object object) 关闭所有页面,打开到应用内的某个页面
wx.redirectTo(Object object) 加载某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo(Object object) 打开某个页面。但是不能跳到 tabbar 页面。
wx.navigateBack(Object object) 关闭当前页面,返回上一页面或多级页面。
3、界面
交互:
wx.showToast(Object object) 显示消息提示框
wx.showModal(Object object) 显示模态对话框
wx.showLoading(Object object) 显示 loading 提示框
wx.showActionSheet(Object object) 显示操作菜单
wx.hideToast(Object object) 隐藏消息提示框
wx.hideLoading(Object object) 隐藏 loading 提示框
导航栏:
wx.showNavigationBarLoading(Object object) 导航栏显示转圈圈动画
wx.hideNavigationBarLoading(Object object) 导航栏隐藏转圈圈动画
wx.setNavigationBarTitle(Object object) 动态设置当前页面的标题
wx.setNavigationBarColor(Object object) 设置页面导航条颜色
背景:
wx.setBackgroundTextStyle(Object object) 动态设置下拉背景字体、loading 图的样式
wx.setBackgroundColor(Object object) 动态设置窗口的背景色
TabBar:
wx.showTabBar(Object object) 显示 tabBar
wx.hideTabBar(Object object) 隐藏 tabBar
wx.showTabBarRedDot(Object object) 显示 tabBar 某一项的右上角的红点
wx.hideTabBarRedDot(Object object) 隐藏 tabBar 某一项的右上角的红点
wx.setTabBarBadge(Object object) 为 tabBar 某一项的右上角添加文本
wx.removeTabBarBadge(Object object) 移除 tabBar 某一项右上角的文本
wx.setTabBarStyle(Object object) 动态设置 tabBar 的整体样式
wx.setTabBarItem(Object object) 动态设置 tabBar 某一项的内容
字体:
wx.loadFontFace(Object object) 动态加载网络字体。
下拉刷新:
wx.startPullDownRefresh(Object object) 开始下拉刷新。
wx.stopPullDownRefresh(Object object) 停止当前页面下拉刷新。
滚动:
wx.pageScrollTo(Object object) 将页面滚动到目标位置
动画:
wx.createAnimation(Object object) 创建一个动画实例 animation
Animation 动画对象
... 一堆动画操作方法
置顶:
wx.setTopBarText(Object object) 动态设置置顶栏文字内容。
自定义动画:
wx.nextTick(function callback) 延迟一部分操作到下一个时间片再执行。
wx.getMenuButtonBoundingClientRect() 获取菜单按钮(右上角胶囊按钮)的布局位置信息
窗口:
wx.onWindowResize(function callback) 监听窗口尺寸变化事件
wx.offWindowResize(function callback) 取消监听窗口尺寸变化事件
4、网络
发起请求:
wx.request(Object object) 发起 HTTPS 网络请求,返回:RequestTask
RequestTask 网络请求任务对象,包含一大堆中断、监听等方法
下载:
wx.downloadFile(Object object) 下载文件资源到本地。返回:DownloadTask
DownloadTask 一个可以监听下载进度变化事件,以及取消下载任务的对象
上传:
wx.uploadFile(Object object) 将本地资源上传到服务器。返回:UploadTask
UploadTask 一个可以监听上传进度变化事件,以及取消上传任务的对象
WebSocket:
wx.connectSocket(Object object) 创建一个 WebSocket 连接。返回:SocketTask
wx.onSocketOpen(function callback) 监听 WebSocket 连接打开事件
wx.onSocketMessage(function callback) 监听 WebSocket 接受到服务器的消息事件
wx.onSocketError(function callback) 监听 WebSocket 错误事件
wx.sendSocketMessage(Object object) 通过 WebSocket 连接发送数据。
wx.onSocketClose(function callback) 监听 WebSocket 连接关闭事件
wx.closeSocket(Object object) 关闭 WebSocket 连接
SocketTask WebSocket对象,进行发送数据等
mDNS:
wx.startLocalServiceDiscovery(Object object) 开始搜索局域网下的 mDNS 服务。搜索的结果会通过 wx.onLocalService* 事件返回。
wx.stopLocalServiceDiscovery(Object object) 停止搜索 mDNS 服务
wx.onLocalServiceFound(function callback) 监听 mDNS 服务发现的事件
wx.onLocalServiceLost(function callback) 监听 mDNS 服务离开的事件
wx.onLocalServiceDiscoveryStop(function callback) 监听 mDNS 服务停止搜索的事件
wx.onLocalServiceResolveFail(function callback) 监听 mDNS 服务解析失败的事件
wx.offLocalServiceFound(function callback) 取消监听 mDNS 服务发现的事件
wx.offLocalServiceLost(function callback) 取消监听 mDNS 服务离开的事件
wx.offLocalServiceDiscoveryStop(function callback) 取消监听 mDNS 服务停止搜索的事件
wx.offLocalServiceResolveFail(function callback) 取消监听 mDNS 服务解析失败的事件
5、数据缓存
wx.setStorageSync(string key, any data) 添加缓存
wx.removeStorageSync(string key) 移除缓存
wx.getStorageSync(string key) 查询缓存
wx.getStorageInfoSync() 获得所有key的数组
wx.clearStorageSync() 清除所有key
6、媒体
地图:
wx.createMapContext(string mapId, Object this) 创建 map 上下文 MapContext 对象。返回MapContext
MapContext MapContext 实例
图片:
wx.saveImageToPhotosAlbum(Object object) 保存图片到系统相册。
wx.previewImage(Object object) 在新页面中全屏预览图片。
wx.getImageInfo(Object object) 获取图片信息。网络图片需先配置download域名才能生效。
wx.compressImage(Object object) 压缩图片接口,可选压缩质量
wx.chooseMessageFile(Object object) 从客户端会话选择文件。
wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照。
视频:
wx.saveVideoToPhotosAlbum(Object object) 保存视频到系统相册。支持mp4视频格式。
wx.createVideoContext(string id, Object this) 创建 video 上下文 VideoContext 对象。返回:VideoContext
wx.chooseVideo(Object object) 拍摄视频或从手机相册中选视频。
VideoContext VideoContext 实例
... 一堆方法
音频:
wx.createInnerAudioContext() 创建内部 audio 上下文,返回: InnerAudioContext 对象。
wx.createAudioContext(string id, Object this) 创建 audio 上下文,返回: AudioContext 对象。
wx.playVoice(Object object) 开始播放语音。
wx.pauseVoice(Object object) 暂停正在播放的语音。
wx.stopVoice(Object object) 结束播放语音。
wx.getAvailableAudioSources(Object object) 获取当前支持的音频输入源
wx.setInnerAudioOption(Object object) 设置 InnerAudioContext 的播放选项。设置之后对当前小程序全局生效。
InnerAudioContext 对象。
AudioContext 对象
... 两堆方法
背景音频:
wx.stopBackgroundAudio(Object object) 停止播放音乐。
wx.seekBackgroundAudio(Object object) 控制音乐播放进度。
wx.playBackgroundAudio(Object object) 使用后台播放器播放音乐。
wx.pauseBackgroundAudio(Object object) 暂停播放音乐。
wx.onBackgroundAudioStop(function callback) 监听音乐停止事件。
wx.onBackgroundAudioPlay(function callback) 监听音乐播放事件。
wx.onBackgroundAudioPause(function callback) 监听音乐暂停事件。
wx.getBackgroundAudioPlayerState(Object object) 获取后台音乐播放状态。
wx.getBackgroundAudioManager() 获取全局唯一的背景音频管理器。返回:BackgroundAudioManager
BackgroundAudioManage 对象
... 一堆方法
实时音视频
wx.createLivePusherContext() 创建 live-pusher 上下文 LivePusherContext 对象。
wx.createLivePlayerContext(string id, Object this) 创建 live-player 上下文 LivePlayerContext 对象。
LivePusherContext
LivePlayerContext
... 两堆方法
录音:
wx.stopRecord() 停止录音。
wx.startRecord(Object object) 开始录音。
wx.getRecorderManager() 获取全局唯一的录音管理器 RecorderManager
RecorderManager 全局唯一的录音管理器
... 一堆方法
相机:
wx.createCameraContext() 创建 camera 上下文 CameraContext 对象。
CameraContext
... 一堆方法
7、位置
wx.openLocation(Object object) 使用微信内置地图查看位置
wx.getLocation(Object object) 获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。
wx.chooseLocation(Object object) 打开地图选择位置。
8、转发
wx.updateShareMenu(Object object) 更新转发属性
wx.showShareMenu(Object object) 显示当前页面的转发按钮
wx.hideShareMenu(Object object) 隐藏转发按钮
wx.getShareInfo(Object object) 获取转发详细信息
9、画布:
wx.createCanvasContext(string canvasId, Object this) 创建 canvas 的绘图上下文 CanvasContext 对象
wx.canvasToTempFilePath(Object object, Object this) 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
wx.canvasPutImageData(Object object, Object this) 将像素数据绘制到画布。在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内 <canvas> 组件
wx.canvasGetImageData(Object object, Object this) 获取 canvas 区域隐含的像素数据。
CanvasContext canvas 组件的绘图上下文
... 一大堆方法
10、文件
wx.saveFile(Object object) 保存文件到本地。
wx.removeSavedFile(Object object) 删除本地缓存文件
wx.openDocument(Object object) 新开页面打开文档
wx.getSavedFileList(Object object) 获取该小程序下已保存的本地缓存文件列表
wx.getSavedFileInfo(Object object) 获取本地文件的文件信息。
wx.getFileSystemManager() 获取全局唯一的文件管理器
wx.getFileInfo(Object object) 获取文件信息
FileSystemManager 文件管理器
... 一堆方法
11、开放接口
登录:
wx.login(Object object) 登录,拿到js_code
wx.checkSession(Object object) 检查登录态是否过期。
小程序跳转:
wx.navigateToMiniProgram(Object object) 打开另一个小程序
wx.navigateBackMiniProgram(Object object) 返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功
账号信息:
wx.getAccountInfoSync() 获取当前帐号信息
用户信息:
wx.getUserInfo(Object object) 获取用户信息。
UserInfo对象
数据上报:
wx.reportMonitor(string name, number value) 自定义业务数据监控上报接口。
数据分析:
wx.reportAnalytics(string eventName, Object data) 自定义分析数据上报接口。
支付:
wx.requestPayment(Object object) 发起微信支付。
授权:
wx.authorize(Object object) 提前向用户发起授权请求。
设置:
wx.openSetting(Object object) 调起客户端小程序设置界面,返回用户设置的操作结果。
wx.getSetting(Object object) 获取用户的当前设置。
AuthSetting 用户授权设置信息
收货地址:
wx.chooseAddress(Object object) 获取用户收货地址。
卡券:
wx.openCard(Object object) 查看微信卡包中的卡券。
wx.addCard(Object object) 批量添加卡券。【需要认证】
发票:
wx.chooseInvoiceTitle(Object object) 选择用户的发票抬头。当前小程序必须关联一个公众号,且这个公众号是完成了微信认证的
wx.chooseInvoice(Object object) 选择用户已有的发票。
生物认证:
wx.startSoterAuthentication(Object object) 开始 SOTER 生物认证。验证流程请参考说明。
wx.checkIsSupportSoterAuthentication(Object object) 获取本机支持的 SOTER 生物认证方式
wx.checkIsSoterEnrolledInDevice(Object object) 获取设备内是否录入如指纹等生物信息的接口
微信运动:
wx.getWeRunData(Object object) 获取用户过去三十天微信运动步数。需要先调用 wx.login 接口。步数信息会在用户主动进入小程序时更新。
12、设备:
iBeacon
wx.startBeaconDiscovery(Object object) 开始搜索附近的 iBeacon 设备
wx.stopBeaconDiscovery(Object object) 停止搜索附近的 iBeacon 设备
wx.onBeaconUpdate(function callback) 监听 iBeacon 设备更新事件
wx.onBeaconServiceChange(function callback) 监听 iBeacon 服务状态变化事件
wx.getBeacons(Object object) 获取所有已搜索到的 iBeacon 设备
IBeaconInfo 对象
... 一堆方法
Wi-Fi
wx.startWifi(Object object) 初始化 Wi-Fi 模块。
wx.stopWifi(Object object) 关闭 Wi-Fi 模块。
wx.onWifiConnected(function callback) 监听连接上 Wi-Fi 的事件
wx.onGetWifiList(function callback) 监听获取到 Wi-Fi 列表数据事件
wx.getWifiList(Object object) 请求获取 Wi-Fi 列表。
wx.connectWifi(Object object) 连接 Wi-Fi。
wx.getConnectedWifi(Object object) 获取已连接中的 Wi-Fi 信息。
wx.setWifiList(Object object) 设置 wifiList 中 AP 的相关信息。在 onGetWifiList 回调后调用,iOS特有接口。
WifiInfo对象
低功耗蓝牙:
... 一堆接口
联系人:
wx.addPhoneContact(Object object) 添加手机通讯录联系人。
蓝牙:
... 一堆接口
电量:
wx.getBatteryInfoSync() 获取设备电量。
剪贴板:
wx.setClipboardData(Object object) 设置系统剪贴板的内容
wx.getClipboardData(Object object) 获取系统剪贴板的内容
NFC:
wx.stopHCE(Object object) 关闭 NFC 模块。
wx.startHCE(Object object) 初始化 NFC 模块。
wx.sendHCEMessage(Object object) 发送 NFC 消息。仅在安卓系统下有效。
wx.onHCEMessage(function callback) 监听接收 NFC 设备消息事件
wx.getHCEState(Object object) 判断当前设备是否支持 HCE 能力。
网络:
wx.onNetworkStatusChange(function callback) 监听网络状态变化事件
wx.getNetworkType(Object object) 获取网络类型
屏幕:
wx.setScreenBrightness(Object object) 设置屏幕亮度
wx.setKeepScreenOn(Object object) 设置是否保持常亮状态。
wx.onUserCaptureScreen(function callback) 监听用户主动截屏事件。
wx.getScreenBrightness(Object object) 获取屏幕亮度
电话:
wx.makePhoneCall(Object object) 拨打电话
加速计:
wx.stopAccelerometer(Object object) 停止监听加速度数据。
wx.startAccelerometer(Object object) 开始监听加速度数据。
wx.onAccelerometerChange(function callback) 监听加速度数据事件。
罗盘:
wx.stopCompass(Object object) 停止监听罗盘数据
wx.startCompass(Object object) 开始监听罗盘数据
wx.onCompassChange(function callback) 监听罗盘数据变化事件。频率:5 次/秒,接口调用后会自动开始监听,可使用 wx.stopCompass 停止监听。
设备方向:
wx.stopDeviceMotionListening(Object object) 停止监听设备方向的变化。
wx.startDeviceMotionListening(Object object) 开始监听设备方向的变化。
wx.onDeviceMotionChange(function callback) 监听设备方向变化事件。
陀螺仪:
wx.startGyroscope(Object object) 开始监听陀螺仪数据
wx.stopGyroscope(Object object) 停止监听陀螺仪数据。
wx.onGyroscopeChange(function callback) 监听陀螺仪数据变化事件。
性能:
wx.onMemoryWarning(function callback) 监听内存不足告警事件。
扫码:
wx.scanCode(Object object) 调起客户端扫码界面进行扫码
震动:
wx.vibrateShort(Object object) 使手机发生较短时间的振动(15 ms)
wx.vibrateLong(Object object) 使手机发生较长时间的振动(400 ms)
13、Worker
wx.createWorker(string scriptPath) 创建一个 Worker 线程
Worker 对象。
... 一堆方法
14、第三方平台
wx.getExtConfigSync() 获取第三方平台自定义的数据字段。
15、WXML
wx.createSelectorQuery() 返回一个 SelectorQuery 对象实例
wx.createIntersectionObserver(Object this, Object options) 创建并返回一个 IntersectionObserver 对象实例。
IntersectionObserver 对象, 用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
NodesRef 对象 用于获取 WXML 节点信息的对象
SelectorQuery 查询节点信息的对象
16、广告
wx.createRewardedVideoAd(Object object) 创建激励视频广告组件。返回:RewardedVideoAd组件
-------------------------------------------------------------------------------------
以上内容仅供参考
程序员交流群:782974737
欢迎加入
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。