微信小程序开发实战

一、            环境安装和准备

n 微信小程序账号申请

n 微信Web开发者工具

n 小程序调试

二、            微信小程序MINA框架

n  目录结构

n  配置

n  逻辑层

Ø  注册程序

Ø  注册页面

Ø  模块化

Ø  API

n  视图层

Ø  WXML简要介绍

Ø  WXML数据绑定

Ø  WXML条件渲染

Ø  WXML列表渲染

Ø  WXML模板

Ø  WXML事件

Ø  WXML引用

n  WXSS

n  组件概念

n  FlexBox弹性盒模型

n  事件交互机制

三、            微信小程序组件

n   视图容器

Ø  view

Ø  scroll-view

Ø  swiper

n  基础内容

Ø  icon

Ø  text

Ø  progress

n  表单组件

Ø  button

Ø  checkbox

Ø  form

Ø  input

Ø  label

Ø  picker

Ø  radio

Ø  slider

Ø  switch

n  反馈消息组件

Ø  action-sheet

Ø  modal

Ø  toast

Ø  loading

n  导航

Ø  navigator

n  媒体组件

Ø  audio

Ø  image

Ø  video

n 地图

Ø  map

n  画布

n  canvas

【案例实验一】MINA框架

【案例实验二】小程序各种UI组件使用

四、            微信小程序api接口开发

n  网络

Ø  发起请求上传、下载

°  wx.uploadFile

°  wx.downloadFile

Ø  WebSocket

°  wx.connectSocket

°  wx.onSocketOpen

°  wx.onSocketError

°  wx.sendSocketMessage

°  wx.onSocketMessage

°  wx.closeSocket

°  wx.onSocketClose

n  多媒体支持

Ø  图片

°  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.saveFile(OBJECT)

Ø  视频

°  wx.chooseVideo

n 数据

Ø  数据缓存

°  wx.setStorage

°  wx.setStorageSync

°  wx.getStorage

°  wx.getStorageSync

°  wx.clearStorage

°  wx.clearStorageSync

n 位置

Ø  获取位置

Ø  查看位置

n 常规设备

Ø  网络状态

Ø  系统信息

Ø  重力感应

Ø  罗盘

n  小程序蓝牙设备

n  低效蓝牙iBeacon设备

n  小程序WebView

n 界面

Ø  设置导航条

Ø  导航

Ø  动画

Ø  绘图

Ø  其他

n  开放接口

Ø  登录

Ø  签名加密

Ø  用户信息

Ø  微信支付

Ø  模板消息

Ø  使用说明

Ø  接口说明

【案例实验三】微信小程序接口使用

【案例实验四】微信小程序项目架构实战

【项目实战】小程序-电子商城

总结、回顾、答疑