微信小程序入门学习笔记

一，基础介绍

小程序是什么？
小程序可以视为只能用微信打开的和浏览的网站。小程序和网页的技术模型是一样的，用到的JavaScript语言 和 CSS样式也是一样的，只是网页的HTML标签被修改成了WXML标签，CSS标签被修改成了WXSS标签。

小程序最大的优势就是基于微信，也不需要考虑IOS和Android不同平台的差异，同时微信也提供了丰富的API接口，例如拍摄，录音，语音识别，二维码等，小程序可以利用原生能力，快速进行开发

开发准备

去微信公众平台注册，申请一个AppId。

下载小程序开发工具，微信开发者工具。

创建一个项目

调试运行项目
小程序支持实时预览，代码修改后，左边预览窗口就可以直接看到修改后的效果。
也可以点击预览按钮，通过微信的扫一扫在手机上体验。

二、小程序项目结构

小程序包含一个描述整体程序的 app 和若干个描述页面的 page 组成。

image
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件 必需 作用
app.js 是 小程序逻辑
app.json 是 小程序公共配置
app.wxss 否 小程序公共样式表
一个小程序页面由四个文件组成，分别是：

文件类型 必需 作用
js 是 页面逻辑
wxml 是 页面结构
json 否 页面配置
wxss 否 页面样式表
注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档 。

// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: ‘I am global data’
})

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。它的作用有些类似Android 中的 Application。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

全局配置
app.json 小程序的全局配置，用于声明页面文件的路径、窗口显示、设置多tab等。完整配置项说明请参考小程序全局配置

{
“pages”: [
“pages/index/index”,
“pages/logs/index”
],
“window”: {
“navigationBarTitleText”: “Demo”
},
“tabBar”: {
“list”: [{
“pagePath”: “pages/index/index”,
“text”: “首页”
}, {
“pagePath”: “pages/logs/index”,
“text”: “日志”
}]
},
“networkTimeout”: {
“request”: 10000,
“downloadFile”: 10000
},
“debug”: true
}

注册页面
小程序的每个页面，都需要在页面对应的js文件中进行注册，同时可以指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
Page({
data: {
text: “This is page data.”
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})

详细的参数含义和使用请参考 Page 参考文档 。

页面配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

{
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “微信接口功能演示”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”
}

三、页面
WXML 模板
wxml文件用来描述页面展示的代码：

获取头像昵称 {{userInfo.nickName}} {{motto}}

它和html页面主要有以下两个区别：

标签名字不太一样，微信小程序提供了丰富的组件供开发者使用，所以不需要使用类似 div、p、span的基础标签。
多了一些wx:if="{{!hasUserInfo && canIUse}}"这种{{}}的表达式，用的是 MVVM 的开发模式，将页面渲染和逻辑进行分离。通过 {{ }} 的语法把一个变量绑定到界面上，称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
JS交互逻辑
小程序为组件提供了很多交互属性，且使用非常简单：

//xxx.wxml
{{ msg }}
点击我

//xxx.js
Page({
clickMe: function() {
this.setData({ msg: “Hello World” })
}
})

更详细的事件可以参考文档 WXML - 事件 。

这里需要注意的是，直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的。