微信小程序

今天我就来说说微信小程序的使用。可以查看微信公开文档

小程序提供简单高效的应用开发框架和丰富的组件和API，帮助开发者在微信中开发具有原生APP体验的服务。

小程序和普通Web开发的区别

小程序的主要开发语言是。与普通的Web开发相比，小程序的开发非常相似。对于前端开发者来说，从Web开发迁移到小程序开发的成本并不高，但两者还是有一些区别的。

Web开发渲染线程和脚本线程是互斥的，这就是为什么长期脚本运行可能会导致页面无响应的原因。在小程序中，两者是分开的，运行在不同的线程中。 Web开发人员可以使用各种浏览器公开的DOM API来选择和操作DOM。前面说过，小程序的逻辑层和渲染层是分离的。逻辑层运行在应用程序中，没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。这种差异导致一些前端开发非常熟悉的库，比如 等，无法在小程序中运行。同时环境也不同，所以有些npm包无法在小程序中运行。

Web开发者需要面对的环境是各种各样的浏览器。在PC端需要面对IE、QQ浏览器等，在移动端需要面对各种浏览器，还有iOS、iOS系统上。在小程序开发过程中，我们需要面对iOS和微信客户端两大操作系统，以及辅助开发的小程序开发者工具。小程序的三大运行环境也有所不同，如表1 -1所示。

看看完成后的效果

首先我们看一下文档目录结构

在.wxml中写入以下代码

<!--index.wxml--> <view class="container"> <form> <view class="toplookup"> <icon class="searxhicon" size="20" type="search"></icon> <input class="serachcontent" placeholder="搜索"></input> </view> <button class="btnlook" type="warn" size="mini" plain="trun">搜索</button> </form> <!-- 实现轮播图效果--> <view class="topImage"> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" class="slide-wiper"> <block wx:for="{ {imgurl}}" wx:key="*this"> <swiper-item> <image src="{ {item}}" class="slide-image"></image> </swiper-item> </block> </swiper> <view class="view-btn" loading="true"> <view> <image class="image" src="/staic/image/1-1.png"></image> </view> <text>象棋</text> <view> <image class="image" src="/staic/image/1-2.png"></image> </view> <text>医疗</text> <view> <image class="image" src="/staic/image/1-3.png"></image> </view> <text>设置</text> <view> <image class="image" src="/staic/image/1-4.png"></image> </view> <text>QQ</text> </view> </view> <!-- 第二部分-->