文章目录

一、配置文件
二、页面主体
- 1.json文件
- - 全局json配置
  - 页面json配置
- 2.wxml文件
- - 基础元素
  - 内置组件
- 3.wxss

目录结构:
pages目录下每个子目录对应一个页面, Logs是日志页面.
子目录下为该页面的样式, 框架, 逻辑和json配置项.

一、配置文件

project.config.json
appid, 拿到一个项目, 至少要先把这个东西改成自己的, 才能跑.

projectname无关项目真正的名称, 就像创建vue项目时的项目名称不影响上线后名称.

setting里是一些编译相关的配置:

  "setting": {"bundle": false,"userConfirmedBundleSwitch": false,"urlCheck": true,//余略},

sitmap.json
配置是否允许微信爬虫爬取页面内容, 影响SEO, 这让我联想到网页目录里的robots.txt.
disable页面后, sitmap的索引提示默认开启, 但这些提示在控制台显示为警告, 在project.config.json中checkSiteMap为false来禁止.

二、页面主体

配置项写在app系列文件里会作为全局配置存在, 在页面目录里则仅影响单页面.
app系列文件存在于pages之外, 其配置影响全局, 作为全局配置, 其相对页面目录下的配置项优先级更低, 这意味着, 如果页面目录下也对相同项进行了配置, 全局配置会被覆盖.
比如
app.json里:

"window": {"navigationBarBackgroundColor": "#000","navigationBarTextStyle": "white"
},

index.json里:

{"navigationBarBackgroundColor": "#00b26a","navigationBarTextStyle": "white"
}

效果:

没有被index.json波及到的list.wxml依旧以全局样式为准.
在有换页后就改变tabBar或者window的需求的话可以使用这个罢…

1.json文件

全局json配置

pages
所有页面的路径, 这个数组中的0号将作为首页.

{"pages": ["pages/index/index","pages/logs/logs","pages/list/list"]
}

比如这个例子中, index作为首页.

window
顶部导航栏配置, 里面的配置项都是字面意思.
举例默认配置:

{"window": {"navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"}
}

window配置项表:

属性名	可用值	说明
navgiationBarTitleText	String	导航栏标题文字
navigationBarBackgroundColor	HexColor	导航栏背景颜色
navgiationBarTextStyle	black / white	导航栏标题颜色()
backgroundColor	HexColor	下拉加载区背景色
backgroundTextStyle	dark / light	下拉加载字体样式
enablePullDownRefresh	Boolean	是否全局允许下拉刷新
onReachBottomDistance	Number	上拉多长距离触发触底事件(px, 默认50)

tabBar
通常分为顶部和底部两种, 顶部tabBar不渲染图标, 一条tabBar中可以配置2-5个页签.

属性	可取值	说明
position	bottom / top	tabBar位置
backgroundColor	HexColor	tabBar背景色
borderStyle	black / white	tabBar上边框颜色
color	HexColor	正常字体颜色
selectedColor	HexColor	激活字体颜色
list	Array	必需, 内含页签配置对象

tabBarItem
页签配置项, 放在List的页签配置对象里, 每个配置对象对应一个页签.

属性	可取值	说明
pagePath	String	该item导向的页面路径(须是Page()中存在的路径)
text	String	tab上显示的文字
iconPath	String	未激活的图标路径
selectedIconPath	String	激活的图标路径
示例:

  "tabBar": {"position": "bottom","backgroundColor": "#000","borderStyle": "white","color": "#fff","selectedColor": "aqua","list": [{"pagePath": "pages/index/index","text": "Index"},{"pagePath": "pages/list/list","text": "List"}]},

页面json配置

以下配置效果仅作用于当前页.

属性	可用值	说明
navigationBarBackGroundColor	HexColor	导航栏背景颜色
navigationBarTextStyle	black / white	导航栏标题颜色
navigationBarTitleText	String	导航栏标题内容
backgroundColor	下拉盒背景色(窗口背景色)
backgroundTextStyle	dark / light	下拉加载样式
enablePullDownRefresh	Boolean	是否允许下拉刷新
onReachBottomDistance	Number	页面上拉多少距离触发上拉事件(px, 默认50)

//index.json
{"navigationBarBackgroundColor": "#00b26a","backgroundColor": "#000","navigationBarTitleText": "标题"
}

style
小程序组件使用的样式版本.

{"style": "v2",
}

页面目录内的js文件一般存储该页面的逻辑和方法
单独的js文件可以写封好的可共用方法

2.wxml文件

WXML: Wei Xin Markup Language

<view></view>            <!-- div块 -->
<text></text>            <!-- span行内 -->
<image></image>          <!-- img -->
<navigator></navigator>  <!-- a -->

基础元素

<image>
属性: mode

值	说明
scaleToFill	强制填满,不考虑图片比例
aspectFit	保持横纵比的情况下缩放, 长边完全显示
aspectFill	保持横纵比缩放, 短边完全显示
widthFix	宽度不变, 高度自动, 直到渲染出完整图片
heightFix	高度不变, 宽度自动, 直到渲染出完整图片

属性: src
同img标签的src

<navigator>
属性: target

值	说明
self	在本小程序内跳转
miniProgram	跨小程序跳转

属性: url
同a标签的href属性, url的值应当从"/"起始

<navigator url="xx/xx/xx"></navigator>

属性: open-type

值	说明
navigate	保留当前页跳转 / 导航到非TabBar所列页面必需
redirect	关闭当前页跳转
switchTab	导航到TabBar列出的页面必需
navigateBack	后退, 可配合delta属性, 但在TabBar所列页面无法使用(受击无效).

属性delta
配合open-type="navigateBack"使用, 表示要后退的层级, 但似乎后退到TabBar所列任意页面就不可再退了.
使用TabBar切换页面似乎不增加后退层级.

<button>
type: 同element的type, 控制样式.

内置组件

scroll-view
一个可以在内容超出的时候自动生成滚动条的div.
必须在有父元素的情况下使用, 而且父级要有一个硬性的高度
scroll-x, scroll-y二选一, 规定沿哪条轴滚动.

属性	说明	值
lower-threshold
upper-threshold
scroll-top
scroll-left
scroll-into-view
scroll-with-animation
enable-back-to-top
bindscrolltoupper
bindscrolltolower
bindscroll

<swiper></swiper>
轮播图!
current表示当前所在页的index;

属性	说明	可用值
indicator-dots	是否显示翻页指示器	Boolean
indicator-color	翻页指示器颜色	颜色
indicator-active-color	激活的指示器颜色	颜色
autoplay	是否自动轮播	Boolean
interval	自动轮播时间间隔	ms
circulat	是否采用衔接滑动	Boolean
duration	切换时的动画时长	ms
vertical	切换时滑动方向是否为纵向	Boolean
previous-margin	前边距，可用于露出前一项的一小部分	px 和 rpx 值
next-margin	后边距，可用于露出后一项的一小部分	px 和 rpx 值
display-multiple-items	同时显示的滑块数量	number

事件
current	当前页对应的index
bindchange	current改变时触发change事件
bindtranstion	swiper-item的位置发生改变时触发transition事件
bindanimationfinish	动画结束时触发animationfinish事件

<text>
user-select属性
控制是否允许长按选中, 原selectable属性现已废弃

  <text user-select="true">172568645</text>

space属性
控制空格占多大位置

属性值
nbsp	一个英文字符
ensp	一个半英文字符
emsp	两个英文字符

<text space="emsp"> text</text>

<rich-text>
貌似是什么富文本?
node属性规定这个标签最终渲染成何物, 这有点像router-link的tag属性…

<rich-text nodes="<h1 style='color:red;'>I am a piece of shit</h2>">
</rich-text>

<swiper></swiper>

<swiper autoplay interval="2000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"><swiper-item><image mode="widthFix" src=""></image></swiper-item><swiper-item><image mode="widthFix" src=""></image></swiper-item><swiper-item><image mode="widthFix" src=""></image></swiper-item>
</swiper>

3.wxss

WXSS: Wei Xin Style Sheets
同样遵循CSS语法规则，但是仅支持部分CSS选择器:

class
id
标签
并集
后代
伪类

js、wxss文件名称仅在与wxml文件名相同时才会被wxml自动引入, so, 如果有样式抽离的需求就必须把所有样式引入到入口样式文件.
好在支持wxss文件也支持ES6模块化语法, 可以使用@import引入其他wxss文件:

@import "./another.wxss"

.container似乎是一个特殊的类名, 写例子的时候翻过车, emmm…
以后不要随便用吧.

微信小程序基础(一) 文件结构配置项相关推荐

微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...
微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构能够使用 WXSS 样式美化页面结构能够使用 app.json 对小程序进行全局性配置能够使用 page. ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面由几部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行 ...
更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
微信小程序基础库的问题
微信小程序基础库的问题很多刚开始开发小程序的开发者经常会遇到在开发者工具的模拟器里面可以正常使用小程序的某个API,但是在预览(真机测试)时打开调试发现使用的API报错,但是开发工具里面的基础库是支 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
微信小程序基础语法
微信小程序基础语法官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中列表渲染 <view ...

微信小程序基础(一) 文件结构配置项