概述:微信目录文件配置信息解析
红色字体 = 必须项
目录结构解析
一个小程序的 主题部分 由 三个文件 组成 ,必须放在项目文件的根目录下,它们是 :
1. app.js 小程序逻辑文件
2. app.json 小程序公共配置文件
3. app.wxss 小程序公共样式表 WeiXinStyleSheets
页面文件解析
一个小程序的页面文件由四个文件组成,它们是:
1. 逻辑文件(.js)
2. 页面结构(.wxml) WeiXinMackedupLanguage
3. 页面配置(.json)
4. 页面样式(.wxss)
项目必要文件 详细解析
小程序配置 app.js
app.js 是 当前 小程序的 全局配置 ,包括了小程序 所有的 页面路径(pages)、界面表现、网络超时时间、底部TAB栏等。 1 { "pages":[ "pages/index/index", "pages/logs/logs" ], ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 要使用wxml页面文件,首先得在全局配置文件的 pages数组里注册该页面 "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ backgroundTextStyle ----------------- 背景文本风格 light / dark navigationBaarBackgroundColor --------- 头部标题栏背景颜色 navigationBarTitleText----------------- 头部标题栏 文本 navigationBarTextStyle----------------- 头部标题栏 文本颜色 white / black } 12345678910111213141516171819
工具配置 project.config.json
帮助用户 保存项目的 个性化设置,编辑器颜色、代码上传自动压缩等 1
JSON语法
JSON中的值只能是以下几种 1. 数字、包含 浮点数 和 整数 2. 字符串 3. Boolean 4. 数组 5. 对象 6. NULL * JSON 中 不能添加注释 12345678
全局配置 app.json
官方文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
XML语法
1. 数据绑定 {{ data }} 2. 列表渲染 <view wx:for = " {{ array }} "> {{ item }} </view> 3. 条件渲染 <view wx:if = "{{ view == 1 }} wx:elseif / wx:else 4. 模板 1234 <!--wxml--> <template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template> <template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> 12345678910 // page.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } }) 12345678
样式表 WeiXin StyleSheets
与CSS类似,但有新增如下属性 1. 尺寸单位 rpx 2. 样式导入 @import "wx.wxss" 3. 内联样式 <view style = "color : {{ color }} "></view> * app.wxss 为 全局 公共样式 12345