微信小程序入门 学记

写在前面：分享技术，共同进步，有不足请见谅，相关意见可评论告知 ~

基于实战中学习，学习快乐中成长
.
时间会回答成长，成长会回答梦想

目录

• 避坑总结
  • 关于复选框
  • 列表渲染
  • 导入外联样式
  • 图片
  • 轮播图
  • 自定义组件

避坑总结

关于复选框

<view>
<checkbox checked="false"></checkbox>
</view>

正解：

<view>
<checkbox checked="{{false}}"></checkbox>
</view>

列表渲染

1、常规用法

<view>
  <view wx:for="{{arr}}" wx:key="{{index}}">
    {{index}} : {{item}}
  </view>
</view>

2、改进

<view>
  <view wx:for="{{arr}}" wx:key="{{index}}" wx:for-index="key">
    {{key}} : {{item}}
  </view>
</view>

3、渲染—个包含多节点的结构块 block最终不会变成真正的dom元素

<block>
  <view wx:for="{{arr}}" wx:key="{{index}}" wx:for-index="key">
    {{key}} : {{item}}
  </view>
</block>

导入外联样式

主体

编写

导入

图片

官方文档介绍
图片标签， Image组件默认宽度320pX、高度240px
注意：该标签其实是web的图片标签和背景图片的结合，并且不支持以前的veb中的背景图片的写法！！！

轮播图

官方文档参考
微信内置轮播组件
默认宽度 100% 高度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator -color	Color	rgba（0,0,0,.3）	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否采用衔接滑动是否采用衔接滑动

index.wxml 代码

<swiper autoplay indicator-dots indicator-color="white" indicator-active-color="blue" circular interval="3000">
  <swiper-item><image mode="widthFix" src="../../image/1.png"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="../../image/2.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="../../image/3.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="../../image/4.jpg"></image></swiper-item>
</swiper>

index.wxss 代码 控制样式

swiper{
  width: 100%;
  height: 150px;
}
/* swiper-item{

} */

image{
  width: 100%;
}

自定义组件

官方文档参考