程序⼆级页⾯tabbar_⼩程序简单页⾯制作⼀:项⽬⽂件作⽤说明
打开开发者⼯具,进⼊⼩程序项⽬
在上⼀节中我们使⽤申请到的AppID创建了⼀个⼩程序项⽬
我们再来回顾⼀下创建⼩程序项⽬后开发者⼯具⾃动帮我们⽣成的⼀些⽂件
①cloudfunctions是云函数⽬录,暂时不要理会
②miniprogram存放⼩程序页⾯的主要代码
③fig.json是项⽬的全局配置⽂件,配置跟编辑器和项⽬相关的功能,⽐如appid信息,编辑器个性设置
④README.md是项⽬简介⽂件,在⾥⾯填写你对该项⽬的描述。
上⼀节我们看到了在index⽂件夹中有四个同名不同类型的⽂件
这四个同名⽂件都是index页⾯(⾸页)的组成部分
页⾯组成⽂件介绍
①wxml⽂件,页⾯⾻架,如引⼊图⽚,引⼊⽂字等
②wxss⽂件,控制页⾯样式,如控制引⼊图⽚显⽰的⼤⼩,控制⽂字字体颜⾊,⽂字⼤⼩等
③js⽂件,页⾯逻辑,实现具体业务,例如判断⽤户的账号密码是否正确
④json⽂件,页⾯配置⽂件,控制导航栏字体,背景颜⾊等
⼆:如何快速删除⽂件
为了⽅便我们从零开始学习开发,现在我们将miniprogram⽬录下所有⽂件删除。
①⽤⿏标右键点击miniprogram⽬录,点击倒数第⼆个硬盘打开选项
②双击进⼊miniprogram⽂件夹
③选中该⽂件夹下所有⽂件并删除
图片编辑器app④删除成功后编辑器控制台(Console)出现报错:
未到⼊⼝ app.json ⽂件,或者⽂件读取失败,请检查后重新编译
这是因为⼩程序规定app.json⽂件必须存在,否则就报错
三.重新构建⽂件
①新建app.json⽂件
在编辑器右键点击miniprogram⽂件夹选择新建JSON选项
输⼊⽂件名为app,出现app.json⽂件表⽰创建成功
接下来按ctrl+s快捷键保存(保存的同时会⾃动重新对代码进⾏编译)
弹出⼀个报错
点击确定后我们发现编译器⾃动⽣成了⼀个app.js⽂件,这是因为app.js和app.json⼀样是官⽅规定必须存在的⽂件,所以编辑器帮我们⾃动⽣成了app.js⽂件。
②再次按ctrl+s快捷键保存,出现如下app.json⽂件解析错误