首先亮出微信小程序文档地址: 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
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,以操作组件内
-------------------------------------------------------------------------------------
以上内容仅供参考
程序员交流群:782974737
点击链接加入群聊【超级无敌IT精英交流群】
欢迎加入