微信小程序入门

Mr_Ma
555 阅读12分钟

1.微信小程序概述

1.1 为什么是微信⼩程序

  1. 微信有海量用户，⽽且粘性很⾼，在微信⾥开发产品更容易触达用户；

  2. 推⼴app 或公众号的成本太⾼。

  3. 开发适配成本低。

  4. 容易⼩规模试错，然后快速迭代。

  5. 跨平台。

1.2 什么是微信⼩程序

小程序是有别于传统 Web App、HTML5、原生 App 以及微信公众号的一种新的应用形式。

对比 BAT 小程序和快应用的优缺点：

1.3 微信小程序入口和限制

1.4 微信小程序和 H5 对比

1.5 如何进行微信小程序开发

微信小程序本质上是一套 Hybrid 解决方案，掌握基础 HTML5 知识的前端开发者就可以参与小程序的开发。微信小程序提供完善的开发工具链，熟悉客户端的开发者也可以快速上手小程序开发。如何快速开始小程序开发呢？分为下面几个步骤：

注册一个小程序开发账号

下载微信开发者工具

学习开发语言基础知识和小程序框架原理

学习小程序 API 的使用

学习小程序调试和上线操作

2.小程序开发基础知识

先准备一个没有注册过公众号的邮箱，然后访问小程序介绍页面并点击底部的「前往注册」按钮，再按照提示填写个人信息，最后进入邮箱激活账号即可。

详细流程请参考官方文档。

2.1 安装开发者工具

小程序有自己的开发者工具，可以编写代码，实时查看页面和功能效果，还能在开发者工具中进行 debug。小程序开发者工具是使用 NW.js 编写的。

开发者工具的开发界面，如下图所示，开发界面主要由三部分组成：模拟器、编辑器和调试器。

  • 模拟器：提供小程序的运行环境，模拟小程序在手机上的界面效果
  • 编辑器：简单 IDE 功能，点击左侧树形菜单可以打开多个文件直接编写保存，做到实时预览效果，但是开发者工具的编辑器做得比较简单，而且使用体验并不好，建议选择自己顺手的 IDE 增加 WXML 和 WXSS 的语法高亮插件等来编辑代码
  • 调试器：订制版的 Chrome 开发者工具，提供从页面结构到网络请求等多个面板支持，会用 Chrome DevTools 就很容易上手该工具

2.2 小程序开发语言

小程序的开发语言跟前端开发者比较熟悉的 HTML5 非常相似（甚至相同），小程序的视图层由 WXML 和 WXSS 组成，分别对应 HTML 和 CSS，逻辑层则跟 HTML5 一样，也是 JavaScript 语言实现。

  • WXML：小程序自己发明的 XML 语法描述，用来构造小程序的页面结构
  • WXSS：小程序的页面的样式表语言，描述 WXML 的样式
  • JavaScript：小程序 JS 的执行环境并不是普通的 WebView 浏览器，也不是 Node.js 环境，它执行在微信 App 内上下文， 跟 Node.js 一样，也不能像在浏览器内一样对页面 DOM 进行操作

微信小程序运行在三端：iOS、Android 和用于调试的开发者工具

  • 在 iOS 上，小程序的 JavaScript 代码运行在 JavaScriptCore 中

  • 在 Android 上，小程序的 JavaScript 代码通过 X5 内核来解析

  • 在 开发工具上， 小程序的 JavaScript 代码运行在 NW.js（Chromium 内核） 中

2.3 小程序项目目录结构

小程序项目由配置文件、页面文件、静态资源和其他相关（比如组件、小程序云函数等）内容组成，一般小程序会由四类文件组成：

  • .json 后缀的 JSON 配置文件
  • .wxml 后缀的 WXML 模板文件
  • .wxss 后缀的 WXSS 样式文件
  • .js 后缀的 JS 脚本逻辑文件

小程序项目的目录结构组成没有严格的要求，按照前端项目的经验，一般会分为：配置、页面、静态资源、基础库、组件等多个目录，例如下面的目录结构：

image.png 当然根据不同的项目，可能目录结构不同，但是小程序必需的 app.json 和页面组成是必不可少的。

3.小程序架构及其实现机制

3.1 小程序 VS HTML5

小程序并不是 HTML5 应用，而是更偏向于传统的 CS 架构，它是基于数据驱动的模式，一切皆组件（视图组件）。下面是小程序与普通 Web App 的对比。

  • 普通 HTML5 都是执行在浏览器的宿主环境，浏览器提供 window、document 等 BOM 对象，但小程序没有 window、document，它更像是一个类似 Node.js 的宿主环境；因此在小程序内不能使用 document.querySelector 这类 DOM 选择器，也不支持 XMLHttpRequest、location、localStorage 等这些浏览器提供的 API，只能使用小程序自己实现的 API
  • 小程序并非是直接通过 URL 访问的，而是通过信道服务进行通信和会话管理，所以它不支持 Cookie 存储，同时访问资源使用 wx.request 则不存在跨域的问题
  • 小程序在 JavaScript 的模块化上支持 CommonJS，通过 require 加载，跟 Node.js 类似
  • 小程序的页面样式完全继承了 CSS 的语法，但是在选择器上面会少一些，布局支持 flex 布局
  • 小程序的整体框架采用面向状态编程方式，状态管理从 API 来看采用类似 Redux 的设计方式；单向数据绑定方式，当 View 在 Action 操作后，只能通过 Action 的业务处理来更新 View

3.2 小程序架构解密

小程序架构如上图所示，分为视图层和逻辑层，视图层是在 WebView 内渲染，逻辑层则有 JavaScriptCore 来渲染；其中视图层可以多个（考虑到整体性能，最多可以 5 个），逻辑层则全局只有一个（实际通过开启 X5 内核另起一个 JavascriptCore 线程）。

视图层是 WebView，逻辑层为 JavaScriptCore，证据如下：使用 Android 手机，开启 X5 内核 debug 之后，在 Chrome inspect 中可以看到下图所示的内容。

在小程序内，视图层负责页面渲染，逻辑层负责逻辑处理、全局状态管理、请求和接口调用。逻辑层在小程序中称为 APP Service，视图层称为 View。

逻辑层和视图层通过微信的 JSBridge 来实现通信的，逻辑层数据变化通过 JSBridge 通知视图层，触发视图层更新；当视图层触发事件，则继续通过 JSBridge 将事件通知到逻辑层做处理，如此交互进行。

3.3 小程序为什么感觉快

小程序在体验上不仅仅页面流畅，而且点击之后，页面跳转也会比普通的 HTML5 要快很多，这是因为小程序的视图层做了预加载处理。下图是通过 X5 内核开启 inspect 版本之后，在 Chrome 中看到的手机 WebView 的页面情况。小程序选择今日头条，打开了两个页面（热点新闻列表和某条新闻详情），但实际在 Chrome 中看到的 WebView 页面总是比真实打开的页面要多一个，这个多出来的隐藏 WebView 就是提前初始化预热的，方便打开下一个小程序页面来使用，这样就节省了 WebView 初始化的时间，从而大幅提升了跳页效率。

4.小程序开发环境搭建

微信小程序虽然提供自己的 IDE 开发工具，但是对于用惯了 VS Code、Sublime 等编辑器的前端工程师来说，其体验还是挺差的，因此本项目中，只将微信小程序开发者工具作为模拟器、调试和代码上传的工具，其他开发使用自己熟练的编辑器 / IDE 即可。

具体的环境搭建可随项目进行。

5.小程序调试技巧和上线发布

5.1 真机调试

平时开发小程序可以在开发者工具中进行调试，开发者工具提供了类似 Chrome DevTools 的调试面板，对于前端开发者来说入门门槛比较低。

小程序开发完成之后，我们需要在真机上进行测试，真机调试方面小程序开发者工具有预览、远程调试和设置体验版本三大部分功能。除了这三种方式之外，我们还可以使用真机远程调试，在 iOS 上可以通过实现 Safari 调试代码，安卓中可以安装 X5 内核的 inspect 版本，开启 Chrome remote debug 模式。

5.2 预览功能

在开发者工具中，顶部有「预览」功能，点击后会编译打包当前代码，然后生成一个二维码，用开发者账号扫码就可以预览代码。当遇见问题需要同步编写代码 debug 的时候，可以切换到「自动预览」模式，如下图所示，只要代码发生变化就会重新编译自动启动小程序。

5.3上线

小程序开发完成之后，使用 npm run build 打包，然后准备上线：

  1. 上传云函数，保证云函数是最新代码
  2. 在开发者工具页面右上角选择「上传」，弹出提示框填写版本号和备注（备注可以不填写）

  1. 登录微信小程序管理后台，左侧菜单选择「开发管理」，可以看到刚刚上传的版本号代码

点击「提交审核」按钮会出现提示框，直接「下一步」，进入「配置功能页面」，这个页面需要填写小程序的主要功能页面。配置合理的标题和类目，可以帮助小程序更好地被检索。

填写完「配置功能页面」之后，点击提交审核，就进入审核流程了。一般一次审核在几个小时到一天之间，第一次审核会相对慢一些，最快的 3 个小时就审核通过了。审核通过后，绑定小程序开发者账号的微信号会收到提醒

收到提醒后，再次登录小程序管理后台，在「开发管理」处会标记是已经审核通过待发布的版本

5.4 数据分析

上线后的小程序，可以在小程序管理后台，看到一些基本统计数据：

对于开发者而言，最关注的应该是程序异常数据，小程序的监控报警 API 提供数据监控上报的功能。使用前，需要在「小程序管理后台 -> 运维中心 -> 性能监控 -> 业务数据监控」中新建监控事件，配置监控描述与告警类型。

6.总结与拓展

6.1 小程序开源开发框架介绍

WePY

微信小程序问世没多久，大家发现用原生小程序语法开发，开发体验和效率真的不尽如人意。WePY 此时横空出世，彼时 WePY 的目的，是让小程序开发更贴近传统 H5 框架开发，支持引入 npm 包，支持组件化开发和 ES Next 新特性。

  1. 开发模式：更符合现有 MVVM 框架的开发模式，类 Vue，节省上手成本
  2. 组件化开发：支持组件嵌套、循环、组建通信等
  3. npm 包管理：处理了 npm 包依赖问题
  4. ES Next：语法更现代，提升开发体验
  5. 细节优化：setData 性能优化（脏检测）、事件传参、编译器支持、Mixin

正是由于 WePY 解决了原生微信小程序的开发痛点，到目前为止，WePY 也是小程序上层框架中使用方最多的。很多开发者都是基于 WePY 开发微信小程序的，微信官方后续的一些性能优化和特性支持也有 WePY 的影子。

wepy-cli 的周下载量月度平均都维持在 1000 以上，远远领先于同类 cli 工具，star 数 12k+，也正如官网所说，是最受欢迎的小程序框架。使用 WePY 框架的接入，更是达到了上千家。

mpvue

随着小程序接入量的猛增，业界也在不断地对小程序开发体验进行尝试。2018 年 3 月，美团点评发布了一个名叫 mpvue 的小程序框架。mpvue 是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。

mpvue 是基于 Vue 的 Runtime（Vue Runtime 除了我们知道的 Web 平台之外，还有 Weex），相比 WePY，mpvue 的语法更接近 Vue 语法，对于有 Vue 基础的童鞋，可以无缝切换到小程序的开发，省下了学习小程序语法的时间。

Taro

Taro 是 2018 年 6 月，由京东凹凸实验室出品的一款号称多端统一的框架。这里的端，指的是 Web、App（React Native、Weex）、小程序。Taro 主打「一次编写，多端运行」，是继 WePY 和 mpvue 之后，在多平台上做到了更彻底的一款框架。

6.2 小程序开发框架总结

微信小程序诞生之初，定位是简单的逻辑视图层框架，所以不带有数据流管理。经常看到一些小程序开发者，通过手工引入 Redux，去做数据流管理。上面的三款框架，都是支持数据流管理的。它们总体的特性与不同，可以参见下面的表格。

avatar
文章
阅读
粉丝