- 如何创建小程序项目
- 小程序项目的基本组成结构
- 小程序页面由几部分组成
- 小程序中常见的组件如何使用
- 小程序如何进行协同开发和发布
小程序简介
小程序与普通网页开发的区别
- 运行环境不同
网页运行在浏览器环境中
小程序运行在微信环境中 - API 不同
由于运行环境的不同,所以小程序中,无法调用 DOM 和 BOM 的 API。
但是,小程序中可以调用微信环境提供的各种 API,例如:- 地理定位 - 扫码 - 支付 - 开发模式不同
网页的开发模式:浏览器 + 代码编辑器
小程序有自己的一套标准开发模式:- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置小程序项目
第一个小程序
注册小程序开发帐号
- 点击注册按钮
使用浏览器打开 https://mp.weixin.qq.com/ 网址,点击右上角的“立即注册”即可进入到小程序开发账号的注册流程 - 选择注册账号的类型
- 填写账号信息
- 提示邮箱激活
- 点击链接激活账号
- 选择主体类型
- 获取小程序的 AppID
安装开发者工具
-
了解微信开发者工具
微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:- 快速创建小程序项目
- 代码的查看和编辑
- 对小程序功能进行调试
- 小程序的预览和发布
-
下载
推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具,下载页面的链接如下:
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html -
安装
-
扫码登录
-
设置外观和代理
创建小程序项目
- 点击“加号”按钮
- 填写项目信息
- 项目创建完成
- 在模拟器上查看项目效果
- 在真机上预览项目效果
- 主界面的 5 个组成部分
常用的:菜单栏->帮助->开发者文档
小程序代码的构成
项目结构
-pages 用来存放所有小程序的页面
-utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
-app.js 小程序项目的入口文件
-app.json 小程序项目的全局配置文件
-app.wxss 小程序项目的全局样式文件
-project.config.json 项目的配置文件
-sitemap.json 用来配置小程序及其页面是否允许被微信索引
- 小程序官方建议把所有小程序的页面,都存放在 pages 目录中,以单独的文件夹存在,如图所示:
其中,每个页面由 4 个基本文件组成,它们分别是:
.js 文件(页面的脚本文件,存放页面