快速了解小程序

什么是小程序？

先引用小龙哥的一句话来看看啥是小程序？

小程序是一种不须要下载安装便可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下便可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 - Allen Zhang（张小龙）

从程序猿的角度来讲：小程序就是依赖于微信平台，利用小程序框架提供视图层描述语言WXML、WXSS，以及JavaScript来实现一个具有原生体验的Web应用。微信小程序至关于基于微信平台造了一个React Native的轮子，经过JS的跨平台性实现了一套代码跨平台部署、运行。

Hello World

工程结构

首先，咱们先经过微信web开发者工具新建一个项目，项目建成后会自动生成下列文件。下文所有围绕这个新建的项目来简单的介绍一下小程序。

能够看出整个工程包括app.js、app.json、app.wxss，以及pages和utils目录，后面咱们一次介绍各个文件和目录的做用。

其中app.js、app.json、app.wxss最为重要，他们为对整个小程序进行全局配置。

• app.js，声明小程序的整个生命周期、定义全局变量

• app.json，对整个小程序起全局配置的做用，规定小程序包括哪些页面、窗口的样式、底部tab栏的样式、网络超时事件、是否开启debug模式

• app.wxss，这里的wxss相似于CSS，只不过是针对微信作了一部分拓展，定义了小程序的全局样式

而pages目录下面每一子目录都表明了小程序中的一个页面，而每个页面都由*.js、*.json、*.wxml、*.wxss组成，这里又出现了一个新的后缀wxml，同时再次出现了wxss，后面会解释他俩是啥用的。先解释一下，页面中的这四种文件是干啥用的？

• *.js，处理页面的逻辑

• *.json，处理页面的配置

• *.wxml，处理页面的结构

• *.wxss，处理页面的样式

为了减小配置同一个页面目录中的文件都须要以同一个名字命名，例如我的习惯将全部页面目录下面的文件都用index命名。

*.json中我能够配置什么？

上面有提到app.json能够配置页面的全局配置，而pages目录下*.json则能够配置对应页面window选项（窗口的样式），那么咱们到底能够配置哪些具体内容呢？

// app.json
{
    // 定义小程序中有哪些页面
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    
    // 窗口的样式
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"black",
        "enablePullDownRefresh": true
    },
    
    // 底部tab的内容和样式
    "tabBar": {
        // tab的具体内容
        "list": [
            {
              "pagePath": "pages/index/index",
              "text": "首页"
            }, 
            {
              "pagePath": "pages/logs/logs",
              "text": "日志"
            }
        ]
    },
    
    // 设置不一样请求的网络超时
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    
    // 是否开启debug模式，开启debug模式以后能够在微信开发者工具的控制台中看到整个APP，以及每一个页面的生命周期日志
    "debug": true
}

经常使用的配置都在这里了，根据配置的命名其实已经能够猜个大概啦，若是猜不出来能够参考文档“配置”

什么是wxml？

工程中出现了一个新的后缀*.wxml，而WXML(Weixin Markup Language)是微信小程序框架设计出来的一种标签语言，你能够直接把他理解成是微信定义了一套带有特殊事件、效果、属性的标签，但本质上和<div>、<img>、<a>等类似。值得注意的是，在wxml中也可使用HTML的标签。

数据绑定

WXML中仍是实现了如今比较流行的数据绑定的功能，省去了咱们操做DOM元素的烦恼。WXML使用了Mustache语法，即经过2个花括号来包裹某一个属性，经过修改调用JS来修改对象的属性，继而修改页面中dom元素的值。

<view>{{message}}</view>

Page({
    data: {
        message: 'Hello Mina!'
    }
});

列表渲染

而除了提供数据绑定，它还提供了列表渲染、条件渲染、模板、事件、引用等功能。不过语法都比较简洁，有基础的同窗基本上均可以快速看懂。

<!-- 列表渲染 -->
<view wx:for="{{array}}">{{item}}</view>

条件渲染

在处理条件渲染时须要注意，小程序中全部的条件判断表达式、true、false都须要使用{{}}包裹，不然会按照字符串来处理。

<!-- 条件渲染 -->
<view wx:if="{{condition}}">HAHA</view>

模版

WXML提供语法简洁的前端模版，只须要你经过template中的is属性来制定须要使用的模版，并传入须要的参数就能够开始渲染了。

<!-- 模板 -->
<template name="msgItem">
  <view>
    <text> {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<!-- 使用模版 -->
<template is="msgItem" data="{{...item}}"/>

引用

小程序提供了两种不一样方式的引用import和include，两者的区别在于：

• import会引用目标文件中定义的 template

• include会将目标文件中除了template外的全部内容拷贝到include定义的位置

还须要注意的是import存在做用域的概念，即它只会引用目标文件中的template，不会引用目标文件中import的文件。

<!-- import -->
<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

<!-- include -->
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

事件

这里单独说一下WXML中所提到的事件，小程序框架经过事件来保持视图层和逻辑层的通信，例如，用户进行点击行为，点击行为触发了点击事件，进而触发逻辑层中所绑定的函数。

和咱们在浏览器中开发JS有区别的是，这里的事件分两种：冒泡事件和非冒泡事件。其中冒泡事件包括touchstart、touchmove、touchcancel、touchend、tap、longtap，其他未说起的事件或者自定义事件均为非冒泡事件。

而在标签绑定事件函数存在两种方式bind*、catch*，其中bind*的事件绑定不会阻止冒泡事件向上冒泡，catch*则会阻止冒泡事件向上冒泡至关于直接在函数中执行e.stopPropagation()来阻止事件冒泡。

什么是wxss？

WXSS(WeiXin Style Sheets)是一套样式语言，咱们能够简单理解成CSS的一个拓展，它增长了两个特性：

• 尺寸单位

• 样式导入

在WXSS中引入了一个新的单位rpx(responsive pixel)，根据屏幕宽度的不一样rpx表明的实际px也不一样。WXSS规定一个屏幕的宽度为750rpx，750恰好是iphone6的物理宽度大小，也是目前大多数设计师出设计稿的标准宽度。也就是说当咱们拿到设计稿的时候，咱们不须要经过百分比、rem，而是直接测量出设计稿上的像素大小并使用微信提供的rpx就能够知足多屏适配的问题。

除了rpx，WXSS还提供了目前大部分CSS预编译语言所提供的是样式导入，即将外联样式导入当当前文件中

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

App

咱们能够经过App()来注册一个小程序，并指定他的生命周期。

App({
    // 监听小程序初始化，只会在小程序注册时调用，其中返回值中包括了`path`小程序路径、`query`打开小程序的query、`scene`场景值
    onLaunch: function (options) {},
    
    // 监听小程序显示，当小程序启动或者从前台进入后台时会调用该方法
    onShow: function(options) {},
    
    // 监听小程序隐藏，当小程序从前台进入后台时调用
    onHide: function() {},
    
    // 监听小程序的错误，当小程序发生错误时触发，相似`window.onerror`
    onError: function() {},

    // 全局对象
    globalData: {}
});

// app自己是一个单例在一个程序中只有一个，因此在其它文件中若是想要使用APP对象须要经过下列方法调用
var appInstance = getApp();

这里所谓的前台、后台引用文档里面的话来讲就是：

当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并无直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

不难看出和APP所谓的前台后台很相似。

在这里咱们还须要注意的一点就是场景值，场景值应该是微信所独有的一个概念，即你经过什么的方式进入小程序，你能够是经过“发现栏小程序主入口”，也能够是经过“单人聊天窗口”等等途径进入不一样的方式都对应这个一个固定的值，这样你就能够根据不一样的场景值对用户做区分、统计，亦或是功能上的区分，这些彻底能够根据你的应用场景来决定。具体场景值能够参考文档“场景值”

Page

和注册小程序类似，注册页面能够经过Page()去指定页面的生命周期、事件函数以及初始化数据

Page({
    // 初始化的页面数据
    data: {
        text: "初始化数据"
    },
    
    // 页面加载时触发，这里的加载指的是第一次加载
    onLoad: function(options) {},
    
    // 页面渲染完成时触发
    onReady: function() {},
    
    // 页面显示时触发，每次打开都会触发
    onShow: function() {},
    
    // 页面隐藏时触发
    onHide: function() {},
    
    // 页面卸载时触发
    onUnload: function() {},
    
    // 用户下拉时触发
    onPullDownRefresh: function() {},
    
    // 用户上拉触底时触发
    onReachBottom: function() {},
    
    // 点击分享后触发
    onShareAppMessage: function () {},
    
    // 事件绑定函数
    viewTap: function() {
        // 修改页面数据
        this.setData({
            text: '啦啦啦啦啦'
        })
    },
    
    // 自定义的对象
    customData: {
        hi: 'MINA'
    }
})

上图为页面生命周期的一个描述，其中onLoad和onUnload对应表明了页面的生命开始和结束，页面的生命周期中onLoad、onUnload、onReady只会调用一次，onShow、onHide是能够屡次调用的。

小程序中全部的页面都由框架自身维护，而框架则以栈的形式去管理全部的页面，下表为路由状态、页面的生命周期、页面栈的表现三者的关系

路由方式	触发时机	页面栈表现	路由前页面	路由后页面
初始化	在小程序中打开第一个页面	新页面入栈	-	onLoad,onShow
打开新页面	调用wx.navigateTo或者使用navigator组件跳转方式为navigateTo	新页面入栈	onHide	onLoad,onShow
页面重定向	调用wx.redirectTo或者使用navigator组件跳转方式为redirectTo	当前页面出栈，新页面入栈	onUnload	onLoad,onShow
页面返回	调用wx.navigateBack或者使用navigator组件跳转类型为navigateBack或者按返回键	页面不断出栈，直到找到目标页面	onUnload	onShow
Tab切换	调用wx.switchTab或者使用navigator组件跳转类型为switchTab	页面所有出栈，只留下访问的tab页	-	根据跳转页面的不一样而不一样
重加载	调用wx.reLaunch或者使用navigator组件跳转类型为reLaunch	页面所有出栈，只留下新的页面	onUnload	onLoad,onShow

固然，若是你以为上面的表述比较麻烦，你也能够直接在微信开发者工具中看到当前页面栈的变化状况。

框架也为咱们提供了获取页面栈的方法，经过getCurrentPages()咱们能够以数组的形式得到当前页面栈的实例，可是不要尝试修改页面栈，可能会出现莫名其妙的错误。

模块化

以项目中的utils/utils.js文件为例，它自己是一个普通工具类，采用了CommonJS的规范将自身特定的函数暴露给外部使用

// utils/utils.js
function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

// logs/logs.js
// 经过require去引用utils.js
var util = require('../../utils/util.js')

在小程序中，基本上一个文件就是一个模块，并经过module.exports或者exports将想要暴露的对象、函数暴露出去。

api 和 组件

前面在说WXML的时候，又提到小程序框架为咱们提供了大量功能、风格和微信类似的原生组件相仿的标签，这些标签就是咱们开发中要使用到的组件，下面大体浏览介绍一下

除了这些功能丰富的组件外，微信还提供了丰富的微信API来调起微信

这里只作一个大概介绍，具体内容请参考文档“组件”和“API”

须要注意的

• 在小程序中没法使用window、document，由于小程序运行在JsCore中，它里面是不包含window、document的

• 在小程序中没法使用jquery、zepto，由于jquery或zepto中使用了window或document

• background-image不能使用本地资源，只能使用网络资源或者BASE64转码

• 小程序只能同时打开5个页面，超过5个时，wx.navigateTo就不能正常打开了

博客地址: ssh.today，欢迎关注