开发前的准备
小程序是连接用户和服务的全新方式。它们可以在微信中轻松获取和传播,并具有出色的用户体验。
小程序开发前的准备工作:
①申请开户
②安装开发工具
申请账户
在开发小程序之前,您需要注册一个小程序帐户,通过它您可以管理您的小程序。
账户申请:
进入小程序注册页面,按照指引填写信息并提交相应信息,即可拥有自己的小程序账号。
小程序
注册后即可登录小程序后台
:
在菜单“开发”-“开发设置”中可以看到个人小程序,将在开发中使用,相当于微信小程序对开发者的通行证。
小程序基本信息
接下来,设置小程序的基本信息
小程序名称、简介、简称、头像、服务类别等
小程序开发工具
编写小程序代码需要专门安装小程序开发工具
下载版本:
![]()
注意:小程序开发工具兼容性问题
需要注意的是小程序开发工具只支持7及以上版本,Mac上支持OS X 10.8及以上
双击下载的安装文件,根据提示点击下一步完成安装。安装成功后,可以在桌面或开始菜单中找到小程序开发工具的快捷方式并打开。
接下来打开微信小程序开发工具,开始创建小程序项目,使用注册小程序时使用的微信扫码登录。
第一次打开后,预览一般会自动编译。如果没有,你可以在微信开发者工具中预览你的第一个小程序,点击顶部菜单进行编译。
小程序开发工具提供预览和真机测试两种方式供开发者在手机上浏览测试项目,俗称“真机测试/调试”。
小程序目录结构
仔细查看之前创建的项目会发现项目中生成了许多不同类型的文件:
①.json后缀------------JSON配置文件
②.wxml后缀---------WXML模板文件
③.wxss后缀---------WXSS样式文件
④.js后缀---------------JS脚本逻辑文件
接下来依次分析各个文件的作用
在发展上主要分为两个层次:
小程序级应用
页面级别
后来又多了两个
.json 小程序集合设置
..json 项目配置文件
(1).json 小程序包含设置
微信现已开启小程序内搜索,您的小程序页面可能会显示在微信搜索等多个公共场景。
当开发者允许微信索引时,微信会以爬虫的形式对小程序的页面内容进行索引。
默认值:默认所有页面都可以被索引,开发中一般不需要相关配置。
如果不想被搜索,可以到小程序后台配置小程序页面是否允许微信索引----->设置-基本设置-隐私设置
(2)..json 项目配置文件
新建项目配置文件:小程序开发者工具在项目根目录下增加一个项目配置文件.json
影响:
在工具上进行的任何配置都将写入此文件。重装工具或更换电脑工作时,只要加载了同一个项目的代码包,开发者工具就会自动恢复到你开发项目的时间。个性化配置,其中将包括编辑器颜色、上传时自动压缩代码等一系列选项。
(3)在开发工具的控制台中关闭索引提示
初始化项目后,打开控制台,每次打开页面都会在控制台看到警告提示
因为默认开启索引提示,所以在控制台会有警告提示,不影响开发。
(3)在开发工具的控制台中关闭索引提示
如何在控制台中关闭索引提示?
方案:在小程序项目配置文件..json中添加配置字段为
(4) 根目录文件

①、必须、用来存放页面文件的文件夹
②、可选,存放公共js的文件夹
③app.js,必填,小程序逻辑文件
④app.json,必填,小程序配置文件
⑤app.wxss,可选,小程序公共样式文件
⑥..json,更新后自带,项目配置文件(无需关注)
⑦.json,更新后自带,小程序包含设置文件(无需关注)
(4) 小程序级别
一个小程序的主体部分由三个文件组成,必须放在项目的根目录下,如下:
(5)页面页面级别
1、微信小程序由几个页面组成
2、所有页面内容都必须存放在[]文件夹中微信小程序开发查看版本,例如初始化项目中的两个页面和日志页面都在文件夹中
3、在[]文件夹中,每个页面都有一个单独的文件夹
每个小程序页面由四个文件组成,分别是:
要求:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径和文件名。
该页面由以下4个文件组成: 以//为例
①.wxml,必须,页面的结构文件,类似于HTML文档
②.wxss,可选,页面的样式表文件,类似CSS文档
③.js,必须,页面的逻辑文件,类似js文件
④.json,可选,页面的配置文件(如页面是否允许下拉刷新,等待图标样式等)