微信小程序与web页面制作的区别

前言

最近在做一个微信小程序版的个人博客，本来我还有点胆颤，毕竟也没正儿八经的去学一下，不过我之前接触过，而且web方面（网页制作）的基础还可以，所以斗胆就试一试咯，到今天为止，微信小程序页面终于算是基本做完了，自我感觉微信小程序和web制作没什么很大的区别，今天就根据我的项目博客来总结一下，web和微信小程序两者中比较，让我体会最深的一些知识点。

如果想要完全看懂以下内容，您需要对web方面的知识有一定的了解。并且以下内容我主要写的是web和微信小程序两者之间的区别，并没有对知识点讲解很详细，但是我相信看完这篇文章，还是对您有帮助的

1、两者标签之间的差异与联系

1.1 差异

在html中，我们最常见的标签有哪些呢？

举一些大家都熟悉的例子：
div、p、span、img、a、h1-h6等等标签，这里就不一一例举了，这里是指的网页中html标签元素。

那么微信小程序呢？
在我制作的微信小程序的个人博客中，我基本用的这几个标签：
view、text、image、block，搞定了所有博客页面，当然还有其它的标签元素。

1.2 联系

那么他们两者有没有什么联系呢？

在我制作微信小程序页面的时候，我把view当做div看待，将以前的div+css布局改成view+css，进行套用即可，都是一样的效果，span换做成text，用来包裹文字，通过css样式，就可以做成我们预想的效果。
当然还有我们的微信小程序的image和html中的img，虽然微信小程序的单词多了2个字母，但是作用和用法都是一样的。

总结：

虽然两者的标签元素各不相同，但是微信小程序里面的标签，按照制作web页面的思想，也可以独立完成微信小程序的页面制作，也就是说，微信小程序里面的标签和html里面的标签作用其实一样，只不过微信小程序里面的标签没有html里面分的那么细，但是将其作用都囊括进来了。

2.微信小程序组件–轮播图的制作

在我制作我的微信小程序个人博客的时候，我需要做出html里面的轮播图的效果，好了，难题来了，怎么制作呢？

在web网页制作的技术，我们有很多方法可以弄出轮播图的效果，最简单不过的就是直接用bootstrap（这是一个框架，大家不懂可以去百度一下，这里就不给大家普及了）里面现成的轮播图效果，缝缝补补就能改成自己想要的，用js写也可以。
但是在微信程序中，我是一个啥都不懂的新手呀，不知道咋写，怎么办

答案来了
微信小程序官方给了一个组件的使用，那么就是说，你可以像用bootstrap里面的轮播图一样，用微信小程序里面的组件–swiper ，然后根据官方文档里面的组件说明，适当的用一下里面的属性，就可以做出轮播图的效果，这里我就不详细的说了，官方文档比我说的要好（手动捂脸）。

有兴趣的大家可以看一看：

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

这是我在我的个人博客中做的轮播图，看代码
index.wxml

<view class="banner">
    <swiper indicator-dots="true" autoplay="true" circular="true" class="swiper-box" interval="4000">
       <block wx:for="{
   
   {bannerArr}}" >
           <swiper-item class="banner-item">
               image src="{
   
   {item.img_url}}" mode="aspectFill"></image>
              </swiper-item>
           </block>
      </swiper>
</view>

js代码

Page({
   
   
  data: {
   
   
      bannerArr:[
              {
   
   img_url:'../../imgs/index/photo/1.jpg'},
              {
   
    img_url: '../../imgs/index/photo/2.jpg' },