如何开发微信小程序

小程序是一种不需要下载安装即可使用的应用。它是连接用户与服务的新方式,它实现了应用“触手可及” 的梦想,用户通过扫一扫或者搜一下即可打开应用,应用将无处不在,随时可用,用完即走。

2017年1月,微信正式推出微信小程序。同年9月,支付宝也推出了支付宝小程序。2018年7月,百度也不甘落后,推出百度智能小程序。从此BAT三巨头都进军了小程序领域。

此篇是微信小程序开发的一个简明介绍和关键说明。

微信小程序的主要开发语言是 JavaScript,如果你使用过 Vue 或者 React,你将会对微信小程序的开发有一种亲切感,它们的一些理念有一些类似,比如数据绑定、数据驱动视图等。

不过跟开发普通网页不同,开发微信小程序需要进行一些特定的准备工作。

一、准备工作

  1. 注册小程序账号
    注册地址
  2. 获取AppID
    位于小程序管理平台的菜单 “开发”-“开发设置”
  3. 安装小程序开发者工具
    下载地址
  4. 配置项目
    • 打开小程序开发者工具,用微信扫码登录开发者工具
    • 新建项目
    • 选择小程序项目
    • 选择在本地准备好的代码路径
    • 填入第二步获取到的AppID
    • 完成,进入开发界面

微信开发者工具会很贴心地为我们初始化好一个默认的工程,好让我们不用从零开始编写。

二、一些重要的概念

  1. 小程序的组成
    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

  2. 一个小程序主体部分由三个文件组成,必须放在项目的根目录:

    • app.js 小程序逻辑
    • app.json 小程序公共配置——相当于html
    • app.wxss 小程序公共样式表(非必须)——相当于css
  3. 一个小程序页面由四个文件组成:

    • .js文件 页面逻辑
    • .wxml文件 页面结构
    • .json文件 页面配置(非必须)
    • .wxss文件 页面样式表(非必须)

    为了方便开发者减少配置项目,描述页面的四个文件必须具有相同的路径与文件名。

  4. 最终,一个小程序的基本目录结构,大致长这个样子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    |—pages/
    | |—about/
    | |—about.js
    | |—about.json
    | |—about.wxml
    | |—about.wxss
    |—app.js
    |—app.json
    |—app.wxss
    |—project.config.js // 工具配置,存放开发者对开发工具的一些个性化配置,例如界面颜色、编译配置等
  5. 宿主环境
    每个小程序都是运行在它所在的微信客户端上的,通过微信客户端给他提供的运行环境,小程序可以直接获取微信客户端的原生体验和原生能力。

  6. 基本架构
    小程序的运行环境分为渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

    其中渲染层的界面使用 WebView 线程进行渲染,逻辑层采用 jsCore 线程运行。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程,这两个线程的通信会经由微信客户端(Native)做中转,逻辑层发送网络请求也经由 Native 转发。

    微信小程序通信模型

三、小程序语法

四、小程序发布流程

  1. 在开发工具里,提交代码,填写版本信息
  2. 小程序管理平台提交审核
  3. 收到审核通过通知后,在小程序管理平台,点击发布
  4. 小程序将会发布到线上提供服务,可以下载二维码让别人扫码使用了