前言

我目前正在做一个个人博客的微信小程序版本，刚开始还是有点紧张的，毕竟我还没真正学过。不过之前接触过，web（网页制作）基础也还不错，所以决定试试。到今天为止，微信小程序页面基本完成了。感觉微信小程序和 web 制作没太大区别。今天就以我的项目博客为基础，总结一下 web 和微信小程序之间最让我欣赏的一些知识点。

如果想要完全理解下面的内容，你需要对 web 知识有一定的了解。而且后面的内容我主要写的是 web 和微信小程序的区别，并没有详细讲解其中的知识点，但是相信看完本文之后，对大家还是会有帮助的。

1. 两种标签的区别与联系 1.1 区别

HTML 中最常见的标签有哪些？

以下是一些熟悉的例子：

标签有很多，比如div，p，span，img，a，h1-h6等等，这里就不一一列举了，这里我们指的是网页中的html标签元素。

那么微信小程序又如何呢？

在我的微信小程序个人博客中，我基本使用这几个标签：

view、text等处理所有博客页面的标签元素，当然还有其他的标签元素。

1.2 联系方式

那么这两者之间有没有什么联系呢？

我在制作微信小程序页面的时候，把view当成了div，把之前的div+css布局改成view+css，并应用，效果都是一样的。把span改成text，实现文字换行，通过css样式，就可以达到想要的效果了。

当然还有我们的微信小程序和html里的img，微信小程序这个词虽然多了两个字母，但是功能和用法都是一样的。

总结：

虽然两者的标签元素不同，但是微信小程序中的标签同样可以按照制作网页的思路，独立完成微信小程序的页面制作。也就是说，微信小程序中的标签和 HTML 中的标签其实功能是一样的，只不过微信小程序中的标签没有 HTML 中的标签那么详细，但是其功能都包含了。

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

我在微信小程序上做个人博客的时候，需要用HTML做一个轮播的效果，好了，问题来了，怎么做呢？

在网页制作的技术上，我们有很多种方式来制作轮播的效果，最简单的就是直接用（这个是框架，不懂的可以去百度搜，这里就不普及了）现成的轮播效果，打补丁就能修改成自己想要的，也可以用js来写。

但是我是新手，对微信程序一窍不通，不知道该怎么写，该怎么办呢？

答案就在这里

微信小程序官方提供了组件供使用，也就是说你可以在微信小程序中像里面的轮播图一样使用该组件，然后根据官方文档中的组件描述，适当使用里面的属性，就能做出轮播图的效果了。这里就不赘述了，官方文档比我说的还好（手动捂脸）。

有兴趣的可以看一下：

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

.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 如何选择整个页面

当我们创建网页时，我们使用以下内容来设置整个页面的样式：

* 或 body 可以设置整个页面的样式。

例如：

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

但是在微信小程序中，这样会报错，不可行。所以在微信小程序中，引入了这样的标签样式选择，可以使用page来对整个页面进行样式设置。

例如：

page{ color:red; }

3.2 如何让盒子内容居中

我们来和网页的样式做个对比，在网页的CSS样式处理中，我们最常见的做法就是让它的高度等于行高，这样几乎就可以让内容垂直居中了。

例如：

div标签中有一行文字

<div>上下居中</div>

使用等于行高的高度

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

使用上面的方法，我们可以将内容居中。但是微信小程序中没有line-属性，那么如何实现呢？

这里不得不提一下 flex。首先我们必须将这个 div 框设为弹性框，然后使用 -item: 我们几乎可以将框的内容垂直居中。如果这不起作用，我们需要添加 -: 属性。

以下是我用来将框置于页面中心的场景。

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

影响：

以下是关于弹性布局使用的一些细节：

3.3 尺寸单位的使用

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

官方文档说明：

rpx()：可以根据屏幕宽度进行适配，屏幕宽度指定为，例如上图，屏幕宽度为，一共有750个物理像素，那么 = = 750个物理像素，1rpx = 0.5px = 1个物理像素。

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

在web中我们可以通过js操作dom来让相应的元素产生相应的效果，但是在微信小程序中js无法操作dom对象。那么在微信小程序中我们怎样才能用js来制作出我们想要的效果呢？

思路：我们使用{{}}来绑定变量，达到想要的效果

我以我的博客微信小程序版本为例：

例如：我想实现下拉效果

首先我们在wxml中编写代码，并在我们的js中绑定变量

<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也不会难。唯一不同的就是通过绑定变量来实现你想要的效果。

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

很庆幸大家能看到我的博客，希望通过分享技术文章、其他专题文章给大家，让我的学习成长之路变得有趣起来，在提升自己的同时，也希望能够帮助大家增长见识，哈哈哈，我是不要脸的菜鸟，不管怎么样，我都会努力的。