小程序笔记:框架

一、配置

(一)全局配置(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.jsonwindow选项中或页面配置中设置触发距离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,
    })

(三)路由

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

路由方式

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

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>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容