微信小程序基础知识总结

微信小程序

简称: 小程序,是一种不需要安装即可使用的应用
特点: 免安装 操作更接近原生APP 依托微信使用 不占内存 易传播

一、小程序目录结构

├── app.js     注册一个小程序
├── app.json   全局配置(窗口的表现, 网络超时时间, 页面路径...)  
├── app.wxss   设置微信小程序的全局样式 
├── pages      存放小程序所有页面,每个页面最多有4个文件
│   │── index
│   │   ├── index.wxml    页面结构
│   │   ├── index.js      页面逻辑
│   │   ├── index.json    页面配置
│   │   └── index.wxss    页面样式
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils                  存放工具函数, 用来代码复用
└── project.config.json    保存微信开发者工具的配置信息 

二、全局配置

Pages 注册微信小程序的所有页面路径
tabBar 指定导航栏的表现
networkTimeout 设置各个网络请求的超时时间
debug 开启debug模式,可以打印调试信息
navigationStyle 设置导航栏标题颜色
enablePullDownRefresh 设置小程序全局和单个页面的下拉刷新表现
disableScroll 设置页面是否开启滚动

三、小程序开发框架

基本构成: wxml、wxss、js、json

1.WXML

WXML是框架设计的一套标签语言,结合组件,wxs和事件系统, 可以构建出页面的结构

<标签名 属性=""…></标签名>

注意: 标签必须闭合 属性大小写敏感
特性:
(1).数据绑定

<view>
  <text data-name="{{Name}}">{{message}}</text>
</view>

Page({
  data: {
    message: 'Hello World',
    Name: 'Tom'
  }
})

(2).列表渲染

<view>
  <block wx:for="{{items}}" wx:for-item="item" wx:key="id">
    <view>{{item.name}}</view>
  </block>
</view>

Page({
  data: {
    items: [
      {name: 'A'},
      {name: 'B'},
      {name: 'C'}
    ]
  }
})

(3).条件渲染

<view>吃了么?</view>
<view wx:if="{{eat===1}}">
  还没
</view>
<view wx:elif="{{eat===2}}">
  吃了
</view>

Page({
  data: {
    eat: 1
  }
})

2.WXSS

WXSS是一套样式语言,用于描述WXML的组件样式
特点:
①尺寸单位: rpx 最终转换为rem
②样式导入
@import 外联样式导入

<view class="container">
  Hello World
</view>
/* index.wxss */
@import './assets.wxss';
.container {
  color: red;
}
/* assets.wxss */
.container {
  border: 1px solid black;
}

③选择器

选择器	样例	样例描述
.class	.container	选择所有拥有 class=“container” 的标签
#id	#name	选择拥有 id=“name” 的标签
element	view	选择所有 view 标签
element,element	p, text	选择所有 p 标签和 text 标签
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容