微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力。它提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
1、小程序的目录结构
小程序的目录结构如下所示。
其中项目级别的的文件包括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中的默认配置。
逻辑层(App Service)
小程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。在JavaScript的基础上,我们做了一些修改,以方便地开发小程序。
增加App和Page方法,进行程序和页面的注册。
增加getApp和getCurrentPages方法,分别用来获取App实例和当前页面栈。
提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。
每个页面有独立的作用域,并提供模块化能力。
由于框架并非运行在浏览器中,所以JavaScript在web中一些能力都无法使用,如document,window等。
开发者写的所有代码最终将会打包成一份JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似ServiceWorker,所以逻辑层也称之为App Service。
视图层
框架的视图层由WXML与WXSS编写,由组件来进行展示。
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language)用于描述页面的结构。
WXSS(WeiXin Style Sheet)用于描述页面的样式。
组件(Component)是视图的基本组成单元。
基础组件
框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
什么是组件:
组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
Content goes here ...
注意:所有组件与属性都是小写,以连字符-连接
API
框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
说明:
wx.on开头的API是监听某个事件发生的API接口,接受一个CALLBACK函数作为参数。当该事件触发时,会调用CALLBACK函数。
如未特殊约定,其他API接口都接受一个OBJECT作为参数。
OBJECT中可以指定success, fail, complete来接收接口调用结果。
参数名
类型
必填
说明
success
Function
否
接口调用成功的回调函数
fail
Function
否
接口调用失败的回调函数
complete
Function
否
接口调用结束的回调函数(调用成功、失败都会执行)
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.saveFile保存文件
wx.getSavedFileList获取已保存的文件列表
wx.getSavedFileInfo获取已保存的文件信息
wx.removeSavedFile删除已保存的文件信息
wx.openDocument打开文件
4)数据API列表:
wx.getStorage获取本地数据缓存
wx.getStorageSync获取本地数据缓存
wx.setStorage设置本地数据缓存
wx.setStorageSync设置本地数据缓存
wx.getStorageInfo获取本地缓存的相关信息
wx.getStorageInfoSync获取本地缓存的相关信息
wx.removeStorage删除本地缓存内容
wx.removeStorageSync删除本地缓存内容
wx.clearStorage清理本地数据缓存
wx.clearStorageSync清理本地数据缓存
5)位置API列表:
wx.getLocation获取当前位置
wx.chooseLocation打开地图选择位置
wx.openLocation打开内置地图
wx.createMapContext地图组件控制
6)设备API列表:
wx.getNetworkType获取网络类型
wx.onNetworkStatusChange监听网络状态变化
wx.getSystemInfo获取系统信息
wx.getSystemInfoSync获取系统信息
wx.onAccelerometerChange监听加速度数据
wx.startAccelerometer开始监听加速度数据
wx.stopAccelerometer停止监听加速度数据
wx.onCompassChange监听罗盘数据
wx.startCompass开始监听罗盘数据
wx.stopCompass停止监听罗盘数据
wx.setClipboardData设置剪贴板内容
wx.getClipboardData获取剪贴板内容
wx.makePhoneCall拨打电话
wx.scanCode扫码
7)界面API列表:
wx.showToast显示提示框
wx.showLoading显示加载提示框
wx.hideToast隐藏提示框
wx.hideLoading隐藏提示框
wx.showModal显示模态弹窗
wx.showActionSheet显示菜单列表
wx.setNavigationBarTitle设置当前页面标题
wx.showNavigationBarLoading显示导航条加载动画
wx.hideNavigationBarLoading隐藏导航条加载动画
wx.navigateTo新窗口打开页面
wx.redirectTo原窗口打开页面
wx.switchTab切换到tabbar页面
wx.navigateBack退回上一个页面
wx.createAnimation动画
wx.createContext创建绘图上下文
wx.drawCanvas绘图
wx.stopPullDownRefresh停止下拉刷新动画
8)WXML节点信息API列表:
wx.createSelectorQuery创建查询请求
selectorQuery.select根据选择器选择单个节点
selectorQuery.selectAll根据选择器选择全部节点
selectorQuery.selectViewport选择显示区域
nodesRef.boundingClientRect获取布局位置和尺寸
nodesRef.scrollOffset获取滚动位置
nodesRef.fields获取任意字段
selectorQuery.exec执行查询请求
9)开放接口:
wx.login登录
wx.getUserInfo获取用户信息
wx.chooseAddress获取用户收货地址
wx.requestPayment发起微信支付
wx.addCard添加卡券
wx.openCard打开卡券
3、相关处理代码
1)注册程序处理代码
App({
onLaunch: function(options) {
// Do something initial when launch. },
onShow: function(options) {
// Do something when show. },
onHide: function() {
// Do something when hide. },
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
2)注册页面处理代码
//index.jsPage({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load. },
onReady: function() {
// Do something when page ready. },
onShow: function() {
// Do something when page show. },
onHide: function() {
// Do something when page hide. },
onUnload: function() {
// Do something when page close. },
onPullDownRefresh: function() {
// Do something when pull down. },
onReachBottom: function() {
// Do something when page reach bottom. },
onShareAppMessage: function () {
// return custom share data when user share. },
onPageScroll: function() {
// Do something when page scroll },
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
3)JS函数模块化
// common.jsfunction sayHello(name) {
console.log(`Hello ${name} !`)
}function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要使用这些模块的文件中,使用require(path)将公共代码引入
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
4)网络数据请求处理代码
//点击搜索按钮调用的函数 search:function(e){
var that = this;
//数据加载完成之前,显示加载中提示框 wx.showToast({
title: '加载中。。。',
icon: 'loading',
duration: 10000
});
//发起请求,注意 wx.request发起的是 HTTPS 请求 wx.request({
url: url + "?city=" + that.data.inputValue + "&key=" + apiKey,
data: {},
header: {
'content-type': 'application/json'
},
success: function(res) {
var data = res.data;
//将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值 that.setData({
restation: data.result,
condition: false
});
//数据加载成功后隐藏加载中弹框 wx.hideToast();
}
})
}