微信小程序复习总结

第一章.

小程序系统为开发者提供了9个调试功能模块,分别是:

console,Sources,Network,Security,Storage.AppData,Wxml,Sensor,Trace

第二章

全局配置项:

页面结构文件

第三章

flex布局

1).display
display 用来指定元素是否为fex布局，语法格式为：

  .box{display:flex /inline-flex;}

其中，flex一块级 flex布局，该元素变为弹性盒子；

   inline-flex一行内fex布局，行内容器符合行内元素的特征，同时在容器内又符合

flex布局规范。

设置了flex布局之后，子元素的foat、clear和 vertical-align属性将失效。

2). flex - direction
flex-direction用于设置主轴的方向，即项目排列的方向，语法格式为：

         .box{ flex-direction: row /row- reverse /column /column -reverse;}

其中，row一主轴为水平方向，起点在左端，当元素设置为fex布局时，主轴默认为row；

         row -reverse:主轴为水平方向，起点在右端；

         column:主轴为垂直方向，起点在顶端；

         column -reverse:主轴为垂直方向，起点在底端。

图所示为元素在不同主轴方向下的显示效果。

3). flex - wrap
flex-wrap 用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下

.box{ flex -wrap:nowrap lwrap lwrap -reverse;}

其中，nowrap-不换行，默认值；

wrap一换行，第一行在上方；

wrap - reverse一换行，第一行在下方。

当设置换行时，还需要设置align-item属性来配合自动换行，但align-item的值不能火"stretch"。

flex-wrap 不同值的显示效果如图所示。

4). flex-flow
flex-flow 是flex-direction 和fex-wrap 的简写形式，默认值为row nowrap。语法格式如下：

.box{flex -flow: <flex -direction>/l<flex-wrap >;)
示例代码如下：

.box{flex-flow:row nowrap;} //水平方向不换行
 
.box{flex-flow:row-reverse wrap;}//水平方向逆方向换行
 
.box{flex-flow:column wrap -reverse;}//垂直方向逆方向换行
5). justify -content
justify-content 用于定义项目在主轴上的对齐方式。语法格式如下：

.box{justify -content:flex -start/flex -end/center /space -betwee/space -around;}
其中，justify-content一与主轴方向有关，默认主轴水平对齐，方向从左到右；

    flex -start一左对齐，默认值;

    flex-end一右对齐；

    center—居中;

    space - between:  两端对齐，项目之间的间隔都相等；

    space - around: 每个项目两侧的间隔相等。

图所示为justify-content不同值的显示效果。

6). align -items
align-items 用于指定项目在交叉轴上的对齐方式，语法格式如下：

.box{align-items:flex-start /flex-end /center /baseline /stretch;}
其中，align—items--与交叉轴方向有关，默认交叉由上到下

flex-start-交叉轴起点对齐；

flex-end——交叉轴终点对齐;

center一交叉轴中线对齐；

baseline一项目根据它们第一行文字的基线对齐；

stretch——如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此

默认值。

第四章

srcoll-view组件

可以实现滚动视图的功能

<view class="container"style="padding:0rpx">
 <scroll-view scroll-top="{{scrollTop}}"scroll-y="true"style="height:{{scrollHeight}}px"class="list"bind-scrolltolower="bindDownLoad"
 bindscrolltoupper="topLoad"bindscroll="scroll">
   <view class="item"wx:for="{{list}}">
     <image class="img"src="{{item.pic_url}}"></image>
     <view class="text">
      <text class="title">{{item.name}}</text>
      <text class="descriotion">{{item.short_description}}</text>
     </view>
   </view>
</scroll-view>
<view class="body-view">
 <loading hidden="{{hidden}}"bindchange="loadingChange">加载中..</loading>
</view>
</view>

 

text组件 

用于展示内容,类似HTML中的<span>

text组件属性:

progress组件

用于显示进度状态,如加载资源,用户资料完成度

progress组件属性:

switch组件

类似于选择器

switch组件属性:

slider 为滑动选择器

slider组件属性:

//wxml
<view>默认min=0 max=100 step=1</view>
<slider></slider>
<view>显示当前值</view>
<slider show-value></slider>
<view>设置 min=20 max=200 step=10</view>
<slider min='0'max='200'step='10'show-value></slider>
 
<view>背景条红色已选择颜色绿色</view>
<slider color="#f00"selected-color='#0f0'></slider>
<view>滑动改变icon的大小</view>
<slider show-value bindchange='sliderchange'></slider>
<icon type="success"size='{{size}}'></icon>

//js
Page({
  data:{
  size:'20'},
    sliderchange:function(e){
      this.setData({size:e.detail.value})
    }
})

picker:滚动选择器

camera:系统相机组件,可以实现拍照或录像功能

camera组件属性:

map组件:在页面中显示地图或路径

//js
Page({
  data:{
    markers:[{
      iconPath:"/image/loo.png",
      id:0,
      longitude:"108.9290",
      latitude:"34.1480",
      width:50,
      height:50
    }],
    polyline:[{
      points:[
        {
          longitude:"108.9290",
          latitude:"34.1400",
        },
        {
          longitude:"108.9290",
          latitude:"34.1500",
        },
        {
          longitude:"108.9290",
          latitude:"34.1700",
        }
      ],
      color:"#00ff00",
      width:2,
      dotteLine:true
    }],
    controls:[{
      id:1,
      iconPath:'/image/loo.png',
      position:{
        left:0,
        top:300,
        width:30,
        height:30
      },
      clickable:true
    }]
  },
  regionchange(e){
    console.log(e.type)
  },
  markertap(e){
    console.log(e.markertap)
  },
  controltap(e){
    controls.loh(e.controltap)
  }
})

<!--Pages/qitazujian/qitazujian.wxml-->
<map id="map" 
longitude="108.9200" 
latitude="34.1550"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{markers"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location style="width: 100%;height:300px">
</map>
 

第五章

即速应用组件

高级组件:
1).动态列表组件:
动态列表组件是容纳基础组件来展示后台数据的容器,通过添加基础组件来展示对应的后台数据

2).个人中心组件
个人中心组件显示个人相关信息的组件，包括图像、昵称、我的订单、收货地址、购#车等，如图5-44所示。

个人中心组件的属性面板如图5-45所示。

3).动态表单组件
动态表单组件相当于HTML中的<form>标签，是一个容器组件，可以添加子表单组件和基本组件，用来收集用户提交的相关信息给后台数据对象。

动态表单组件的属性面板如图所示:

计数组件

计数组件可以用于点赞,统计浏览量等类似的计数功能

 

.城市定位组件

城市定位组件通常于列表类组件搭配使用,常见搭配有动态列表和商品列表.

第六章

wx.request(Object）接口用于发起HTTPS请求。

wx.uploadFile(Object）接口用于将本地资源上传到后台服务器。wx.downloadFile(Object）接口       用于下载文件资源到本地。wx.connectSocket(Object）接口 用于创建一个WebSocket 连接。

wx.sendSocketMessage(Object）接口 用于实现通过WebSocket连接发送数据。

wx.closeSocket(Object）接口 用于关闭WebSocket 连接。

wx.onSocketOpen(CallBack）接口用于监听WebSocket 连接打开事件。

wx.onSocketError(CallBack)接口 用于监听 WebSocket错误。

wx.onSocketMessage(CallBack)接口 用于实现监听 WebSocket 接收到服务器的消息

wx.onSocketClose(CallBack)接口 用于实现监听 WebSocket关闭.

在本节，我们将介绍常用的3个网络API。

wx.request(Object)相关参数:

<button type="primary" bindtap="getbaidutap">获取HTML数据</button>
<textarea value ='{{html}}'auto-heightmaxlength='0'> </textarea>

Page({
  data:{
    html:""
  },
  getbaidutap:function(){
    var that=this;
    wx.request({
      url: 'https://www.baidu.com',
      data:{},
      header:{'Content=Type':'application/json'},
      success:function(res){
        console.log(res);
        that.setData({
          html:res.data
        })
      }
    })
  }
})

录音API

1).开始录音

2).停止录音 

wx.startRecord({
  success:function(res){
    var tempFilePath=res.tempFilePath
  },
  fail:function(res){
 
  }
})
setTimeout(function(){
  wx.stopRecord()
},10000)

.音频播放控制API 

1).播放语音

wx.startRecord({
  success:function(res){
    var tempFileOath=res.tempFilePath
    wx.playVoice({
      filePath:tempFilePath,
      complete:function(){
      }
    })
  }
})

音乐播110放控制API

监听音乐播放
监听音乐暂停
wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被 wx. pause Background Audio()方法触发。在CallBack中可以改变播放图标。

.监听音乐停止
wx.onBackgroundAudioStop(CallBack）接口用于实现监听音乐停止，通常被音乐自然播放停止或wx. seekBackgroundAudio(Object）方法导致播放位置等于音乐总时长时触发。在CallBack中可以改变播放图标。

本地数据及缓存API

文件API

.设备相关API
设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。.

主要包括以下5个接口 API:

wx.getSystemInfo(Object）接口、wx.getSystemInfoSync(）接口用于获取系统信息

wx. getNetworkType(Object）接口 用于获取网络类型。

wx.onNetworkStatusChange(CallBack）接口 用于监测网络状态改变。

wx. makePhoneCall(Object）接口 用于拨打电话。

wx.scanCode(Object）接口用于扫描二维码。