开发

简易教程

简易教程

• 获取微信小程序的 AppID
• 创建项目
• 编写代码
  • 创建小程序实例
  • 创建页面
• 手机预览

体验小程序

更新日志

框架

文件结构

配置

• app.json 配置项列表
  • pages
  • window
  • tabBar
  • networkTimeout
  • debug
• page.json

逻辑层(App Service)

注册程序 App

• App()
• getApp()

注册页面 Page

• Page()
• 初始化数据
• 生命周期函数
• 页面相关事件处理函数
• 事件处理函数
• Page.prototype.setData()
• setData() 参数格式
• getCurrentPages()
• 页面栈
• 生命周期
• 页面的路由

模块化

• 文件作用域
• 模块化
• ES6 语法以及 API 支持

视图层

WXML

• 数据绑定
  • 简单绑定
  • 运算
  • 组合
• 条件渲染
  • wx:if
  • block wx:if
  • wx:if vs hidden
• 列表渲染
  • wx:for
  • block wx:for
  • wx:key
• 模板
  • 定义模板
  • 使用模板
  • 模板的作用域
• 事件
  • 什么是事件
  • 事件的使用方式
  • 事件详解
• 引用
  • import
  • include

WXSS

• 尺寸单位
• 样式导入
• 内联样式
• 选择器
• 全局样式与局部样式

组件

视图容器

• view
• scroll-view
• swiper

基础内容

• icon
• text
• progress

表单组件

• button
• checkbox
• form
• input
• label
• picker
• radio
• slider
• switch
• textarea

导航

• navigator

媒体组件

• audio
• image
• video

地图

• map

画布

• canvas

客服会话

• contact-button

API

网络

发起请求

• wx.request wx.request 发起的是 HTTPS 请求

上传、下载

• wx.uploadFile 将本地资源上传到开发者服务器
• wx.downloadFile 下载文件资源到本地

WebSocket

• wx.connectSocket 创建一个 WebSocket 连接
• wx.onSocketOpen 监听WebSocket连接打开事件
• wx.onSocketError 监听WebSocket错误
• wx.sendSocketMessage 通过 WebSocket 连接发送数据
• wx.onSocketMessage 监听WebSocket接受到服务器的消息事件
• wx.closeSocket 关闭WebSocket连接
• wx.onSocketClose 监听WebSocket关闭

媒体

图片

• wx.chooseImage 从本地相册选择图片或使用相机拍照
• wx.previewImage 预览图片
• wx.getImageInfo 获取图片信息

录音

• 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.createAudioContext 创建并返回 audio 上下文 audioContext 对象

视频

• wx.chooseVideo 拍摄视频或从手机相册中选视频，返回视频的临时文件路径

视频组件控制

• wx.createVideoContext 创建并返回 video 上下文 videoContext 对象

文件

• wx.saveFile 保存文件到本地
• wx.getSavedFileList 获取本地已保存的文件列表
• wx.getSavedFileInfo 获取本地文件的文件信息
• wx.removeSavedFile 删除本地存储的文件
• wx.openDocument 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx

数据缓存

• wx.setStorage 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口
• wx.setStorageSync 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口
• wx.getStorage 从本地缓存中异步获取指定 key 对应的内容
• wx.getStorageSync 从本地缓存中同步获取指定 key 对应的内容
• wx.getStorageInfo 异步获取当前storage的相关信息
• wx.getStorageInfoSync 同步获取当前storage的相关信息
• wx.removeStorage 从本地缓存中异步移除指定 key
• wx.removeStorageSync 从本地缓存中同步移除指定 key
• wx.clearStorage 清理本地数据缓存
• wx.clearStorageSync 同步清理本地数据缓存

位置

获取位置

• wx.getLocation 获取当前的地理位置、速度
• wx.chooseLocation 打开地图选择位置

查看位置

• wx.openLocation 使用微信内置地图查看位置

地图组件控制

• wx.createMapContext 创建并返回 map 上下文 mapContext 对象

设备

系统信息

• wx.getSystemInfo 获取系统信息
• wx.getSystemInfoSync 获取系统信息同步接口

网络状态

• wx.getNetworkType 获取网络类型

重力感应

• wx.onAccelerometerChange 监听重力感应数据，频率：5次/秒

罗盘

• wx.onCompassChange 监听罗盘数据，频率：5次/秒

拨打电话

• wx.makePhoneCall 拨打电话

扫码

• wx.scanCode 调起客户端扫码界面，扫码成功后返回对应的结果

界面

交互反馈

• wx.showToast 显示消息提示框
• wx.hideToast 隐藏消息提示框
• wx.showModal ​显示模态弹窗
• wx.showActionSheet 显示操作菜单

设置导航条

• wx.setNavigationBarTitle 动态设置当前页面的标题
• wx.showNavigationBarLoading 在当前页面显示导航条加载动画
• wx.hideNavigationBarLoading 隐藏导航条加载动画

导航

• wx.navigateTo 保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面
• wx.redirectTo 关闭当前页面，跳转到应用内的某个页面
• wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

动画

• wx.createAnimation 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export 方法导出动画数据传递给组件的 animation 属性。
• animation
• 动画队列

绘图

• 简介 intro
• Canvas 坐标系
• 渐变
• API 接口索引
• wx.createCanvasContext 创建 canvas 绘图上下文（指定 canvasId）
• wx.canvasToTempFilePath 把当前画布的内容导出生成图片，并返回文件路径

下拉刷新

• Page.onPullDownRefresh 在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件
• wx.stopPullDownRefresh 停止当前页面下拉刷新

开放接口

登录

• wx.login 调用接口获取登录凭证（code）进而换取用户登录态信息
• code 换取 session_key
• 登录态维护
  • 登录时序图
  • wx.checkSession 检查登陆态是否过期
• 用户数据的签名验证和加解密
  • 数据签名校验
  • 加密数据解密算法

用户信息

• wx.getUserInfo 获取用户信息，需要先调用 wx.login 接口说明
• UnionID 机制说明

微信支付

• wx.requestPayment 发起微信支付

模板消息

• 使用说明
• 接口说明
  • 获取 access_token
  • 发送模板消息
  • 下发条件说明
  • 审核说明
  • 违规说明
  • 处罚说明

客服消息

• 接收消息和事件
  • 文本消息
  • 图片消息
  • 进入会话事件
• 发送客服消息
• 临时素材接口
  • 获取临时素材
  • 新增临时素材
• 接入指引

分享

• Page.onShareAppMessage

工具

概览

程序调试

• 模拟器
• 调试工具
  • Wxml panel
  • Sources panel
  • Network panel
  • Appdata panel
  • Storage panel
  • Console panel
• 小程序操作区

代码编辑

• 文件支持
• 实时预览
• 自动保存
• 自动补全
• 常用快捷键
  • 格式调整
  • 光标相关
  • 界面相关

项目预览

• 显示当前项目细节
• 提交预览和提交上传
• 项目配置
  • ES6 转 ES5
  • 监听文件变化，自动刷新开发者工具
  • 压缩代码
  • 样式补全
  • 不校验请求域名及 TLS 版本

下载

细节点

历史更新日志

QA

Q&A

• 怎么获取用户输入
• 为什么脚本内不能使用window等对象
• 为什么 zepto/jquery 无法使用
• wx.navigateTo 无法打开页面
• 样式表不支持级联选择器
• 本地资源无法通过 css 获取
• 如何修改窗口的背景色
• 为什么上传不成功
• HTTPS 请求不成功
• 网络请求的 referer

联系我们