微信小程序之入门

      小编最近报名了腾讯的高校微信小程序大赛，既然报名了，就善始善终吧。虽说有一些HTML基础，但是不管是学什么，都不会一直都顺利的，小编在自学的时候曾遇到过不少坑，希望新人们看到我的博客以后可以少走些弯路吧！

PS：由于小编水平有限，博客中如果有写不对的地方，欢迎指正！

在开始之前，如果你要做一个小程序的话，那么首先要确定方向(你要做一个什么样的小程序，它的架构是什么)

好了，我们开始吧！

知识点重要程度分为五级：*、**、***、****、*****

1.基本知识

小程序的开发总的来说可以分为三部分,即WXML，WXSS以及JS，其中WXML与HTML类似，WXSS与CSS类似，JS亦然。

基本容器 ****

关键词：view、hover-class、hover-start-time

语法及代码：

【wxml】     注:wxml代码

<view class=’box’  hover-class=’boxh’  hover-start-time=’50’>       注:view与div类似，是一个盒子模型

</view>

【wxss】     注:样式

.box{

  width:100%;

  height:300rpx;

  background-color:orangered;

}

.boxh{

  height:400rpx;

  background-color:green;

}

 

2. 滚动视图容器 ***

关键词：scroll-view、view、scroll-y、scroll-top、scroll-into-id=’’

语法及代码：

【wxml】

<scroll-view class=’sc1’  scroll-y  scroll-top=’120’/scroll-into-view=’v3’>    

  <view  id=’v1’>1</view>

  <view  id=’v2’>2</view>

  <view  id=’v3’>3</view>

  <view  id=’v4’>4</view>

</scroll-view>

 

【wxss】

.sc1{

  width:100%;

  height:300rpx;

}

.sc1 view{

  width:100%;

  height:250rpx;

  background-color:green;

}

 

 

3.轮播页 *****

关键词：swiper、indicator、indicator-active-color、autoplay

语法及代码：

【wxml】

<swiper  indicator-active-color=’white’  autoplay=’true’  circular=’true’  current=’{{ currentview }}’ / ’1’>

  <swiper-item>

<view>1</view>

  </swiper-item>

  <swiper-tiem>

<view>2</view>

  </swiper-item>

  <swiper-item>

    <view>3</view>

  </swiper-item>

  <swiper-item>

<view>4</view>

  </swiper-item>

</swiper>

【wxss】

swiper{

  width:100%;

  height:350rpx;

}

view{

  height:350px;

  background-color:orangered;

}

【js】

data:{

currentview:2

}

 

4.icon图标 ****

关键词：icon、success_no_circle、info、warn、waiting、cancel、download、search、clear

语法及代码：

【wxml】

<view>

  <icon type=’success’/>

  <icon type=’success_no_circle>

  <icon type=’info’/>

  <icon type=’warn’/>

  <icon type=’waiting’/>

  <icon type=’cancel’/>

  <icon type=’download’/>

  <icon type=’search’/>

  <icon type=’clear’/>

</view>

<view>

  <icon type=’clear’ size=’23’/>

  <icon type=’clear’ size=’40’ color=’red’ />

  <icon type=’clear’ size=’60’ color=’rgb(0,0,255)’/>

</view>