目录结构
文件结构:一个微信小程序包含一个描述整体程序的app,和多个描述各自页面的page
主体部分由三个文件组成:app.js(小程序逻辑) app.json(小程序的公共设置) app.wxss(小程序的公共样式) 必须放在根目录下
一个小程序页面由四个文件组成:js(页面逻辑) wxml(页面结构) wxss(页面样式) json(页面配置)
注意:我们规定描述页面的这四个文件必须有相同的路径与文件名
配置
app.json配置
1、pages
设置页面路径(路径名+文件名 : "pages/index/index"),数组的第一项代表小程序的初始界面,小程序中新增或者删除界面,都需要在pages里面进行配置
- {"pages":["pages/index/index""pages/logs/logs"]}
2、window
用于设置小程序的状态栏、导航条、标题、窗口背景色
navigationBarBackgroundColor :导航栏背景颜色
navigationBarTextStyle :导航栏标题文字颜色,仅支持black/white
navigationBarTitleText :导航栏文字内容
backgroundColor :窗口的背景颜色
backgroundTextStyle : 下拉背景字体、loading图像的样式仅支持dark/light
enablePullDownRefresh :是否打开下拉刷新
{"window":{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"微信接口功能演示","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}}
tabBar
配置制定tab栏的表现,以及tab切换时显示的对应页面
Tip:通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使他是定义在tabBar配置中的页面,也不会显示底部的tab栏
color :tab上的文字默认颜色
selectedColor :tab上的文字选中之后的颜色
backgroundColor :tab的背景颜色
borderStyle :tab上边框的颜色,仅支持black/white
list :tab的列表,最少两个,最多5个
position :tab的位置,可选值bottom、top
list的包含属性
pagePath :页面路径,必须在pages中先定义
text :tab上面按钮文字
iconPath :图片路径,不能超过40kb
selectedIconPath :选中图片路径
networkTimeout
设置各种网络请求的超时时间
request :wx.request的超时时间,单位毫秒,默认为:60000
connectSocket :wx.connectSocket的超时时间,单位毫秒,默认为:60000
uploadFile :wx.uploadFile的超时时间,单位毫秒,默认为:60000
downloadFile :wx.downloadFile的超时时间,单位毫秒,默认为:60000
debug
可以在开发者工具中开启debug模式,在开发者工具的控制台面板,调试信息以info的形式给出,其信息有page的注册,页面路由,数据更新,事件触发
page.json
每一个小程序也可以使用.json文件来对本页面的窗口表现进行配置,页面的配置比app.json全局配置简单的多,只是设置app.json中的window配置项的内容,页面中配置项会覆盖app.json中的window中相同的配置项
页面的.json只能设置window相关的配置项,所以无需写window这个键如:{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"微信接口功能演示","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}
navigationBarBackgroundColor :导航栏颜色
navigationBarTextStyle :导航栏标题颜色
navigationBarTitleText :导航栏文字
backgroundColor :窗口的背景颜色
backgroundTextStyle :下拉背景字体,loading图的样式仅支持dark、light
enablePullDownRefresh :是否开启下拉刷新
disableScroll :设置为true 则页面整体不能上下滚动,只能在page.json中有效,在app.json中无效
逻辑层(App Service)
小程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。
2、增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
3、提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。
5、由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
6、开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。
本文重点在于小程序API提供的微信功能支持及获取用户信息的解读,具体的用法和调用不在本文讨论范围之内,文章基于20161222版文档解读
小程序API官方定义:
框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
微信小程序提供的API分类与提供能力
-
网络
每个微信小程序需要事先设置一个通讯域名,小程序可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求(wx.request)、 WebSocket 通信(wx.connectSocket)、上传文件(wx.uploadFile)和下载文件(wx.downloadFile)。
-
媒体
该类接口提供图片音频上传下载,以及视频播放控制的能力 -
文件
该类接口主要提供本地文件保存读取与媒体类接口配合使用,支持打开本体文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx -
数据缓存
每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。
以上三个接口是配合使用的,但是由于类型不同被文档分开描述.
-
位置
该类接口主要提供获取当前的地理位置(GPS经纬度或基于网络模拟的经纬度)、速度,使用微信内置地图选择和查看位置,或者通过地图组件交互的能力 -
设备
该类接口主要提供获得用户设备的系统信息、网络状态、重力感应、罗盘、拨打电话和扫码的能力- 系统信息 该接口可以获取: | 手机型号 | 设备像素比 | 窗口宽高 | 微信设置语言 | 微信版本号 | 操作系统版本 | 客户端平台 |
- 网络状态 2g、3g、4g、WiFi
- 重力感应 通过xyz三轴的方式监听重力感应数据,频率:5次/秒,通过微信APP拿到系统陀螺仪给出的数据
- 罗盘 通过面对方向度数的方式监听罗盘数据,频率:5次/秒
- 拨打电话
- 扫码 调起客户端扫码界面,扫码成功后返回对应的结果
-
界面
-
开放接口