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

目录结构:
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选择器:

1. class
2. id
3. 标签
4. 并集
5. 后代
6. 伪类

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

@import "./another.wxss"

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