文章目录
1.小程序文件结构和传统web对比
结构 | 传统web | 微信小程序 |
---|---|---|
样式 | HTML | WXML |
逻辑 | CSS | WXSS |
配置 | JavaScript | JSON |
通过以上对比得出,传统web是三层结构,而微信小程序是四层结构,多了一层配置.json
2.基本的项目目录
pages 页面文件夹
index 页面
index.js 首页的逻辑文件
index.json 页面的配置文件
index.wxml 首页的配置文件
index.wxss 首页的样式文件
logs 日志页面
utils 第三方工具的js(可以删除)
app.js 项目的全局 入口文件
app.json 全局配置文件
app.wxss 全局样式文件
project.config.json 项目的配置文件,入appId
sitemap.json 微信索引配置文件,哪些页面可以在微信上展示
3.配置文件
一个小程序的应用程序会包括最基本的两种配置文件,一个是全局的 app.json文件,和page.json
配置文件中可以有注释
全局配置app.json
{
"pages":[
"pages/user/user",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
pages
包含所有页面
小技巧:页面代码存放第一位,则刚进去小程序中即为第一位
对于新创建的页面,可以在pages.json文件中直接写好改代码,按ctrl + s 直接报错,页面自动创建
window
调整全局样式
详情见:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
开启下拉刷新以及刷新按钮为
{
"pages":[
"pages/user/user",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black",
"enablePullDownRefresh":true
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
tabBar
底部 tab 栏的表现
page.json
{
"pages":[
"pages/index/index",
"pages/cart/cart",
"pages/category/category",
"pages/my/my",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black",
"enablePullDownRefresh":true
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
}
,{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
},
{
"pagePath": "pages/category/category",
"text": "目录",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
效果
页面配置
pages.json
每个页面可以设置独有的json文件
地址https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
cart.json
{
"usingComponents": {}, // 此为后期插件开发使用
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTitleText": "购物车"
}
效果
sitemap配置
页面是否被微信搜索到,具体参照文档