# 微信小程序-快速开始

目标：

能够知道如何创建小程序项目
能够清楚小程序项目的基本组成结构
能够知道小程序页面由几部分组成
能够知道小程序中常见的组件如何使用
能够知道小程序如何进行协同开发和发布

小程序简介
第一个小程序
小程序代码的构成
小程序的宿主环境
协同工作和发布

# 1. 小程序简介

# 1.1. 与普通网页开发的区别

-	网页	小程序
运行环境	浏览器	微信
API	DOM、BOM	微信 API
开发模式	浏览器+代码编辑器	1.注册小程序开发账号 2.安装小程序开发者工具 3.创建和配置小程序项目

# 1.2. 体验小程序

官方小程序组件展示：

官方小程序组件展示

# 2. 第一个小程序

# 2.1. 注册小程序开发账号

步骤：

进入官网: https://mp.weixin.qq.com/ (opens new window)
注册“微信小程序”

查看 AppID（小程序ID）：

开发管理 -> 开发设置

参考：

小程序账号|被系统冻结问题汇总 (opens new window)

# 2.2. 微信开发者工具

介绍（主要功能）：

创建小程序项目
编码
调试
预览、发布

下载：

稳定版 Stable Build
地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html (opens new window)

设置：

设置 -> 代理
代理设置：不使用任何代理

查看效果：

在模拟器上查看：点击“编译”按钮
在真手机上查看：点击“预览”按钮

模拟器：

机型：iPhone 6/7/8 (375 x 667 | Dpr:2)

# 3. 小程序代码的构成

# 3.1. 项目结构

proj/
  pages/                      # 页面
  utils/                      # 工具
  .eslintrc.js
  app.ts                      # 入口
  app.json                    # 全局配置
  app.wxss                    # 全局样式
  project.config.json         # 项目配置
  project.private.config.json
  sitemap.json                # 配置小程序及其页面能否被索引

# 3.2. 页面组成

每个页面都是以单独文件夹存在，文件夹内包含四个基本文件

pages/
  index/
    index.js        # 脚本
    index.json      # 配置
    index.wxml      # 结构
    index.wxss      # 样式

# 3.3. json 配置文件

小程序中有四种配置文件：

app.json
project.config.json
sitemap.json
页面.json

app.json：

全局配置
所有页面的路径、窗口外观、界面变现、底部 tab 等
默认的 4 个配置项：
- pages: 所有页面的路径
- window: 所有页面的背景色、颜色等
- style: 小程序组件的样式版本
- sitemapLocation: sitemap.json 的位置

project.config.json：

小程序开发工具的配置
示例：
- setting: 编译相关的配置
- appid
- projectname: 项目名称（不是小程序的名称）

sitemap.json：

类似于网页的 SEO
配置小程序页面是否允许小程序索引

页面.json：

页面中的 .json 文件对本页面的窗口进行配置
会覆盖 [app.json].window 中同名的配置项

# 3.4. 页面

新建页面：

在 [app.json].pages 配置完页面，保存后即自动生成页面模板

示例：

{
  "pages":[
    "pages/index/index",
    // 新增该路径后，会自动生成 list 页面模板
    "pages/list/list"
  ]
}

修改项目首页：

[app.json].pages 数组的第一个元素的路径即为首页

# 3.5. WXML 模板

说明：

WXML，WeiXin Markup Language，小程序设计的标签语言，用来构建页面结构
类似 HTML

WXML 和 HTML 的区别：

标签名称不同：
- HTML —— div, span, img, a
- WXML —— view, text, image, navigator
属性不同：
- <a href="...">
- <navigator url="...">
模板语法：
- 数据绑定
- 列表渲染
- 条件渲染

# 3.6. WXSS 样式

说明：

WXSS，WeiXin Style Sheet，小程序设计的样式语言，用来描述页面样式
类似于 CSS

WXSS 与 CSS 的区别：

新增了 rpx 尺寸单位：（针对不同屏幕尺寸）
- CSS 中需要手动换算单位，如 rem
- WXSS 提供新的尺寸单位 rpx，自动换算
全局样式和局部样式：
- 全局样式 —— app.wxss
- 局部样式 —— 页面中的 .wxss 只作用当前页面
WXSS 支持绝大多数 CSS 选择器：
- class、id、element、并集、后代、::after、::before
- 等等

# 3.7. .js 文件

小程序中的 JS 文件有三大类：

app.js
- 小程序的入口文件，调用 App() 函数启动小程序
页面的 .js 文件
- 页面的入口文件，调用 Page() 函数启动页面
普通的 .js 文件

# 4. 小程序的宿主环境

# 4.1. 宿主环境介绍

说明：

宿主环境（host, environment），程序运行所必须的依赖环境。
比如：
- 安卓 App 的宿主环境是 Android 系统
- iOS App 的宿主环境是 iOS 系统

小程序的宿主环境：

手机微信就是小程序的宿主环境
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，如：
- 微信扫描
- 微信支付
- 微信登录
- 地理定位
- 等等

小程序宿主环境包含的内容：

通信模型
运行机制
组件
API

# 4.2. 通信模型

小程序中通信的主体是渲染层和逻辑层：

渲染层： WXML、WXSS
逻辑层： JS 脚本

小程序的通信模型：

渲染层和逻辑层之间的通信：由微信客户端转发
逻辑层和第三方服务器之间的通信：由微信客户端转发
图示：

# 4.3. 运行机制

小程序启动的过程：

下载代码包
解析 app.json
执行入口文件 app.ts，调用 App() 创建小程序实例
渲染首页
启动完成

页面渲染的过程：

加载解析页面的 .json 配置文件
加载页面的 .wxml 模板和 .wxss 样式
执行的页面 .js 文件，调用 Page() 创建页面实例
页面渲染完成

# 4.4. 组件

小程序中的组件也是由宿主环境提供的，官方将其分为 9 大类：

视图容器
基础内容
表单组件
导航组件
媒体组件
map 地图组件
canvas 画布组件
开发能力
无障碍访问

# 4.4.1. view 组件

说明：

普通视图区域，块级元素，类似于 div
常用来实现页面的布局

示例：

<view class="box">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

# 4.4.2. scroll-view 组件

说明：

可滚动的视图区域，类似于设置 overflow: auto 的 div 容器
常用来实现滚动列表效果

示例：

<!--
  横向滚动：scroll-x，在 wxss 设置容器的 width
  纵向滚动：scroll-y，在 wxss 设置容器的 height
-->
<scroll-view scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

参考：

https://developers.weixin.qq.com/miniprogram/dev/component/view.html (opens new window)

# 4.4.3. swiper 和 swiper-item

说明：

轮播图容器，轮播图 item

常用属性：

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长

示例：

<swiper
  class="swiper"
  indicator-dots
  circular
>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{ item.img }}"></image>
  </swiper-item>
</swiper>

<style>
  .swiper {
    height: 350rpx;
  }

  .swiper image {
    width: 100%;
    height: 100%;
  }
</style>

参考：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html (opens new window)

# 4.4.4. text 组件

说明:

文本组件
类似于 span，行内元素

示例：

<!--   
user-select	
  boolean	false	
  文本是否可选，该属性会使文本节点显示为 inline-block	
-->
手机号：<text user-select>18700007626</text>

参考：https://developers.weixin.qq.com/miniprogram/dev/component/text.html (opens new window)

# 4.4.5. rich-text 组件

说明:

富文本组件
支持把 HTML 字符串渲染为 WXML 结构

示例：

<rich-text nodes="<h1>哈哈</h1>"/>

参考：

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html (opens new window)

# 4.4.6. button

说明：

按钮组件
通过 open-type 属性调用微信的功能（客服、转发、用户授权、获取用户信息等）

参考：

https://developers.weixin.qq.com/miniprogram/dev/component/button.html (opens new window)

# 4.4.7. image

说明：

图片组件
默认宽高为： 300px * 240px

示例：

<!--  
src: 
  以 `/` 打头的路径表示从项目根路径开始

mode: 
  图片裁剪、缩放的模式
    scaleToFill: 
      默认，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    aspectFit: 
      保持纵横比缩放图片，图片的长边能完全显示出来，短边两旁会有空白
    aspectFill: 
      保持纵横比缩放图片，完全填满 image 元素，长边会有截取
    widthFix: 
      宽度为 image 元素的宽度，高度自动变化，保持原图宽高比不变
    heightFix: 
      高度为 image 元素的高度，宽度自动变化，保持原图宽高比不变
-->
<image src="/images/1.png" mode="widthFix"></image>

参考：

https://developers.weixin.qq.com/miniprogram/dev/component/image.html (opens new window)

# 4.4.8. navigator

说明：

页面导航组件

# 4.5. API

宿主环境提供，可调用微信提供的功能，如：

获取用户信息
本地存储
支付功能

事件监听 API:

以 on 打头
示例：wx.onWindowResize(callback)

同步 API:

以 Sync 结尾
示例：wx.setStorageSync(key, value)

异步 API:

通过回调函数处理数据，类似 jQuery.ajax(options)
示例：wx.request({ success(){} })

# 5. 协同工作和发布

# 5.1. 协同工作

权限管理：

对不同岗位、角色的员工的权限进行边界的划分

组织结构：

开发流程：

# 5.2. 成员管理

小程序成员管理主要是管理员对项目成员和体验成员的管理:

成员对应的权限：

成员对应的权限

开发者的权限：

开发者权限：可使用开发者工具对小程序进行代码开发
体验者权限：可使用体验版小程序
登录权限：可进入小程序管理后台，无须管理员确认
开发设置：设置服务器语音、消息退缩、扫描二维码打开小程序
腾讯云管理：云开发相关设置

# 5.3. 小程序的版本

在软件开发过程中，根据时间节点的不同，会产生不同的软件版本，如：

开发者编写代码的同时，对项目代码进行自测；（开发版本）
当程序达到一个稳定可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试；（体验版本）
最后修复完 bug 后，发布正式版本供外部用户使用。（正式版本）

小程序的版本：

开发版本
- 使用开发者工具将代码上传到版本管理
- 开发版仓库只保留每个人最新上传的代码
- 可以将某个开发版本提交（给腾讯）审核，或选为体验版本
体验版本
- 选择某个开发版本作为体验版
审核中的版本
- 只有一份代码处于审核中
- 审核通过后可以发布到线上
线上版本
- 线上所有用户使用的代码版本

# 5.4. 发布上线

小程序发布上线的整体步骤：

上传代码
提交审核
发布

上传代码：

点击开发者工具的工具栏的“上传”按钮
填写版本号和备注

在后台查看上传后的版本：

管理后台 -> 管理 -> 版本管理 -> 开发版本

提交审核：

将某个开发版本提交给腾讯审核
多次提交测试内容或 Demo，将受到相应处罚。

发布：

审核通过后，管理员的微信会收到通知
在版本管理中，可以发布审核通过的版本

小程序码：

管理后台 -> 设置 -> 基本设置
小程序码及线下物料下载

# 5.5. 运营数据

查看运营数据的方式：

在“小程序后台”查看（管理后台 -> 统计）
使用“小程序数据助手”查看
We分析小程序

本章目录