微信小程序的应用静态布局

微信小程序

今天我来讲一下微信小程序的使用。可以查看微信开放文档
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

小程序与普通网页开发的区别

​小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

​网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

​网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如表1-1所示。

看一下完成后的效果


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

在index.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>
  <!-- 第二部分-->
  <view class='selection'