前端小木鱼
前端小木鱼

小程序笔记：框架

一、配置

(一)全局配置(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)，监听用户点击页面内转发按钮（