【微信小程序的开发】初步认识

目录

---

项目结构

页面组成

json配置文件

​ app.json

​ project.config.json

​ sitemap.json

​ 每个页面的json

​ 实例

wxml

​ 标签名称

​ 属性结点

​ 模块语法

wxss

​ rpx尺寸单位

​ 全局样式和局部样式

​ css选择器

js文件

宿主环境

​ 小程序宿主环境

​ 通信主体

​ 通信模型

​ 运行机制

组件

​ 视图容器

​ 表单组件

​ 其他常用组件

​ API

项目结构 top

---

• pages：放页面
• utils：放模块
• app.js：小程序入口文件
• app.json：小程序全局配置
• app.wxss：全局样式
• project.config.json：项目配置文件
• sitemap.json：配置小程序及其页面是否允许被微信索引

页面组成 top

---

• .js：【页面脚本文件】 存放页面数据，事件处理函数
• .json：【当前页面配置文件】 配置窗口外观。表现
• .wxml：【页面模块结构文件】
• wxss：【当前页面的样式文件】

json 配置文件 top

---

app.json

全局配置 所有页面路径、窗口外观、界面表现、底部tap等

• pages：记录所有小程序路径
• window：全局定义小程序所有页面背景色、文字颜色等
• style：全局定义小程序组件所使用的样式版本
• sitemaplocation：指明stiemap.json的位置

project.config.json

对开发者工具的个性化配置

• setting：保存编译器相关配置
• projectname：保存项目名称
• appid：保存小程序的账号id

sitemap.json

小程序页面是否允许被微信搜索

每个页面的.json

此页面的配置文件，会覆盖全局配置文件

实例

优雅地新建页面

当前有两个页面：index和logs，接下来新建一个list页面

操作方法：在app.json的pages数组中添加list项，并保存

保存后，pages目录下会多一个list文件

一点说明：仔细观察你的 编译器调试窗口，你会发现list页面似乎被覆盖了，如果你和我一样，将list页面写在pages数组的第一行，那编译器目前显示的就是index页面。就是说，页面的显示顺序和路径在pages数组的位置有关。

wxml top

---

标签语言，构建小程序页面结构

标签名称

• view ：实现布局
• text：文本元素
• image ：图像元素
• navigator：导航跳转

属性结点

<navigator url = "pages/home/home"></navigator>

模版语法

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

wxss top

---

样式语言

支持rpx尺寸单位

在不同大小的屏幕上自动单位换算

提供全局样式和局部样式

app.json 是全局样式

页面的.json 是局部样式

仅支持部分css选择器

• .class 和 #id
• element
• 并集选择器、后代选择器
• ::after 和::before 等伪类选择器

js文件 top

---

• app.js ：小程序项目入口，通过调用App() 方法启动整个小程序
• 页面的js文件：页面的入口文件，通过调用Page() 方法创建并允许此页面
• 普通的js文件：功能模块文件，封装公共函数或属性

宿主环境 top

---

程序运行所必须依赖的环境

所以微信是小程序的宿主环境

小程序宿主环境

• 通信模型
• 运行机制
• 组件
• API

通信主体

通信的主体的渲染层和逻辑层

通信模型

1、逻辑层和渲染层

2、逻辑层和第三方渲染器

均由微信客户端进行转发

运行机制

启动过程

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

页面渲染过程

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

组件 top

---

由宿主环境提供

常用组件

• 视图容器
• 基础内容
• 表单组件
• 导航组件

常见视图容器

• view：普通视图容器，块级元素，实现布局效果
• scroll-view：实现滚动的列表视图
• swiper和swiper-item：轮播图容器组件和轮播图项目组件

实例1

实现如下效果

首先要将list设置为首页，方法之前提过

修改list.wxml

<!--pages/list/list.wxml-->
<!--view 默认占满一行-->
<view class = "container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

修改list.wxss文件

/* 设置container的格式*/
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

/* 设置子container1的颜色*/
.container1 view:nth-child(1){
    background-color: lightblue;
}

.container1 view:nth-child(2){
    background-color: lightgreen;
}

.container1 view:nth-child(3){
    background-color: lightyellow;
}

.container1 {
    /* 横向放置*/
    display: flex;
   /* 分散对齐*/
   justify-content: space-around
}

实例2

实现如下滚动效果：

修改list.wxml

<!--轮播图区域-->
<!--indicator-dots 属性：显示面板指示点-->
<!--使用纵向滚动时，必须给scroll-view一个固定高度-->
<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>

修改list.wxss文件

/* 设置container的格式*/
.swiper-container{
    height: 150px; /* 设置轮播图容器高度*/
}

/* 设置item样式*/
.item {
    height: 100%;
    line-height: 150px;
    text-align: center;
}

/* item添加背景色*/
/* nth-child(1) .item 中间有一个空格，表示逗号*/
swiper-item:nth-child(1) .item{
    background-color: lightblue;
}

swiper-item:nth-child(2) .item{
    background-color: lightyellow;
}

swiper-item:nth-child(3) .item{
    background-color: lightgreen;
}

注意看和实例1的不同之处

实例3

实现轮播图效果：

修改list.wxml

<!--scroll-x属性：允许横向滚动-->
<!--scroll-y属性：允许纵向滚动-->
<!--使用纵向滚动时，必须给scroll-view一个固定高度-->
<scroll-view class = "container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

修改list.wxss文件

/* 设置container的格式*/
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

/* 设置子container1的颜色*/
.container1 view:nth-child(1){
    background-color: lightblue;
}

.container1 view:nth-child(2){
    background-color: lightgreen;
}

.container1 view:nth-child(3){
    background-color: lightyellow;
}

.container1 {
   border: 1px solid red;
   /* 给scroll-view固定高度*/
   height: 120px;
   width: 100px;
}

swiper组件的常用属性

表单组件

• text文本组件，行内元素
• rich-text富文本组件把html字符串渲染为wxml结构

实例

实现如下效果：

修改list.wxml

<!-- text 和 rich-text 的用法-->

<view>
    手机支持长按选中的效果
    <text user-select>985211</text>
</view>

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

使用rich-text的场景：当得到html文件时，需要渲染为wxml文件

注：手机的长按选中效果要在真机上测试

点预览：

其他常用组件

• button：按钮组件
• image：图片组件，默认宽300px，高240px
• navigator：页面导航组件

button实例

效果如下：

修改list.json：

<view> ~~~~~~~~~通过type指定类型~~~~~~~ </view>

<button>默认按钮</button>
<button type="primary">原始按钮</button>
<button type="warn">警告按键</button>

<view> ~~~~~~~~~~size = "mini"~~~~~~~~~~ </view>

<button size="mini">小按钮</button>
<button type="warn" size="mini">小warn</button>

<view> ~~~~~~~~~~plain镂空效果~~~~~~~~~~ </view>
<button plain>镂空</button>

image组件

先来个实例：

修改list.wxml：

<!--渲染空图片-->

<image></image>

<!--使用src指定图片位置-->
<image src="/pages/images/a.jpg" mode="widthFix"></image>

修改list.wxss：

image {
    border: lightblue 1px solid;
}

mode属性

• scaleToFill：默认值，使图片拉伸填充至整个image元素（不按比例缩放
• aspectFit：完整显示长边
• aspectFill：完整显示短边
• widthFix：宽度同image元素，高度自动变化
• heightFix：高度同image元素，宽度自动变化

我的思考：除非image元素和图片的比例一样，不然都是要缩放的图片的长宽、image元素的长宽及image元素的比例共五个标准，对应上面五个属性。

API

官方分为三大类

• 事件监听API：以on开头，监听某些事件的触发
• 同步API：以Sync结尾，结果是函数返回值或异常
• 异步API：需要通过success,fail,complete接收结果