持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情
app .json 文件
pages : 用来记录当前小程序所有页面的路径 window: 全局定义小程序所有的背景色,文字颜色等 style : 全局定义小程序组件所使用的样式版本 sitemapLocation : 用来指明sitemap.json的位置
sitmap.json文件 微信开放小程序内搜索 当搜索的内容与相应内容匹配时就会
wxml与html的区别
#标签名称不同 html( div,span,img,a) wxml(view,text,image,navigator)
#属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
#提供了类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
wxss和css的区别
#新增rpx尺寸单位
-
css中需要手动进行像素单位的换算，例rem
-
wxss在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算 #提供了全局的样式和局部样式
-
项目根目录中的app.wxss会作用于所有小程序页面
-
局部页面的.wxss样式仅对当前页面生效 #wxss仅支持部分CSS选择器
-
.class和#id
-
element
-
并集选择器，后代选择器
-
::after 和::befor等伪类选择器
scroll-view组件
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss中: (给予一定的高度 就能使其滚动)
/* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightblue;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
.container1{
border:1px soild red;
width: 100px;
height: 100px;
}
swiper和swiper-item组件的使用
轮播图的使用
<swiper class="swiper-container" indicator-dots indicator-color="white"indicator-active-color="gray"autoplay interval="3000" duration="500" circular="true" previous-margin="0px" >
<!-- 第一个轮播图 -->
<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>
/* pages/list_images/list_images.wxss */
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
.swiper-container swiper-item:nth-child(1){
background-color: lightgreen;
}
.swiper-container swiper-item:nth-child(2){
background-color: lightblue;
}
.swiper-container swiper-item:nth-child(3){
background-color: lightpink;
}
