标签:微信小程序

从 0 到 1 开发微信小程序(一):初步认识微信小程序的结构

这是「从 0 到 1 开发微信小程序」系列的第一篇,我是字节莫。

鉴于是光速入门指南,这里就不涉及微信小程序的运行原理等高深的东西。经过两年的发展,微信小程序的框架已经非常地完善,如果不是一些很底层的需求(如性能优化等),是根本不需要深入到这种程度的。

微信小程序的结构

一个微信小程序是由一个一个的页面(page)组成的,就如同 Windows 程序是由一个一个的窗口组成的一样。开发微信小程序其实就是设计和实现各个页面,然后再实现各个页面间的跳转和交互逻辑。除此之外,还有几个全局文件来控制小程序的某些全局属性(如标题颜色、窗口背景颜色、下方导航栏样式等)。

小程序的全局文件

小程序主要有 app.jsonapp.wxssapp.jsproject.config.json 这四个全局文件。

app.json

app.json 是小程序的全局配置文件,它主要控制的是小程序有哪些页面、页面路径、顶部导航栏(navigationBar)是怎样的、底部的选项栏(tabBar)是怎样的等等。

下方是来自官方文档的一份配置示例:

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

上方的示例添加了indexlogs两个小程序页面;配置了上方导航栏中显示的文字为“Demo”;为下方的选项栏添加了“首页”、“日志”两个选项卡以及它们跳转的页面路径;配置了小程序网络连接的超时时间;启用了 debug 模式;配置了可以跳转到的第三方小程序名单。

我们常用到的配置项会在本系列的第二篇「(二):小程序的基本配置 」中详细说到,因而在此暂且按下不表。

如果实在有兴趣,可以到官方文档中查看关于 app.json 详细的可配置选项。

app.wxss

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用于控制小程序页面组件的样式,可以认为 WXSS 是 CSS 的魔改版。对于一些多个页面都使用到的样式,将其抽离出来作为公共样式,就产生了 app.wxss 全局样式表文件。

app.js

小程序中除了页面的组件和样式,还需要有用户交互逻辑控制,如按下某个按钮跳转至某个页面、长按某个列表项弹出操作菜单等,都属于此。在微信小程序中,逻辑交互控制部分是由 JavaScript 代码来控制的,也就是全局和页面中都包含的 .js 文件。

在全局逻辑代码文件 app.js 中,主要进行小程序注册工作(类似于初始化一个对象),以及获取一些小程序要用到的全局数据等,如获取设备状态栏高度、设备屏幕宽高度、系统信息等。

关于数据绑定与更新、小程序生命周期等这部分的详细内容在后面本系列的第五篇「(五):认识 JavaScript 与第一个小程序页面的逻辑交互 」中会讲到,在此就先不赘述。

project.config.json

project.config.json 是小程序项目的配置文件,里面配置了小程序的名称、AppID、小程序依赖的最低基础库版本等信息。

除此之外,里面还配置了该项目微信开发者工具的外观以及代码编译上传选项等信息,当重新安装了开发工具或者在另一台设备中打开同一个项目时,这些选项就会自动恢复成你的自定义配置。这样做的目的是保证同一个项目在不同的设备中有同样的开发体验。

小程序页面的文件组成

假设微信小程序中有一个页面demo

demo.wxml

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。

每一个页面就像一个网页,自然就需要一个文件来描述页面的元素和组成。而demo.wxml就是用来描述小程序页面构成的文件。与 wxss 和 css 之间的关系相似,wxml 也可以认为是 html 的魔改版,其大部分特性都和 html 相似,但也有许多不同的地方。关于 wxml 详细的内容我们会在在本系列的第三篇「(三):认识 wxml 与常用小程序组件」中讲到,在此就不再赘述,只需了解其在构成微信小程序页面中起到的作用即可。

demo.wxss

上文中已经讲到了 wxss 的作用,有区别的是,app.wxss 对小程序所有页面起作用,而单个页面的 wxss 只对该页面起作用,就像编程中全局变量和局部变量的关系一样。另外,页面 wxss 能够覆盖全局 wxss 中的样式。关于 wxss 的详细内容将在本系列的第四篇「(四):认识 wxss 与第一个小程序页面 」中详细讲述。

demo.js

对于一个小程序而言,只有一个静态的页面是无法提供服务的。因此,还需要具备逻辑交互能力来响应用户对页面的操作,如用户点击按钮、用户滑动滑块条等等。而 JavaScript 脚本正是用勒解决这一问题的。相关内容在前文中已有简略叙述,具体的内容将在本系列的第五篇「(五):认识 JavaScript 与第一个小程序页面的逻辑交互 」中详细讲述。

demo.json

上文中讲到小程序全局配置文件app.json中配置了小程序的一些全局选项,如小程序页面路径等。那么同理,对于页面的 JSON 配置文件而言,自然就是用于配置这一页面的一些属性了。

页面 JSON 配置文件用于配置页面的一些属性,如顶部导航栏颜色、顶部导航栏文字、该页面是否允许下拉刷新、上拉加载等等。页面配置可以覆盖全局配置。

关于页面配置的详细内容将在本系列的第二篇「(二):小程序的基本配置 」中详细讲述。

总结

通过上文的讲述,我们知道:一个小程序有四个全局配置文件: app.jsonapp.wxssapp.jsproject.config.json ;小程序由多个页面组成,每个页面由四个文件来描述:page.wxmlpage.wxsspage.jspage.json

至此,我们已经对一个典型小程序的文件组成,以及它们各自的作用有了一定的了解。综上,一个常见小程序项目的文件结构如下:

Miniprogram Project/                    小程序项目目录
├── cloudfunctions                      云函数目录
│   └── login
│       ├── index.js
│       └── package.json
├── Miniprogram                         小程序目录
│   ├── app.js                          小程序全局逻辑代码
│   ├── app.json                        小程序全局配置文件
│   ├── app.wxss                        小程序全局样式表文件
│   ├── components                      自定义组件目录
│   │   └── navigationBar               自定义组件
│   │       ├── navigationBar.js
│   │       ├── navigationBar.json
│   │       ├── navigationBar.wxml
│   │       └── navigationBar.wxss
│   ├── images                          图片文件目录
│   │   ├── img1.png
│   │   ├── img2.png
│   │   └── img3.png
│   └── pages                           小程序页面目录
│       ├── about                       页面
│       │   ├── about.js                页面逻辑代码
│       │   ├── about.json              页面配置文件
│       │   ├── about.wxml              页面结构文件
│       │   └── about.wxss              页面样式表文件
│       └── index
│           ├── index.js
│           ├── index.json
│           ├── index.wxml
│           ├── index.wxss
│           └── user-unlogin.png
└── project.config.json                项目与环境配置(AppID、小程序名称、基础库版本等配置)

最后

第一次写一个系列,同时我也只是业余的小程序开发,文章难免会存在错漏或是不足之处,请务必要指正,不吝感激!

下一篇:「 从 0 到 1 开发微信小程序(二):小程序的基本配置 」

点击量:50

从 0 到 1 开发微信小程序(零):序章

这是「从 0 到 1 开发微信小程序」系列的第零篇,我是字节莫。

前言

背景

最近我在研究微信小程序,作为从未接触过前端开发的小白,几天时间,从 html 都不懂到能写出令自己满意的小程序(水准不算太低,自定义组件、动画、云开发什么的都用上了),一路上坎坎坷坷走了不少弯路,也积累了一些经验。在这里分享出来,希望能帮助微信小程序初学者少走一些弯路、少踩一些坑。

目标人群

这是一份写给从未接触过前端开发的朋友的微信小程序光速入门指南

对于拥有前端开发基础的朋友,大可不必看这份指南。如果实在有兴趣,可以掠过讲前端知识的部分,直接看有关微信小程序独有部分的讲解(一般在各篇文章的后半部分)。微信小程序其实与 H5 异曲同工,或者可以说是魔改版的 H5 。

所谓 “光速入门” ,我写这个系列的初衷是为了帮助没有前端基础的小程序初学者快速入门小程序开发,让他们避免一些小程序的坑,少走一些弯路;所谓 “从 0 到 1” ,即在这个过程中只有选择性地学习小程序开发过程中常用到的一些前端知识而不完整地学完网页开发三剑客,至于如果所学尚不足以实现需求、想要完成从 1 到 100 的过程,就要靠自己系统性的学习前端知识和不懈的努力了,因为后面的路是专业前端的路,已经和微信小程序本身没有太大关系了。

微信小程序的前景

以我愚见,我认为即使是在如今微信和苹果在小程序 / 小游戏问题上无法达成有效共识、造成小程序的能力限制比较大(比如 iOS 端无法调用虚拟支付等)的情况下,微信小程序仍然是比较理想的跨平台方案。尤其是对个人开发者而言。

对微信生态玩家而言,当公众号有限的用户交互和服务形态在触及微信生态的天花板后,微信小程序显然能成为扩展边界的力量,这是其一;对于个人开发者而言,开发简单、轻量级、跨平台、无需下载安装、无需更新的 “App / 游戏” ,这在开发个 App 还要提交一堆的应用商店的五六年前来看,简直就是不敢想象的事情,这是其二;对用户而言,频次不高、轻量化的需求不必在手机里保留一个 app ,微信小程序点开即用、用完即走,无疑是非常理想的存在形态,这是其三。

以上就是我看好小程序的三大主要原因。

写作计划

本系列大致按照如下部分进行讲述,写作计划可能会在写作的过程中进行调整。下方的目录随时更新,已有超链接的部分代表对应的文章已经发布,可以点击阅读。

  • (一):初步认识微信小程序的结构
  • (二):小程序的基本配置
  • (三):认识 wxml 与常用小程序组件
  • (四):认识 wxss 与第一个小程序页面
  • (五):认识 JavaScript 与第一个小程序页面的逻辑交互
  • (六):数据绑定、条件渲染与列表渲染
  • (七):实现小程序动画效果
  • (八):自定义组件开发样例:自定义顶部导航栏
  • (九):使用「小程序 · 云开发」实现小程序的后端
  • (十):小程序性能优化探索

上述的内容非常基础,但也已经涉及了开发一款小程序的绝大部分常见情形。如果把前九篇学完,就已经能够满足很多小程序的 开发需求了。

建议学习方式

微信小程序并不难,看别人写更是会觉得简单,但是当真正上手的时候还是会遇到不少坑。因此,建议大家在学完某项内容之后一定要多动手实践,注册个微信小程序并不是什么难事,或者也可以直接使用官方提供的测试账号(微信开发者工具中新建项目时可以生成临时性的测试账号)。

最重要的一点是:注重查阅官方文档注重查阅官方文档注重查阅官方文档!随着两年的发展,小程序已经拥有了较为完备的体系,所有的东西都能在官方文档中找到。同时,官方文档的更新永远是最及时的,所有新开放的小程序新能力都会第一时间出现在官方文档中。每当我想实现一个功能时候,都是到官方文档中去查阅这个功能能不能实现、实现方式、API 数据格式等等。

微信小程序官方开发文档传送门

最后

第一次写一个系列,同时我也只是业余的小程序开发,文章难免会存在错漏或是不足之处,请务必要指正,不吝感激!

下一篇:「 从 0 到 1 开发微信小程序(一):初步认识微信小程序的结构 」

点击量:8