小程序 | 常见的小程序视图容器类组件 + 常见的小程序基础内容组件 + 小程序的构成 + 小程序的宿主环境

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

小程序简介

小程序与普通网页开发的区别

1. 运行环境不同
   网页运行在浏览器环境中
   小程序运行在微信环境中
2. API 不同
   由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。
   但是，小程序中可以调用微信环境提供的各种 API，例如：- 地理定位 - 扫码 - 支付
3. 开发模式不同
   网页的开发模式：浏览器 + 代码编辑器
   小程序有自己的一套标准开发模式：
   • 申请小程序开发账号
   • 安装小程序开发者工具
   • 创建和配置小程序项目

第一个小程序

注册小程序开发帐号

1. 点击注册按钮
   使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的“立即注册”即可进入到小程序开发账号的注册流程
2. 选择注册账号的类型
   
3. 填写账号信息
4. 提示邮箱激活
5. 点击链接激活账号
6. 选择主体类型
   
7. 获取小程序的 AppID
   

安装开发者工具

1. 了解微信开发者工具
   微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：

   1. 快速创建小程序项目
   2. 代码的查看和编辑
   3. 对小程序功能进行调试
   4. 小程序的预览和发布

2. 下载
   推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，下载页面的链接如下：
   https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

3. 安装

4. 扫码登录
   

5. 设置外观和代理
   

   

创建小程序项目

1. 点击“加号”按钮
   
2. 填写项目信息
   
3. 项目创建完成
   
4. 在模拟器上查看项目效果
   
5. 在真机上预览项目效果
   
6. 主界面的 5 个组成部分
   

   常用的：菜单栏->帮助->开发者文档

小程序代码的构成

项目结构

-pages 用来存放所有小程序的页面
-utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
-app.js 小程序项目的入口文件
-app.json 小程序项目的全局配置文件
-app.wxss 小程序项目的全局样式文件
-project.config.json 项目的配置文件
-sitemap.json 用来配置小程序及其页面是否允许被微信索引

• 小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：
  

  其中，每个页面由 4 个基本文件组成，它们分别是：
  .js 文件（页面的脚本文件，存放页面