微信小程序与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' },{ img_url: '../../imgs/index/photo/3.jpg' },{ img_url: '../../imgs/index/photo/4.jpg' }]}})

总结：

组件是前端web制作中html+css+js原生中没有的，应该是参考了其它框架，然后给了一个组件的使用，不得不说是非常方便的。

3、css样式

在做css样式中，给我印象最深刻的有以下几个：
1.怎么选择整个页面
2.怎么让盒子里面的内容上下居中
3.尺寸单位的使用

3.1 怎么选择整个页面

我们在web页面制作中，给整个页面做样式的使用，我们会用到：
*或者body就可以给整个页面做样式。
例如这样：

*{color:red;
}
//或者这样
body{color:red;
}

但是在微信小程序中,这样写就会报错，是不可行的，那么在微信小程序中，就引入了这样一个标签样式选择，使用page就可以给整个页面做样式处理了
例如：

page{color:red;
}

3.2 怎么让盒子里面的内容上下居中

我们还是和web的样式做比较，在web的css样式处理中，我们最通常的做法，无非就是让其高度等于行高，就可以几乎让里面的内容上下居中了。
例如：
在div标签中有一行字

<div>上下居中</div>

使用高度等于行高

div{height:30px;line-height:30px;
}

使用上述，我们就可以使得里面的内容居中。但是微信小程序里面没有line-height这个属性，那么怎么做呢？

这里我们就要提到flex了，我们首先得让这个div盒子变为弹性盒子，然后配合align-item:cener就几乎可以使得盒子里面的内容上下居中，如果还不行的话，就还需要加入justify-content: center这个属性。
下面是我使用的一个场景，让其input框在页面上下居中和左右居中

.search{width: 100%;position: relative;background-color: white;height: 120rpx;display: flex;align-items: center;justify-content: center;
}

效果：

这里有关于弹性布局的详细使用：

https://www.cnblogs.com/huihuizhang/p/7998902.html

3.3 尺寸单位的使用

在web页面制作中，尺寸单位我们一般使用的是px，但是在微信小程序中，我都是使用的rpx，别问，问就是它最好。

官方文档的说明：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

4、微信小程序中js的使用

在web中，我们可以利用js操作dom来让其对应的元素做出相应的效果，但是微信小程序中js并不可以操作dom对象，那么我们如何来用js在微信小程序中做出我们想要的效果呢？

思路：我们通过用{{}}来绑定变量，从而实现我们想要的效果

我用我做的微信小程序版的博客来举个例子：
例如：我想要实现一个下拉的效果
首先，我们在wxml中写好代码，并绑定好我们js中的变量noticeArr

<view class="box"><block wx:for="{{noticeArr}}"><view class="notice" ><view class="notice-left">{{item.title}} <view class="notice-time">{{item.time}}</view></view><view class="notice-right" bindtap="change" id="{{index}}"><image src="{{item.isChange?'../../imgs/notice/down.png':'../../imgs/notice/up.png'}}"></image></view></view><view class="notice-content {{item.isChange?'show':'hide'}}">  {{item.content}}</view></block>
</view>

wxss中做好样式

/* pages/notice/notice.wxss */
.box{width: 100%;background-color: #eee;
}
.notice{background-color: white;display: flex;height: 100rpx;border-bottom: 1px solid #eee;justify-content: space-between;flex-wrap: wrap;align-items: center;padding: 0 20rpx;font-size: 34rpx;
}
.notice .notice-time{font-size: 20rpx;margin-left: 10rpx;display: inline-block;
}
.notice image{width: 50rpx;height: 50rpx;
}
.notice-content{width: 100%;height: 400rpx;font-size: 28rpx;background-color: #eee;letter-spacing: 4rpx;
}
.hide{display: none;
}
.show{display: block;
}

最后，我们通过绑定变量的方式，来操作我们想要的标签元素

Page({/*** 页面的初始数据*/data: {noticeArr:[{title:'关于停服公告',time:'2020-5-7',content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',isChange:false},{title: '最新公告',time: '2020-5-7',content: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',isChange: false},{title: '最新公告',time: '2020-5-7',content: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',isChange: false},{title: '最新公告',time: '2020-5-7',content: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',isChange: false},{title: '最新公告',time: '2020-5-7',content: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',isChange: false}]},// 更改下标change(e){//找到对应noticeArr中的数组对象var index = e.currentTarget.id//找到对应noticeArr中的数组对象的属性var isTrue = "noticeArr[" + index +"].isChange";//通过前台绑定变量，来获取isChange的值var boo = this.data.noticeArr[index].isChange;//改变对应的值this.setData({[isTrue]: !boo});}})

效果

总结：

微信小程序中js使用与web中的js可以说是完全不同的，但是它却跟vue超级类似（就用这个词），所以你知道怎么使用vue，那么微信小程序的js也就不难了，无法就是通过绑定变量的方式去实现你想要的效果。

好了，今天的总结就到此结束了

很有幸大家能看到我的博客，希望通过和大家分享技术文章和其它话题文章，让我的学习成长路线变得有趣，并且提高自己的同时，也希望能帮助大家增长知识。哈哈哈，我个菜鸟太不要脸了，不管了，我会加油的