微信目录文件配置信息解析

微信目录文件配置信息解析

2020-04-20 21:55:25发布 浏览数:6746
概述:微信目录文件配置信息解析

红色字体 = 必须项

目录结构解析

一个小程序的 主题部分 由 三个文件 组成 ,必须放在项目文件的根目录下,它们是 :

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


请先
登录
后评论
0 条评论
暂时没有评论
最新文章
更多