微信小程序

结构 WXML

样式 WXSS

逻辑 javascript

配置 JSON

结构文件

pages====

utils ==== 写公共方法

app.js项目入口文件

app.json 公共设置（全局配置文件）

app.wxss全局样式

project.config.json  小程序详情设置

7.配置文件介绍

全局配置（所有页面路径，界面表现，网络超时事件，底部tab）

pages 路由设置（app.json ）

window 全局的一些配置 也就是浏览器

tabBar(如果我们小程序是多页面应用，通过配置它切换页面)

 

  "tabBar": {
    "color":"#EEEEE0",
    "selectedColor": "#FF4040",
    "backgroundColor": "#8B8682",
    "boedearColor": "black",
    "list": [
          {
          "pagePath": "pages/index/index",
          "text": "text",
          "iconPath": "icons/1.png",
          "selectedIconPath": "icons/2.png"
        },
        {
          "pagePath": "pages/logs/logs",
          "text": "text2",
          "iconPath": "icons/1.png",
          "selectedIconPath": "icons/2.png"
        }
      ]
    },

页面配置

特别像全局中的window配置项的内容

8.视图层

页面展示饿标签语言 WXML。 结合基础组件，事件系统。构建页面结构

<view>
hello word || {{msg}}
</view>
<view>{{person.height}}</view>
<view>{{person.name}}</view>
<view data-id="{{title}}" ></view>   //标签内外都可以拿到data数据

属性中一定要加{{}}
<view><checkbox checked="{{true}}"></checkbox></view> 

运算

简单数学运算 以及三元

//sanyuan
<view><checkbox checked="{{ischecked ? false : true}}"></checkbox></view> 

//简单运算 以及字符串拼接
<view>{{1 + 10}}</view>
<view>{{num + num}}</view>
<view>{{msg + title}}</view>

逻辑判断(花括号和引号之间不能有空格，会被解析成字符串)

<view><checkbox checked="{{num<100}}"></checkbox></view>
<view><checkbox checked=" {{num<100}}"></checkbox></view>

//两个结果相反

列表渲染

wx：for

<view wx:for="{{array}}" wx:for-index='key' wx:key="key">
  {{item}}
</view>

 WXSS

rpx尺寸单位（响应式自动适配）     规定宽度750rpx

当设计图为750px  可以用rpx一比一  达到自适应

样式导入

@import导入相对路径

内联样式

和css一样 但是可以用data中数据作为变量值 {{变量}}

选择器

目前支持的选择器还不多 # 。 tag 

10.基本组件（非常重要）

1.view（类似div）

手指按下去增加一个样式

<view hover-class="box1">666666666666666</view>

2.text(类似span 行元素)

不能嵌套别的 只能嵌套text

slectable  是否可选
 decode             是否解码

3.image（img区别很大）

默认320X240px

写法不同

不支持背景图片写法 背景图片和图片的融合体

<view>
  <image src="../../icons/2.png" mode="有很多定位缩放功能"></image>
</view>

4.swiper

内置轮播图组件

默认 width 100% 高度150px

swiper-item

宽高默认100%

<swiper 一些乱七八糟属性名>
  <swiper-item>
    <image src="./qq.png" mode="widthFix"></image> 
  </swiper-item>
    <swiper-item>
    <image src="./qqq.png" mode="widthFix"></image> 
  </swiper-item>
    <swiper-item>
    <image src="./qqqq.png" mode="widthFix"></image> 
  </swiper-item>
</swiper>

5.navigator组件 （像以前的a标签）

target 跳转自己还是别人

url 跳转路径

open-type 跳转方式

<navigator url="../index2/index2" open-type="navigate">
  return不关闭当前 不允许taber页面
</navigator>
<navigator url="../index2/index2" open-type="redirect">
  return关闭当前
</navigator>
<navigator url="../index/index" open-type="switchTab">
  return跳到tabar页面，关闭其他所有非taber页面
</navigator>
<navigator url="../index/index" open-type="reLaunch">
  return关闭所有页面 跳转一个新的页面
</navigator>

6.视频组件（像video标签）

<video src="./更美的是风景.mp4" controls></video>

11.自定义组件

组件类似一个页面  四部分组成

1.创建组件 component文件夹

2.声明组件 ，json文件中进行自定义组件声明

component： tru e

3.编辑组件

4.引用组件  父组件 。json

{
  "usingComponents": {
    "header": "../../components/header/header"
  }
}