小程序基础

一、视图容器

1、view

    普通视图区域、类似于HTML中的div，是一个块级元素、常用来实现页面的布局效果。

运用：<view>文本</view>

2、scroll-view

    可滚动的视图区域、常用来实现滚动列表效果。

运用：<scroll-view></scroll-view scroll-x>

scroll-x：允许横向滚动（前提条件要给width加一定的宽度）

scroll-y：允许纵向滚动（前提条件要给height加一定的高度）

3、swiper和swiper-item

    轮播图容器组件和轮播图 item组件。

运用：<swiper>

                  <swiper-item>

           </swiper-item>//需要几张图就写几个swiper-item

     swiper属性：

二、常用的基础内容

        1、text

           运用：<text selectable></text>

                   通过使用text组件的selectable属性，可实现长按选中文本的效果。

        2、rich-text

             <rich-text nodes="<h1>标签</h1>"></rich-text>

             通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构。

三、其他常用组件

       1、button

              按钮组件、功能比HTML中的button按钮丰富、通过open-type属性可以调用微信提供的各                种功能（客服、转发、获取用户授权、获取用户信息等）

            运用：<button>普通按钮</button>

                       <button type="primary">主色调按钮</button>

                       <button type="warn">警告按钮</button>

                       <button size="mini"></button>//<---size="mini"小尺寸按钮--->

                       <button plain></button>//<---plain 镂空按钮--->//背景颜色取消，添加边框线。

       2、image

              图片组件、image组件默认宽度约300px、高度约240px。

              image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性如下：

              

 

       3、navigator

              页面导航组件、类似于HTML中的a链接

四、小程序宿主环境---API

       1、小程序API的3大分类

             1.事件监听API

                 特点：以on开头，用来监听某些事件的触发

                 举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

             2.同步API

                 特点1：以Sync结尾的API都是同步API

                 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

                   举例：wx.setStorageSync('key','value')向本地存储中写入内容

             3.异步API

                   特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收                                调用的结果

                   举例：wx.request()发起网络数据请求，通过success回调函数接收数据