[学习笔记] 微信公众平台 · 小程序 · 框架

简易教程

1. 获取微信小程序的 AppID

就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。

2. 创建项目

我们需要通过开发者工具，来完成小程序创建和代码编辑。

开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

3. 编写代码

我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。

3.1 app.js

监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的 API（可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等）。
说明：

• wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
• wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用CALLBACK 函数。
• 如未特殊约定，其他API接口都接受一个OBJECT作为参数。OBJECT中可以指定success, fail, complete来接收接口调用结果。

3.2 app.json

配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

3.3 app.wxss

是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

4.创建页面

我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。

当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

5.app.json配置

6.逻辑层

小程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

6.1App()注册程序

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

6.2Page() 注册页面

数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

6.3模块化

我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 才能对外暴露接口。

// common.js
function sayHello(name) {
  console.log('Hello ' + name + '!')
}
module.exports = {
  sayHello: sayHello
}

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
})

7.视图层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

功能

数据绑定
WXML 中的动态数据均来自对应 Page 的 data。

<!--wxml-->
<view> {{message}} </view>


// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

//组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

//控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

运算

可以在 {{}} 内进行简单的运算
三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

列表渲染
wx:for：控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

wx:for也可以嵌套，

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

block wx:for
用在block标签上，以渲染一个包含多节点的结构块
条件渲染
wx:if
wx:if=”{{condition}}” 来判断是否需要渲染该代码块， wx:if 是一个控制属性，需要将它添加到一个标签上。

<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
但是如果我们想一次性判断多个组件标签，我们可以使用一个 block 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
定义:

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

使用：

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

模板拥有自己的作用域，只能使用data传入的数据。

事件
使用方式：
1、在组件中绑定一个事件处理函数。
如 bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

可以看到log出来的信息大致如下：

{
"type": "tap",
"timeStamp": 1252,
"target": {
  "id": "tapTest",
  "offsetLeft": 0,
  "offsetTop": 0,
  "dataset": {
   "hi": "MINA"
  }
},
"currentTarget": {
  "id": "tapTest",
  "offsetLeft": 0,
  "offsetTop": 0,
  "dataset": {
    "hi": "MINA"
  }
},
"touches": [{
  "pageX": 30,
  "pageY": 12,
  "clientX": 30,
  "clientY": 12,
  "screenX": 112,
  "screenY": 151
}],
"detail": {
  "x": 30,
  "y": 12
}
}

或：

<view bindtap="add"> {{count}} </view>

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      data: this.data.count + 1
    })
  }
})

2、事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

3、事件绑定

事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

引用
提供两种文件引用方式import和include。

import

import可以在该文件中使用目标文件定义的template，import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include

include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置。
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。

与 CSS 相比我们扩展的特性有：
尺寸单位
样式导入

8.WXSS

8.1 @impot

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

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

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

8.2 内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" /> 

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

8.3 选择器

8.4 全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

引用

1. IDE + 破解 + Demo
2. api
3. 配置
4. 4.