程序的目录结构:
微信小程序总结-编程知识网
其中项目级别的的文件包括 app.js、app.json、app.wxss 这三个。其中.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。
页面级别可以包含很多个页面,如index,detail等页面,每个页面都包含.js,.json,.wxml,.wxss这些文件,其中.wxml为页面视图文件,是自定义标签的HTML页面。
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,可以调用框架提供的丰富的 API。
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

一个小程序主体部分由三个文件组成,必须放在项目的根目录。
微信小程序总结-编程知识网
微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。
index.json 是页面的配置文件:页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json 中的默认配置。
微信小程序总结-编程知识网
逻辑层
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。在 Java 的基础上,我们做了一些修改,以方便地开发小程序。

  • 增加 App和 Page方法,进行程序和页面的注册。
  • 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  • 提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。
  • 每个页面有独立的作用域,并提供模块化能力。
  • 于框架并非运行在浏览器中,所以 Java 在 web 中一些能力都无法使用,如 document,window 等。
  • 开发者写的所有代码最终将会打包成一份 Java,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。
    视图层
    框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
    将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
    WXML(WeiXin Markup language)用于描述页面的结构。
    WXSS(WeiXin Style Sheet)用于描述页面的样式。
    组件(Component)是视图的基本组成单元。
    基础组件
    框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
    什么是组件
    组件是视图层的基本组成单元。
    组件自带一些功能与微信风格的样式。
    一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
    注意:所有组件与属性都是小写,以连字符-连接
    API
    框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
    说明:
    wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
    如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
    OBJECT中可以指定success, fail, complete来接收接口调用结果。
    微信小程序总结-编程知识网
    2、小程序接口功能列表
    框架提供丰富的微信原生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.getStorage 获取本地数据缓存wx.getStorageSync 获取本地数据缓存wx.setStorage 设置本地数据缓存wx.setStorageSync 设置本地数据缓存wx.getStorageInfo 获取本地缓存的相关信息wx.getStorageInfoSync 获取本地缓存的相关信息wx.removeStorage 删除本地缓存内容wx.removeStorageSync 删除本地缓存内容wx.clearStorage 清理本地数据缓存wx.clearStorageSync 清理本地数据缓存