小程序笔记：框架

一、配置

(一)全局配置(app.josn)：

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

1. pages：用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理,数组中的首页面会成为小程序的首页面。
   "pages": ["page/welcom/welcom"]，小程序中用到的页面均需在pages数组中配置，通过在pages数组中新增页面，可以快速新建页面文件。
2. window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
   "window": {"navigationBarBackgroundColor": "#405f80"}
3. tabBar：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

"tabBar": {
    "borderStyle": "white",      //tab栏上边框颜色，仅支持 black / white
    "color": "#707070",          //tab栏文字颜色
    "backgroundColor": "#F7F7FA",  //tab栏背景色
    "selectedColor": "#1F4BA5",      //tab选中后文字颜色
    "list": [                                        //tab栏选项列表，最少2个、最多5个
      {
        "pagePath": "page/posts/post",           //选项对应页面路径
        "text": "文章",                                      //选项栏内容
        "iconPath": "images/tab/yuedu.png",    //选项栏图标
        "selectedIconPath": "images/tab/yuedu_hl.png"   //选项栏选中后图标
      },
      ...
  }

(二)页面配置(*.json)：

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置，页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
post.json: {"navigationBarTitleText": "文与字"} 导航栏标题文字内容
more-movie.json: {"enablePullDownRefresh": true} 开启下拉刷新

二、逻辑层 App Service

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

(一)注册程序App(Object)

App()

App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次，不然会出现无法预期的后果。

App({
  globalData: {
    doubanBase: 'https://douban.uieee.com',
  }
})

getApp(Object)

全局的 getApp() 函数可以用来获取到小程序 App 实例。let app = getApp();

(二)注册页面

Page(Object) 构造器

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

初始数据：data

data 是页面第一次渲染使用的初始数据。页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。渲染层可以通过 WXML对数据进行绑定。

生命周期回调函数

onLoad(Object query)页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

页面事件处理函数

onPullDownRefresh()，监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中开enablePullDownRefresh`。
• 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()，监听用户上拉触底事件。

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次。

onShareAppMessage(Object)，监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。

 //下拉刷新
onPullDownRefresh() {
    let freshUrl = this.data.url + '?start=0&count=20';
    this.setData({
      movies: [],
    });
    wx.stopPullDownRefresh();
    utils.http(freshUrl, this.processDoubanData);
    wx.showNavigationBarLoading();
  },
 //触底懒加载
  onReachBottom() {
    this.setData({
      curIdx: this.data.curIdx + 20,
    })
    let newUrl = this.data.url + '?start=' + this.data.curIdx + '&count=20';
    utils.http(newUrl, this.processDoubanData);
    wx.showNavigationBarLoading();
  },
//处理右上角的分享
  onShareAppMessage: function () {
    return {
      title: this.data.postData.title,
      path: '/page/posts/post-detail/post-detail',
    }
  },

组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

Page.route

到当前页面的路径，类型为String。

setData

setData(Object data, Function callback)函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

 this.setData({
      postList: postData.postList,
    })

(三)路由

在小程序中所有页面的路由全部由框架进行管理。

路由方式

对于路由的触发方式如下：

• 初始化：小程序打开的app.json中pages数组的第一个页面
• 打开新页面：调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
• 页面重定向：调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
• 页面返回：调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮
• Tab 切换：调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab
• 重启动：调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

Tips:

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

(四)模块化

文件作用域：

在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。

模块化

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

module.exports = {
  http,
  convertToStarsArray,
  convertToCastString,
  convertToCastInfos,
}

​在需要使用这些模块的文件中，使用 require(path) 将公共代码引入，require 暂时不支持绝对路径。
let utils = require('../../../utils/utils.js');

(五)API

小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。通常，在小程序 API 有以下几种类型：

事件监听 API

我们约定，以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

同步 API

我们约定，以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

异步 API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定success，fail，complete等字段来接收接口调用结果。

三、视图层

(一)WXML

数据渲染：

WXML 中的动态数据均来自对应 Page 的 data。
(1)简单绑定，数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
内容：<text class='post-date'>{{date}}</text>
组件属性：<image class='head-img' src='{{postData.headImgSrc}}' />
控制属性：<block wx:for='{{postList}}' wx:key='postId'>
关键字：<swiper catchtap='onSwiperTap' autoplay='{{true}}'>
(2)运算，可以在 {{}} 内进行简单的运算，支持的有如下几种方式
三元运算：<image src='{{collected ? "/images/icon/collection.png" : "/images/icon/collection-anti.png"}}' />
算数运算：<view> {{1+2}}</view>
逻辑判断：<view wx:if="{{length > 5}}"> </view>
字符串运算：<view>{{"hello" + name}}</view>
数据路径运算：<text class='author'>{{postData.author}}</text>
(3)组合，也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
数组：<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
对象：<template is="objectCombine" data="{{for: a, bar: b}}"></template>
可以用扩展运算符 ... 将一个对象展开：<template is='postItem' data='{{...item}}' />
如果对象的 key 和 value 相同，可以使用ES6：<template is="objectCombine" data="{{foo, bar}}"></template>

条件渲染：wx:if、wx:else、wx:elif

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view class='category-panel' wx:if='{{!isSearch}}'>
<view class='search-panel' wx:else>

列表渲染：wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，使用 wx:for-index 可以指定数组当前下标的变量名。数组当前项的变量名默认为 item，使用 wx:for-item 可以指定数组当前元素的变量名。
<view wx:for='{{postList}}' wx:key='postId'>

事件

事件的使用方式：在组件中绑定一个事件处理函数，如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>在相应的Page定义中写上相应的事件处理函数，参数是event。

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
定义模板：使用 name 属性，作为模板的名字，然后在<template/>内定义代码片段，<template name="postItem">...</template>。
引用模板：<import src='./post-item/post-item-template.wxml' />
使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，<template is='postItem' data='{{...item}}' />

引用

WXML 提供两种文件引用方式import和include。
(1)import可以在该文件中使用目标文件定义的template，如：<import src='./post-item/post-item-template.wxml' />
(2)include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。

(二)WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，用来决定 WXML 的组件应该怎么显示。
WXSS 具有 CSS 大部分特性，与 CSS 相比，WXSS 扩展的特性有：

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。rpx换算px (屏幕宽度/750) ，px换算rpx (750/屏幕宽度)

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束@import 'post-item/post-item-template.wxss';

(三)基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
什么是组件：

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格一致的样式。
• 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

<tagname property="value">
Content goes here ...
</tagname>

注意：所有组件与属性都是小写，以连字符-连接