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

项目结构 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项，并保存

新建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

实现如下效果

实例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

实现如下滚动效果：

实例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组件的常用属性

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实例

效果如下：

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组件

先来个实例：

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接收结果

posted @ 2022-01-08 19:46 码农要战斗阅读(123) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

MrFeng

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

目录

项目结构 top

页面组成 top

json 配置文件 top

app.json

project.config.json

sitemap.json

每个页面的.json

实例

优雅地新建页面

wxml top

标签名称

属性结点

模版语法

wxss top

支持rpx尺寸单位

提供全局样式和局部样式

仅支持部分css选择器

js文件 top

宿主环境 top

小程序宿主环境

通信主体

通信模型

运行机制

组件 top

常见视图容器

实例1

实例2

实例3

swiper组件的常用属性

表单组件

实例

其他常用组件

button实例

image组件

API

公告