01微信小程序-基础篇

1.小程序项目的结构

├── pages ······································ 【目录】存放所有的小程序页面
│   │── index ···································· 【目录】index 页面
│   │   ├── index.wxml ······························· 【文件】 index 页面的结构
│   │   ├── index.js ································· 【文件】 index 页面的逻辑
│   │   ├── index.json ······························· 【文件】 index 页面的配置
│   │   └── index.wxss ······························· 【文件】 index 页面的样式
│   └── logs ····································· 【目录】 logs 页面
│       ├── logs.wxml ································ 【文件】 logs 页面的结构
│       └── logs.js ·································· 【文件】 logs 页面的逻辑
└── utils ······································ 【目录】 存放小程序中用到的工具函数
├── app.js ····································· 【文件】 小程序逻辑
├── app.json ··································· 【文件】 小程序的公共配置
├── app.wxss ··································· 【文件】小程序公共样式表
├── project.config.json ························ 【文件】 开发工具配置文件

说明：

• app.js 是小程序的入口文件，运行小程序，第一个被运行的就是 app.js
• app.json 是小程序的全局配置文件，对小程序每个页面生效
• app.wxss 是小程序的全局样式文件，对小程序每个页面生效
  注意：
• 对于小程序运行而言，app.js 和 app.json 是必不可少的
• 对于小程序页面而言， .js 和 .html 文件是必不可少的

2.小程序页面的结构

001 - 小程序页面和 Vue 组件的对比

• 每个 .vue 文件，是由 template 模板结构、script 行为逻辑、style 样式三部分组成的
• 每个小程序页面，是由 .wxml 结构、.js 逻辑文件、.json 配置、.wxss 样式表这四部分组成的
  image.png

002 - 小程序页面中每个文件的作用

• .wxml : 用来描述当前这个页面的标签结构，同时提供了类似于 Vue 中指令的语法
• .js : 用来定义当前页面中用到的数据、交互逻辑和响应用户的操作
• .json : 用来定义当前页面的个性化配置，例如，为每个页面单独配置顶部颜色、是否允许下拉刷新等
• .wxss : 用来定义样式来美化当前的页面

3.创建小程序页面

• 在 pages 目录上右键，选择 “新建目录”，输入目录名称
• 在新建的目录上，再次右键，选择 “新建 page” ，输入 page 名称

注意：

• 输入 page 名称以后，会自动创建四个文件

4.修改小程序项目的默认首页

• 打开 app.json 全局配置文件，找到 pages 节点。这个 pages 节点是一个数组，存储了项目中所有页面的访问路径。其中，pages 数组中第一个页面路径，就是小程序项目的默认首页。
• 所以只需要修改 pages 数组中路径的顺序，就可以可修改小程序的默认首页。

5.text文本组件的用法

小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的小程序 <br />

小程序中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

001 - text 组件的属性

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：ensp、emsp、nbsp
decode	boolean	false	否	是否解码

注： text 组件详细文档

• text 组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中

002 - 代码案例

<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>web</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>H  a  c  k</text>
  </view>
  <view>
    <text space='emsp'>H  a  c  k</text>
  </view>
  <view>
    <text space='nbsp'>H  a  c  k</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解码 -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

6.view视图容器组件的用法

View 视图容器， 类似于 HTML 中的 div

001 - 组件的属性

image.png
注：View 的详细文档

002 - 代码案例

<view hover-class='box1'>
  <view
    hover-stop-propagation='true'
    hover-class='box'
    hover-start-time='2000'
    hover-stay-time='3000'>
    box1
  </view>
</view>

7.button按钮组件的用法

001 - 组件的属性

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

注：Button 组件的详细文档

• button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

002 - 案例代码

<button size='mini' type='primary'>前端</button>
<button size='mini' type='default' disabled='true'>前端</button>
<button size='mini' type='warn' loading='true'>前端</button>

8.input文本输入框组件的用法

001 - input 组件属性

属性名	类型	默认值	说明
value	String	.	输入框的初始内容
type	String	'text'	input 的类型
password	Boolean	false	是否是密码类型
placeholder	Sting	.	输入框为空时占位符
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置 -1 时不限制最大长度

注：input 组件的详细文档

002 - 案例代码

<input placeholder='111' type='idcard' placeholder-style="color: skyblue" />

9.image图片组件的用法

001 - image 组件常用的属性

• src -- 支持本地和网络上的图片
• mode -- 指定图片的裁剪、缩放的模式
  注意：image 图片组件详细文档
• image 组件默认的宽度是 300px 、高度是225px
• image组件中二维码/小程序码图片不支持长按识别

002 - 案例代码

<image src='/assets/5.jpg' mode='aspectFit'></image>
<image src='https://wx.qlogo.cn/mmhead/Q3auHgzwzM7teJKyb7Oicw6x2rDiaD5BkDPFP2kccFO6a566TzzUyUgA/0' mode='widthFix'></image>

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用来决定 WXML 的组件应该怎么显示；
WXSS 具有 CSS 大部分特性；
WXSS 对 CSS 进行了扩充以及修改，以适应微信小程序的开发；
与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位

• 样式导入

  
  image.png

WXSS目前支持的选择器

• 标签选择器
• id选择器
• class选择器
• 伪类选择器
• data-*属性选择器
• :nth-of-type() 等常用的 css3 选择器
• 其他…
  注： wxss详细文档

案例代码

view {
  font-size: 12px;
}

#box {
  color: skyblue;
}

.box {
  color: lightcoral;
}

.box1::before {
  content: '加油';
  color: lightgreen;
}

view:nth-of-type(4) {
  color: lightseagreen;
}

[data-color='pink'] {
  color: pink;
}

rpx尺寸单位

rpx（responsive pixel）: 是微信小程序独有的、解决屏幕自适应的尺寸单位。

• 可以根据屏幕宽度进行自适应。不论大小屏幕，规定屏幕宽为750rpx。
• 通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配
  注：rpx 单位详细文档

rpx与px之间的换算

以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素
也就是 1rpx = 0.5px = 1 物理像素

设备	rpx 换算 px (屏幕宽度/750)	px 换算 rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

那么也就是说：如果在iPhone6上，
如果要绘制宽100px，高20px的盒子，换算成rpx单位，
宽高分别为 200rpx 和 40rpx
注：rpx 单位详细文档

rpx 和 iPhone6 设计稿的关系

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
官方建议：
开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
如果要根据 iPhone6 的设计稿，绘制小程序页面，可以直接把单位从 px 替换为 rpx 。
例如，假设 iPhone6 设计稿上，要绘制一个 宽高为 200px 的盒子，换算为 rpx 为 200rpx。

语法解释

• 使用 @import 语句可以导入外联样式表
• 语法格式：@import "wxss 样式表文件的相对路径"

@import 样式导入

语法解释

• 使用 @import 语句可以导入外联样式表
• 语法格式：@import "wxss 样式表文件的相对路径"

案例代码

@import "/assets/common/common.wxss";
/* @import "../../assets/common/common.wxss"; */

.box {
  width: 375rpx;
  height: 375rpx;
  background-color: skyblue;
}

局样式和局部样式

• 1. 全局样式
     定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
• 2. 局部样式
     在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
     注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果！