微信小程序开发-起步

小程序项目结构

1.基本组成结构

1. pages用来存放所有小程序页面
2. utils用来存放工具性质的模块
3. app.js 小程序项目的入口文件
4. app.json 小程序项目的全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json 用来配置小程序及其页面是否允许被微信索引

2.小程序页面的组成成分

小程序官方建议把小程序页面都存放在page目录中，其中每个页面由四个基本文件组成

1. .js文件 （页面的脚本文件，存放页面的数据、事件处理函数等）
2. .json文件 （当前页面的配置文件，配置页面的外观、表现等）
3. .wxml文件 （当前页面的模板结构文件）
4. .wxss文件 （当前页面的样式表文件）

JSON配置文件

1.4种json文件

1. 项目根目录的app.json文件
2. 根目录中的project.config.json文件
3. 根目录中的sitemap.json文件
4. 每个page中的json配置文件

2. app.json文件

当前小程序的全局配置，包括小程序的页面路径，窗口外观，界面表现，底部Tab等。

配置内容：

1. pages：记录当前小程序的所有路径
2. window：小程序所有页面的背景色、文字颜色等
3. style：小程序组件所使用的版本样式
4. sitemapLocation：指明sitemap.json的位置

3.project.config.json 文件

project.config.json 是项目配置文件，记录我们对小程序的个性化配置，例如：

• setting 中保存了编译相关配置
• projectname 项目名称
• appid 保存小程序的账号ID

4.sitemap.json 文件

小程序内搜索，类似PC网页中的SEO。该文件用来配置小程序页面是否允许微信索引。

5. 页面的 .json 配置文件

小程序中的每个页面，可以使用.json文件来对本页面窗口外观进行配置，页面中的配置项会覆盖app.json中window的配置项。

6.新建小程序页面

在app.json->pages 中新增页面的存放路径，小程序开发者工具自动帮助自动创建对应页面文件

例如，新建list文件夹，在pages中新增：

"pages/list/list"

即可新建list文件夹并且内含list.js , list.json , list.wxml , list.wxss。

7.修改项目首页

只需调整app.json->pages 数组中页面路径的前后顺序，即可修改项目的首页。第一位的页面当作项目首页进行渲染。

WXML模板

1.什么是WXML

WXML(Weixin Makeup Language) 是小程序框架设置的一套标签语言，用来构建小程序页面的结构，作用类似网页开发中的HTML。

2.WXML与HTML区别

1. 标签名称不同

• HTML(div, span, img, a)
• WXML(view, text, image, navigator)

2. 属性节点不同

• 超链接

3. 提供了类似vue中的模板语法

• 数据绑定
• 列表渲染
• 条件渲染

WXSS样式

1.什么是WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式，类似网页开发中的CSS。

2.WXSS和CSS区别

1. 新增了rpx尺寸单位
2. 提供了全局样式和局部样式
3. WXSS仅支持部分CSS选择器

JS逻辑交互

1. .js文件

1. app.js

• 是整个小程序的入口文件，通过调用App( )函数来启动小程序。

2. 页面的js文件

• 页面的入口文件，通过调用Page( )函数来创建并运行页面。

3. 普通js文件

• 普通的功能模块文件，用来封装公共的函数或属性供页面使用。

小程序的宿主环境

包含内容：

1. 通信模型
2. 运行机制
3. 组件
4. API

通信模型

1.通信主体

小程序的通信主体是渲染层和逻辑层

1. WXML模板和WXSS样式工作在渲染层
2. JS脚本工作在逻辑层

2.小程序的通信模型

1. 渲染层与逻辑层间的通信

• 由微信客户端进行转发

2. 逻辑层和第三方服务器之间的通信

• 由微信客户端进行转发

3. 小程序启动过程

1. 小程序代码包下载到本地
2. 解析app.json全局配置文件
3. 执行app.js小程序入口文件，调用App( )创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

4. 页面渲染过程

1. 加载解析页面的.json配置文件
2. 加载页面的wxml模板和wxss样式
3. 执行页面的.js文件，调用Page( )创建页面实例
4. 页面渲染完成

组件

1. 组件分类

小程序中的组件也是宿主环境提供的，开发者可以基于组件快速搭建页面结构。

组件分为了9大类：

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

2.常用视图容器类组件

1. view

• 普通视图区域
• 类似HTML中的div，是一个块级元素
• 用来实现页面的布局效果

2. scroll-view

• 可滚动的视图区域
• 用来实现滚动列表效果

3. swiper和swiper-item

• 轮播图组件和轮播图item组件

view组件的基本使用

1. 编写wxml文件

<text>横向布局</text>
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

2. 编写wxss文件

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: aquamarine;
}
.container1 view:nth-child(2){
  background-color: blueviolet;
}
.container1 view:nth-child(3){
  background-color: rgb(216, 66, 66);
}
.container1{
  display: flex;
  justify-content: space-around;
}

scroll-view组件的基本使用

1.wxml文件

<text>滚动组件</text>
<!--scroll-x 横向滚动-->
<!--scroll-y 纵向滚动-->
<!--使用纵向滚动时，要给scroll-view一个固定高度-->
<scroll-view class="container2" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

2.wxss文件

.container2 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container2 view:nth-child(1){
  background-color: aquamarine;
}
.container2 view:nth-child(2){
  background-color: blueviolet;
}
.container2 view:nth-child(3){
  background-color: rgb(109, 50, 50);
}
.container2{
  border: 1px solid crimson;
  height: 120px;   /*纵向滚动需要设置高度*/
  width: 100px;
}

swiper和swiper-item组件的基本使用

1. wxml文件

<!--pages/list/list.wxml-->
<!--轮播图-->
<!-- indicator-dots属性：显示面板指示点 -->
<text>轮播图</text>
<swiper class="swiper-container" indicator-dots>
<swiper-item>
  <view class="item">A</view>
</swiper-item>
<swiper-item>
  <view class="item">B</view>
</swiper-item>
<swiper-item>
  <view class="item">C</view>
</swiper-item>
</swiper>

2. wxss文件

.swiper-container{
  height: 150px;/*组件高度*/
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
/* 背景颜色不显示原因：child()后面加空格再加.item */
swiper-item:nth-child(1) .item{
  background-color:royalblue;
}
swiper-item:nth-child(2) .item{
  background-color: rgb(65, 225, 212);
}
swiper-item:nth-child(3) .item{
  background-color: rgb(221, 120, 199);
}

3. swiper组件的常用属性

属性	类型	默认值	说明
indicator-dot	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否衔接滑动

3. 常用的基础内容组件

1. text

• 文本组件
• 类似HTML中的span标签，是一个行内元素

2. rich-text

• 富文本组件
• 支持把HTML字符串渲染为WXML结构

text组件的基本使用

• 通过text组件的user-select属性，实现长按选择文本内容的效果：

<text user-select>12345678</text>

rich-text组件基本使用

• 通过rich-text组件的nodes属性，可以把HTML字符串渲染成对应的UI结构：

<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

4. 其他常用组件

1. button

• 按钮组件
• 功能比HTML中的button按钮丰富
• 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

2. image

• 图片组件
• image组件默认宽度为300px，高度约240px

3. navigator

• 页面导航组件
• 类似HTML中的a链接

button组件基本使用

<view>----通过type类型----</view>
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button></button>

<view>----小尺寸按钮----</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>

<view>----plain镂空按钮----</view>
<button plain>普通按钮</button>
<button type="primary" plain>主色调按钮</button>

image图片组件基本使用

<image></image> <!--空图片-->
<image src="/adress/pic"></image>

image组件的mode属性

mode属性用来指定图片的裁剪和缩放模式，常用mode属性：

mode值	说明
scaleToFill	(默认值)缩放模式，不保持纵横比，拉伸填满image元素
aspectFit	缩放模式，保持纵横比缩放，可以完整显示图片
aspectFill	缩放模式，只保持短边能完整显示
widthFix	缩放模式，宽度不变，高度自动变化，保证原图长宽比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图长宽比不变

API

1. 小程序API概述

小程序中的API是宿主环境提供的，开发者可以方便地调用微信提供的功能。如获取用户信息，支付等。

2.三类API

1. 时间监听API

• 特点：以on开头，用来监听某些事件的触发
• 举例：wx.onWindowResize(function callback)监听窗口尺寸的变化

2. 同步API

• 特点1：以Sync结尾的API都是同步API
• 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
• 举例：wx.setStorageSync(“key”,”value”)向本地存储中写入内容

3. 异步API

• 特点：类似于jQuery中$.ajax(option)函数，需要通过success、fail、complete接收调用的结果
• 举例：wx.request()发起网络数据请求，通过success回调函数接收数据