微信小程序知识总结01

1.小程序的基本文件结构

（1）根目录下面有三个文件，app.js、app.json、app.wxss。一个小程序都必须有这三个文件，他们必须放在应用程序的根目录下面，否则小程序会提示找不到app.json文件。

（2）app.js，表示小程序的逻辑文件，app.json表示小程序的配置文件，app.wsxx，表示全局公共样式文件。

（3）每个页面都包含有四个文件，主要为.js、.wxml、.wxss、.json文件，wxml文件类似于我们熟悉的html文件，用来编写页面的标签和骨架，不同的是wxml文件里面的标签元素不可以使用html标签，只能使用小程序封装的一些组件。wsxx文件的作用类似于我们熟悉的css文件，json文件用来配置页面的样式和行为，js文件用来配置我们前端中的javaScript文件，用来编写小程序的页面逻辑。

wxml文件内容：

<!--pages/posts/post.wxml-->
<!--滑动视图容器界面-->
<swiper indicator-dots='true' autoplay='true' interval='1000'>
<!--
（1）indictor-dots表示用来显示面板指示点；
（2）autoplay表示用来显示自动播放；
（3）interval表示用来设置swiper-item的切换时间间隔；
（4）
 -->
<swiper-item>
<image src='/images/post/1.jpg'></image>
</swiper-item>
<swiper-item>
<image src='/images/post/2.jpg'></image>
</swiper-item>
<swiper-item>
<image src='/images/post/3.jpg'></image>
</swiper-item>
</swiper>
<view class='post-container'>
<view class='post-author-date'>
<image src='/images/avator/5.jpg'></image>
<text>Jan 28 2018</text>
</view>
<text class='post-title'>一只可爱的小猫</text>
<image src='/images/post/4.jpg'></image>
<text class='psot-content'>这是一只可爱的小猫咪，也就是我们经常所说的喵星人！</text>
<view class='post-like'></view>
<image src='/images/post/2.jpg'></image>
<text>The cat!</text>
<image src='/images/post/3.jpg'></image>
<text>The rabbit!!</text>
</view>

wsxx文件内容：

/* pages/posts/post.wxss */
swiper{
  width: 100%;
  height: 600rpx;
}

swiper image{
  width: 100%;
  height: 600rpx;
}

.post-container{
  flex-direction: column;
  display: flex;
  margin: 20rpx 0 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid  #ededed;
  padding-bottom: 5px;
}

.post-author-date{
  margin: 10rpx 0 20rpx 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
post-author-date image{
  width: 100%;
  height: 100%;
}
.post-author-date text{
  margin-left: 20rpx;
}
.post-image{
  width: 100%;
  height: 340rpx;
  margin-top: 15px;
}
.post-date{
  font-size: 26rpx;
  margin-bottom: 10rpx;
}
.post-title{
  font-size: 16rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
  margin-left: 10rpx;
}

.post-content{
  color: #666;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.post-like{
  display: flex;
  flex-direction: row;
  font-size: 13rpx;
  line-height: 16rpx;
  margin-left: 10rpx;
  align-items: center;
}

（4）我们在我们创建好的wxml文件中编写我们页面元素和一些标签元素，添加一些基本的组件和标签。

2.小程序所支持的CSS选择器

（1）.class，选择拥有class=‘name’的组件；

（2）#id，选择拥有id=‘name’的组件；

（3）element，元素选择器，选择所有view组件；

（4）：：after，view：：after，在view组件后面插入内容；

（5）：：befire,view：：before，在view组件前面插入内容；

需要注意的是：本地资源在wxss中是无法使用的。我们可以使用网络图片来代替本地图片。

3.Flex布局（弹性布局）

（1）主要作用在容器上，他将页面中的所有元素都包括起来。

（2）使用display：flex，将view变成一个弹性盒子。display-direction表示指定元素内的排列方向。这个属性可以为row(正向排列，沿着X轴方向排列)，row-reverse（反向排列，沿着X轴反方向排列），column（从上到下排列，沿着Y轴反方向进行布局），column-reverse（正向排列，沿着Y轴方向排列）；align-item表示定义元素在交叉轴上该如何对齐。

4.小程序自适应单位长度单位rpx，根据不同的模式进行大小的自适应。

5.全局样式文件app.wsxx文件，如果不想使用全局默认样式，那么只需要在相应的页wsxx文件中重新定义这个样式即可。小程序会优先选择页面的wsxx文件，而不是app.wsxx文件。

6.页面的根元素page，整个页面元素的配置、以及样式的显示。

7.app.json中的window配置项

（1）window表示当前窗口导航栏的配置。

（2）属性介绍

navigationBarTextStyle，配置导航栏文字颜色，只支持black/white；

navigationBarTitleText配置导航栏文字内容；

backgroundColor配置窗口颜色；

backgroundTextStyle下拉背景字体，仅支持dark\light

enablePullDownRefersh是否开启下拉刷新功能；

 "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false

微信小程序知识总结01

猜你喜欢