目录结构
根目录
- 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/
扫描二维码关注公众号,回复:
9065784 查看本文章
页面.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;
}