微信小程序开发基础知识总结

微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破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停止下拉刷新动画

8WXML节点信息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'

}

})

3JS函数模块化

// 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();

}

})

}

推荐阅读更多精彩内容

  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    伍华聪_开发框架阅读 930评论 0 51
  • 转载请注明出处, 谢谢! (~ o ~)Y 1月9日,也就是今天,微信推出的“小程序”正式上线。“小程序”是一种无...
    Jimmy_P阅读 10,125评论 56 266
  • 最近做了一个投票的微信小程序,开发过程主要还是参考官方文档:https://mp.weixin.qq.com/de...
    june5253阅读 15,877评论 2 11
  • 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了...
    Mr大大大阅读 41,722评论 24 67
  • 我是一个小丑。 我穿着五颜六色的服装,戴着小丑面具,穿梭在繁华的商场、游乐场、闹市的大街小巷。我能把气球折成各种各...
    乐小哈阅读 73评论 0 0