微信小程序学习笔记

一. 微信小程序的项目结构

1. .json 后缀的 JSON 配置文件
1.1 小程序配置 app.json

app.json是对当前小程序的全局配置,包括小程序的所有页面路径、界面表现、网络超时、底部tab等,常见的配置关键字如下,更多的配置见小程序配置app.json

  • pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。
  • window字段 —— 小程序所有页面的顶部背景颜色,文字颜色定义在这里的。
1.2 工具配置 project.config.json

开发者在开发工具上做的个性化配置都会被记录在这个.json文件中,导入一个工程时,工具会根据这个文件设置对应的个性化设置。文件中的key值对应的作用还有待查询。

1.3 页面配置 page.json

每个页面的个性化配置信息都存放在页面对应的.json文件中,配置内容和app.json中key值为window一样,page.json中的配置项会覆盖app.jsonwindow的配置项,更多的配置见小程序配置app.json

2. .wxml 后缀的页面结构文件

类似于.html文件,由标签、属性等构成,不一样的地方如下:

  • 使用的标签不一样,微信小程序框架为我们提供了新的标签,更多详细的组件
  • 小程序提倡把渲染和逻辑分开,简单地说就是不让JS操作DOM,只负责管理状态,然后再通过一种模板语法来描述状态和界面结构的关系即可。通过{{}}把一个变量绑定到一个标签上,但是只有变量还是不够的,所以小程序还提供了if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达,更多详细的控制能力
3. .wxss 后缀的页面样式文件

.wxsscss的大部分特性,同时.wxss也做了扩展和修改,详细的.wxss

  • 新增尺寸单位rpx,不需要开发者去做换算,小程序底层会去做换算
  • 提供了全局样式和局部样式,和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
  • 此外 WXSS 仅支持部分 CSS 选择器
4. .js 后缀的页面交互逻辑

响应用户交互、逻辑代码都存放在.js中。同时微信还提供了很多API,可以让开发者可以很方便的调用起微信提供的功能,如获取用户信息,本地存储,支付功能等,更详细的API文档.

5. 小程序文件结构

小程序包含一个描述整体程序的 app多个描述各自页面的 page

5.1 app文件结构
  • app.js:小程序逻辑
  • app.json:小程序的公共配置
  • app.wxss:小程序的公共样式表
5.2 page文件结构
  • page.json:页面配置
  • page.js:页面逻辑
  • page.wxml:页面结构
  • page.wxss:页面样式
    注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

二. 微信小程序的能力

1. 小程序启动

微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地,紧接着通过 app.jsonpages 字段就可以知道你当前小程序的所有页面路径,而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)

2. 小程序的页面加载

微信客户端会先根据 page.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 page.js。

3. 小程序的注册

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数(如下)等。此外开发者还可以添加任意的函数或数据到 Object 参数中,用this可以访问。

  • onLaunch:生命周期函数--监听小程序初始化,当小程序初始化完成时,会触发 onLaunch(全局只触发一次),函数参数
  • onShow:生命周期函数--监听小程序显示,当小程序启动,或从后台进入前台显示,会触发 onShow,函数参数
  • onHide:生命周期函数--监听小程序隐藏,当小程序从前台进入后台,会触发 onHide
  • onError:错误监听函数,当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
  • onPageNotFound:页面不存在监听函数,当小程序出现要打开的页面不存在的情况,会带上页面信息回调该函数,函数参数

全局的getApp()函数可以用来获取到小程序实例,但是需要注意:

  • 不要在定义于App()内的函数中调用getApp(),使用this就可以拿到app实例。
  • 通过getApp()获取实例之后,不要私自调用生命周期函数。
4. 小程序页面注册

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

4.1 初始数据
  • data:页面的初始数据
    初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})
4.2 生命周期
  • onLoad: 页面加载,一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
  • onShow: 页面显示,每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
  • onHide: 页面隐藏,当navigateTo或底部tab切换时调用。
  • onUnload: 页面卸载,当redirectTonavigateBack的时候调用。
    page生命周期
4.3 页面相关事件处理函数
  • onPullDownRefresh: 下拉刷新,监听用户下拉刷新事件,当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
  • onReachBottom: 上拉触底,监听用户上拉触底事件,在触发距离内滑动期间,本事件只会被触发一次。
  • onPageScroll: 页面滚动,监听用户滑动页面事件,页面在垂直距离上滚动的距离会包含在函数的对象参数的scrollTop字段中。
  • onShareAppMessage: 用户转发,只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,用户点击转发按钮的时候会调用。

三. 微信小程序的页面路由

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:

路由方式 页面栈表现
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 页面不断出栈,直到目标返回页
Tab 切换 页面全部出栈,只留下新的 Tab 页面
重加载 页面全部出栈,只留下新的页面

四. 微信小程序模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过module.exports 或者 exports 才能对外暴露接口。(推荐使用module.exports暴露模块接口),​在需要使用这些模块的文件中,使用 require(path)将公共代码引入(require 暂时不支持绝对路径)。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

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

推荐阅读更多精彩内容