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

Posted 白瑕

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序基础 文件结构&配置项相关的知识，希望对你有一定的参考价值。

文章目录

目录结构:
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配置项表:

属性名可用值说明
navgiationBarTitleTextString导航栏标题文字
navigationBarBackgroundColorHexColor导航栏背景颜色
navgiationBarTextStyleblack / white导航栏标题颜色()
backgroundColorHexColor下拉加载区背景色
backgroundTextStyledark / light下拉加载字体样式
enablePullDownRefreshBoolean是否全局允许下拉刷新
onReachBottomDistanceNumber上拉多长距离触发触底事件(px, 默认50)

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

属性可取值说明
positionbottom / toptabBar位置
backgroundColorHexColortabBar背景色
borderStyleblack / whitetabBar上边框颜色
colorHexColor正常字体颜色
selectedColorHexColor激活字体颜色
listArray必需, 内含页签配置对象

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

属性可取值说明
pagePathString该item导向的页面路径(须是Page()中存在的路径)
textStringtab上显示的文字
iconPathString未激活的图标路径
selectedIconPathString激活的图标路径
示例:
  "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配置

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

属性可用值说明
navigationBarBackGroundColorHexColor导航栏背景颜色
navigationBarTextStyleblack / white导航栏标题颜色
navigationBarTitleTextString导航栏标题内容
backgroundColor下拉盒背景色(窗口背景色)
backgroundTextStyledark / light下拉加载样式
enablePullDownRefreshBoolean是否允许下拉刷新
onReachBottomDistanceNumber页面上拉多少距离触发上拉事件(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
bindchangecurrent改变时触发change事件
bindtranstionswiper-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…
以后不要随便用吧.

以上是关于微信小程序基础 文件结构&配置项的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序基础架构

微信小程序学习:基本框架

微信小程序学习:基本框架

微信小程序——1文件的认识

微信小程序架构篇

01——微信小程序官方demo讲解——文件结构