小程序开发之基础入门指引

1. 起步

1.1. 申请账号

地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1

注册所填写信息：

邮箱

身份证姓名

身份证号（一个身份证号码只能注册5个小程序）

手机号（一个手机号码只能注册5个小程序）

扫码绑定一个微信账号为管理者

不同主体类型间的区别如下：



如何选择主体类型，参加官方说明。

注册成功后进入后台，通过菜单“设置 - 开发设置”得到小程序对应的 AppID（小程序身份标识），同时后台拥有的其它功能如：管理小程序权限、查看数据报表、发布小程序等。

1.2. 安装开发者工具

下载地址：

Windows 64

Windows 32

macOS

该工具集成了公众号网页调试和小程序调试两种开发模式：

使用公众号网页调试，开发者可以调试微信网页授权和微信 JS-SDK 等功能。 详情

使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

关于该工具的详细介绍，请点击这里。

1.3. Hello World

打开开发者工具，选择小程序；

项目配置：



查看效果



在左侧的模拟器中，单击“获取头像昵称”，将得到当前开发者工具已登录微信账号对应的头像、昵称。

注意：因为没有填写 AppID，所以开发者工具有一些功能限制，比如上图右上角中“预览”、“远程调试”等按钮是灰色。

2. 基本项目结构

通过上一步创建的快速预览项目，我们可以看到，小程序主要由

*.json、*.js、*.wxss、*.wxml

四类文件组成，详细的说明见下文。

2.1. json

文件扩展名：*.json

主要实现一些静态配置的功能，分为以下 3 类：

根目录下的 app.json

对当前小程序的全局配置，包括：所有页面路径、界面表现、网络超时时间、底部 tab 等，详见这里。

根目录下的 project.config.json

对当前开发者工具的配置，界面颜色、编译配置等，详见这里。

[page].json

存在于每个页面（模块）对应的目录底下，用于配置每个页面的独立属性，详见这里。

2.2. wxml

文件扩展名：*.wxml

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。其相当于 HTML，但是在 div、p、span 这些标签的基础上，做了一些封装，添加了一些类似

wx:if

的属性表达式等，以实现更多的功能，详见这里。

基本特性简介：

由开始标签和结束标签组成，而且必须严格闭合，比如

<view></view>

；

标签可以拥有属性，格式

key="value"

，大小写敏感；

所有组件的共同属性如下：



数据绑定功能，通过

{{变量名}}

来绑定 wxml 文件对应 js 文件中的 data 对象属性；

变量名大小写敏感；

没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中；

在

{{ }}

内进行简单的逻辑运算

条件逻辑

wx:if="{{condition}}"

列表渲染

wx:for="{{array}}"

模版

<template name="">...</template>

引用其它文件

import

include

2.3. wxss

文件扩展名：*.wxss

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，相当于 CSS，但是做了一些扩充和修改，详见这里：

根目录下 app.wxss 为项目公共样式，各页面共用，其它 *.wxss 适用于具体页面；

新增了尺寸单位 rpx（responsive pixel）;

rpx 的换算是以 375 个物理像素为基准，也就是在一个宽度为 375 物理像素的屏幕下，1rpx = 1px。
推荐以 iPhone6 屏幕（宽度为 375px，共 750 个物理像素）为设计基准，此时 1rpx = 375 / 750px = 0.5px

引用其它样式文件

@import './test.wxss'

仅支持部分 CSS 选择器：



样式的权重遇 CSS 类似，从大到小为

!important > style="" > #id > .class > element

官方样式库：https://github.com/Tencent/weui-wxss

2.4. js

文件扩展名：*.js

小程序的主要开发语言是 JavaScript ，开发者使用它响应用户操作、开发业务逻辑，以及调用小程序 API来完成业务需求。

ECMAScript 是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。

ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：

语法

类型

语句

关键字

操作符

对象

JavaScript 实现形式对比：



小程序中的 JavaScript 是由 ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的 JavaScript 相比，没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto 这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和 NPM 包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。

小程序的执行的入口文件是 app.js，并且会根据其中 require 的模块顺序决定文件的运行顺序。

当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行。

3. 执行流程

说明：

通过 app.json 中配置的第一个页面为小程序的首页。

客户端装载页面代码，并通过底层一些机制，将页面渲染出来。

4. 发布

4.1. 设置用户身份

对于一个由团队开发的小程序项目，给每个参与人员设置不同的身份权限是十分必要的，通过后台菜单

用户身份 - 成员管理

进行设置，不同权限的区别如下：

4.2. 测试预览

使用开发者工具，如下操作：



提示：如果创建项目的时候，没有填写 AppID，该按钮是灰色不可用。

4.3. 上传代码及发布上线

同样通过开发者工具，单击右上角的“上传”按钮，确定上传并填写以下两个字段：

版本号

必填，仅限字母、数字，如

v1.0.0

项目备注

非必填，是对本次上传对特别说明信息。

上传成功后成为【开发版】，小程序管理员可在后台将本次上传设置为【体验版】，或提交审核成为【审核中版本】，审核通通过后，可发布小程序，成为【线上版】，具体流程如下：



说明：

【开发版】只保留每人最新上传的一份代码，可随意删除，不影响审核版和线上版。

只能由一份代码处于【审核版】，有审核结果后，可发布上线或重新提交审核。

【线上版】会被每次发布的新版本覆盖。

可扫描下面的二维码，通过小程序开发者助手快捷的体验以上各版本。

5. 其它

5.1. 查看小程序运营数据

方式一：登录小程序管理后台，打开菜单“数据分析”；

方式二：微信扫描下面对二维码，使用小程序数据助手工具

5.2. 相关资源

官方

文档

开发文档

腾讯云下一代小程序综合解决方案

腾讯云相关文档

关于会话服务

关于信道服务

微信开发者社区

更新日志 - 小程序

更新日志 - 开发者工具

工具

WeUI for 小程序

小程序组件化开发框架 wepy

Demo 类

豆瓣电影 Demo

电影推荐

仿芒果TV

We重邮

组件类

有赞小程序 UI 库

美丽街小程序组件库

小程序营销组件

综合类

小程序开发资源汇总

小程序组件化开发框架wepy开发资源汇总

其它

从零开始，用 Ubuntu + Node.js + MongoDB 搭建微信小程序服务

Flex 布局教程：语法篇

持续更新地址：https://github.com/whorusq/wechat-learning