目录结构
根目录
- app.js(必须，小程序的主流程代码)
- app.json(必须，小程序的全局配置)
- app.wxss(可选，全局样式)
- project.config.json(可选，项目配置文件)
pages（页面）
- index
- index.wxml(必须)
- index.js(必须)
- index.json(可选)
- index.wxss(可选)
app.json
app.json小程序的全局配置文件。
配置项
- pages，页面路径
- window，窗口的默认样式
- tabBar，窗口底部的tab的样式
- networkTimeout，网络超时时间
- debug，是否开启debug模式
app.js
全局的脚本文件，需要调用App()函数，来对程序进行注册。
例子:App({})
需要一个对象作为参数，对象中属性说明:
- onLaunch 函数，初始化时调用
- onShow 函数，程序显示时调用
- onHide 函数，程序隐藏时调用
- onError 函数，发生错误时调用
- 其他 任意值，可以在整个项目中访问
文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
app.wxss
- 全局样式文件
- wxss文件相当于网页的css文件，语法类似但是有所简化
- app.wxss是全局样式表，它里边的样式会对所有的页面有效
- 每个页面中也有对应的wxss文件，如果发生冲突以页面自己的为准
文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
页面
小程序中的页面由四个文件组成
- xxx.wxml
- xxx.js
- xxx.wxss
- xxx.json
- 注意每个页面都是由这几个文件组成，但是其中wxss和json是可以省略的
- 每个页面中的四个文件必须有相同的名字，比如
- index.wxml，index.js，index.json，index.wxss
页面.json
对当前页面的窗口样式进行配置
配置项
- navigationBarBackgroundColor 导航栏背景颜色
- navigationBarTextStyle 导航栏标题颜色
- navigationBarTitleText 导航栏文字内容
- backgroundColor 窗口背景色
- backgroundTextStyle 下拉背景字体
- enablePullDownRefresh 是否开启下拉刷新
- disableScroll 页面是否可以滚动
文档
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
页面.wxml
- 页面的结构文件，作用和网页中html类似
- 语法也和html类似，但是标签却完全不同了，大部分的标签比如div、span等都被新的标签替换了
具体标签需要参照文档
https://developers.weixin.qq.com/miniprogram/dev/component/
页面.js
- 当前页面的脚本文件，和app.js类似，不同的是只对当前页面起作用。
- 需要使用Page()函数进行注册，Page中需要一个对象作为参数。
具体配置参考文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
创建第一个小程序
创建一个使用测试号的小程序项目，删除HelloWorld模板里的文件，成为一个空的项目
添加一个app.js文件，添加一个App({})函数
添加一个app.json文件，在app.json中注册所有小程序页面的路径。
{
“pages”:[
]
}
- 添加一个pages文件夹，在pages文件夹下新建一个index文件夹，在index文件夹中添加一个index页面文件，会自动生成
index.js、index.json、index.wxml、index.wxss文件。 - 编辑index.wxml文件，在文件中添加一个view标签并写入
<view>helloworld</view>
最后编辑index.wxss样式文件，添加样式让文本居中显示
view{
width:100%;
height:50rpx;
text-align:center;
}
