wx小程序

JS知识

1.JS基本知识
2.JS函数
3.JS数组

微信小程序

.wxml：微信模板文件，类似网页开发的html文件。

.wxss：微信样式表文件，用于定于页面样式。

.js：脚本文件，代码逻辑写在这。

.json：静态数据配置文件。

index.json—定义当前页面
app.json—小程序全局配置

样式被写在index.wxml
装饰样式被写在index.wxss

<swiper class = lunbo>
 <swiper-item>
 <image> src ="/img/tupian1.jpg" </image>
 </swiper-item>
<swiper-item>
 <image> src ="/img/tupian2.jpg" </image>
 </swiper-item>
<swiper-item>
 <image> src ="/img/tupian3.jpg" </image>
 </swiper-item>
</swiper>

//swiper滚动图
//swiper class = lunbo创造类给予控制
//swiper-item页面，展示的图片
//<image> src ="/img/tupian3.jpg" </image>
图片=路径名

为物体加样式一般在index.wxss

.lunbo代表一个类


.lunbo
{
 width: 100%;
 height: 300px;
}
.lunbo swiper-item,.lunbo swiper-item image{
  width: 100%;
}
lunbo类下的每一元素都宽100%

[Index.wxml中]
padding设置内边距
例：.p{
    padding:2cm 4cm 3cm 4cm;
    }
只输入参数1：上下相同边距  只输入参数1和2：左右相同边距   
输入参数1，2，3：参数1变为上边距，2还是左右边距，3为下边距
输入1，2，3，4：分别为上下左右边距

[Index.wxml中]
button设置按钮
1.{type="menu"/type="subimt"/type="reset"
  subimt:将表单数据上传给服务器
  menu：打开一个由指定menu元素定义的菜单
  reset：重置所有组件为初始值
}
2.{loading="true"
   在文字前加入等待图标
}

[Index.wxml中]
checkbox选项组件
<checkbox class="checkbox1"  >
 这是个选项
</checkbox>
<!--disabled="false"不管里面输入true还是false都会被判断执行无法使用选项*/-->
<!--checked="false"不管里面输入true还是false都会被判断执行默认打勾*/-->

[app.json中] 
"window": {"navigationStyle" :"custom"}
自定义导航栏，只保留右上角胶囊按钮
"window": {"navigationStyle" :"default"}
保留默认样式 
定义此参数后其他导航栏参数无法使用 	

[Index.wxml中]
<view class="box">
<view class="box-title">
<text>热流道(10)</text>
<navigator class="see-all" url="/img/chuansong.png">查看全部</navigator>
</view>
</view>
navigator:页面链接   url链接

[Index.wxss中]
.box-title{
 display:  flex;
 //采用flex布局的元素，称为flex容器，他所有子元素自动成为容器成员，称为Flex项目
  flex-direction: row;
 //flex-direction 排列方向 ：row 水平向左   row-reverse 水平向右
 //				         column 垂直向上   column-reverse垂直向下
 //flex-wap 如何换行  :nowrap  不换行  wrap 换行，第一行在上  
 //                            wrap-reverse 换行，第一行在下
  justify-content: space-between;
// justify-content 在主轴上的对齐方式 ：flex-start 左对齐，第一个box在最左边
//                                    flex-end   右对齐，最后一个box在最右边
//									  center     居中对齐
//									  space-between 第一个在最左边，最后一个在最右边，其余的平均间隔排布
//									  space-around 全体平均分配  
}
.see-all{
  padding-right: 2em; 
//padding-创造一个与周围的间隔
//padding-right 创造与右边的间隔
}

[app.wxss中]
page{
  font-family: 楷体;
}
page是当前页面的布局掌控