复习 总结

认识微信小程序

1. 简介：2011年1月21日推出     2017年1月上线

2. 特征 ：1.无需安装 2.触手可及 3.用完即走 4.无需卸载

3. 应用场景的特点：1.简单的业务逻辑 2.低频度的使用场景

第一个小程序

Component({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },

工具界面功能介绍

  成功创建项目后进入工具界面

  工具界面划分五大区域：工具栏、模拟器、目录文件区、编辑区、调试区

小程序的基本目录结构

主体文件
    微信小程序的主体部分由三个文件组成，这三个文件必须放在项目的主目录中，负责小程序的整体配置，他们的名称是固定的。

app.js      小程序逻辑文件

app.json  小程序公共设置文件

app.wxss  小程序主样式表文件

页面文件
    小程序通常是由多个页面组成的，每一个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。

.js文件       页面逻辑文件

.wxml文件  页面结构文件

.wxss文件  页面样式表文件

.json文件   页面配置文件

 小程序的开发框架

  微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

配置文件 

 taBar配置项：

在app.json文件中设置如下配置项代码：

"tabBar":{
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/news/news",
        "iconPath": "images/微信图片_20240304191451.png",
        "selectedIconPath": "images/微信图片_20240304191451.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/微信图片_20240304191451.png",
        "selectedIconPath": "images/微信图片_20240304191451.png",
        "text": "新闻"
      }
    ]
 
  }
}

debug配置 

debug 配置项用于开启开发者工具的调试模式，默认为 false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以 info 的形式输出到 Console（控制台）面板上。

配置news.wsm代码如下：

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].year}}月
{{birthday[2].year}}日
</view>
<view>爱好:{{object.hobby}}</view>

 列表数据绑定

<template name="stu">
<view wx:for="{{students}}">
  <text>姓名:{{item.nickname}}</text>
    <text>身高:{{item.height}}</text>
    <text>体重:{{item.weight}}</text></view>
</template>
 <template is="stu" data="{{students}}"></template>

浮动与定位

元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS 中，通过 float 属性来定义浮动。

none——默认值，表示元素不浮动；

left——元素向左浮动；

right——元素向右浮动。

在下面的代码中，分别对box1、box2、box3元素进行左右浮动：

<view>box1,box2,box3 没浮动</view>
<view style="border: 1px solid#f00;padding: 5px">
    <view style="border: 1px solid #0f0">box1</view>
    <view style="border: 1px solid #0f0">box2</view>
</view>
<view>box1 左浮动</view>
<view style="border: 1px solid#f00;padding: 5px">
    <view style="float: left;border: 1px solid #0f0">box1</view>
    <view style="border: 1px solid #0f0">box2</view>
    <view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 右浮动</view>
    <view style="border: 1px solid #f00;padding: 5ox">
    <view style="float: right;border: 1px solid #0f0">box1</view>
    <view style="float: right;border: 1px solid #0f0">box2</view>
    <view style="border: 1px solid #0f0">box3</view>
    </view>
 

元素定位 

relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它；
    absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响；
    fixed——固定定位，相对于浏览器窗口进行定位。
对boxl、box2、box3 进行元素静态定位，示例代码如下：

<!-- box2元素均未定位 stative top:30px left:30px -->
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: relative; left:30px; top: 30px">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>
 
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute; left:30px; top: 30px">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>
 

块级元素与行内元素

    元素按显示方式分为块级元素、行内元素和行内块元素, 它们的显示方式由ｄｉｓｐｌａｙ 属性控制。

块级元素

块级元素默认占一行高度, 一行内通常只有一个块级元素(浮动后除外), 添加新的块级元素时, 会自动换行, 块级元素一般作为盒子出现。 块级元素的特点如下:

( １ ) 一个块级元素占一行。
( ２ ) 块级元素的默认高度由内容决定 , 除非自定义高度。
( ３ ) 块级元素的默认宽度是父级元素的内容区宽度 , 除非自定义宽度。
(４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(５ ) 块级元素可以容纳块级元素和行内元素。

<view style="border: 1px solid #f00;">块级元素 </view>
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #00f;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid #ccc;">
<view style="height: 60px ;">块级元素4</view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">父级元素高度随内容决定，内容为文本</view>

 项目属性

1.order

  order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。

<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item" style="order:1">1</view>
<view class="item" style="order:2">2</view>
<view class="item" style="order:3">3</view>
<view class="item">4</view>
</view>

2.flex - grow

  flex - grow定义项目的放大比例，默认值为0，即不放大。

<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-grow: 1;">2</view>
  <view class="item" style="flex-grow: 2;">3</view>
  <view class="item">4</view>
</view>

 组件的定义及属性

组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。
    每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：
＜标签名 属性名=”属性值”>内容⋯＜标签名>
    组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data - *、bind */catch *等。
id   组件的唯一表示，保持整个页面唯一，不常用。
class  组件的样式类，对应WXSS 中定义的样式。
style  组件的内联样式，可以动态设置内联样式。
idden   组件是否显示，所有组件默认显示。
data - *  自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的 currentTarget. dataset 方式来获取自定义属性的值。
bind * / catch *  组件的事件，绑定逻辑层相关事件处理函数。

view

 view 组件是块级组件，没有特殊功能，主要用于布局展示，相当于 HTML 中的div，是布局中最基本的用户界面（User Interface,UI）组件，通过设置view 的CSS 属性可以实现各种复杂的布局。

<view style="text-align: center">默认flex布局</view>
<view style = "display: flex">
  <view style="border: 1px solid #f00;flex-grow: 1">1</view>
  <view style="border: 1px solid #f00;flex-grow: 1">2</view>
  <view style="border: 1px solid #f00;flex-grow: 1">3</view>
</view>
 
<view style="text-align: center">上下混合布局</view>
<view style="display: flex;flex-direction: column">
<view style="border:lpx solid #E00">1</view>
<view style="display:flex" >
  <view style="border: 1px solid #f00; flex-grow: 1">2</view>
  <view style="border: 1px solid #f00; flex-grow: 1">3</view>
</view>
</view>
 
<view style="text-align: center">左右混合布局</view>
<view style="display: flex">
  <view style="border: 1px solid #f00;flex-grow: 1">1</view>
  <view style="display: flex;flex-direction: column;flex-grow: 1">
  <view style="border: 1px solid #f00; flex-grow: 1">2</view>
  <view style="border: 1px solid #f00; flex-grow: 1">3</view>
</view>
</view>

scroll-view 

//.wxml
<view class="container" style="padding: 0rpx">
<!--垂直滚动，这里必须设置高度-->
  <scroll-view scroll-top="{{scrollTop}}" scroll -y="true"style="height: {{scrollHeight}}px;" class="list" bindscrolltolower="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="description" > {{item.short_description}}</text>
      </view>
    </view>
  </scroll-view>
  <view class="body-view">
    <loading hidden="{{hidden}}" bindchange="loadingChange">
    加载中...
    </loading>
  </view>
</view>

//.js
var url="http://www.imooc.com/course/ajaxlist";
var page=0;
var page_size=5;
var sort="last";
var is_easy=0;
var lange_id=0;
var pos_id=0;
var unlearn=0;
//请求数据
var loadMore=function(that){
  that.setData({
    hidden:false
  });
  wx.request({
    url:url,
    data:{
      page:page,
      page_size:page_size,
      sort:sort,
      is_easy:is_easy,
      lange_id:lange_id,
      pos_id:pos_id,
      unlearn:unlearn
    },
    success:function(res){
      //console.info(that.data.list);
      var list=that.data.list;
      for(var i=0;i<res.data.list.length;i++){
        list.push(res.data.list[i]);
      }
      that.setData({
        list:list
      });
      page++;
      that.setData({
        hidden:true
      });
    }
  });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop:0,
    scrollHeight:0
  },
  onLoad:function(){
    var that=this;
    wx.getSystemInfo({
      success:function(res){
        that.setData({
          scrollHeight:res.windowHeight
        });
      }
    });
    loadMore(that);
  },
  //页面滑动到底部
  bindDownLoad:function(){
    var that=this;
    loadMore(that);
    console.log("lower");
  },
  scroll:function(event){
    this.setData({
      scrollTop:event.datail.scrollTop
    });
  },
  topLoad:function(event){
    page=0;
    this.setData({
      list:[],
      scrollTop:0
    });
    loadMore(this);
    console.log("lower");
  }
})

//.wxss
 
.userinfo {
  display:flex;	
  flex-direction:column;	
  align-items:center;	
  }
  .userinfo -avatar {
    width:128rpx;	
    height:128rpx;	
    margin:20rpx;	
    border-radius:50%;	
  }
   .userinfo-nickname {
    color:#aaa;	
   } 
   .usermotto {
    margin-top:200px;	
   }
   /**/
   scroll -view {
    width:100% ;	
   }
   .item{
    width:90%;	
    height:300rpx;	
    margin:20rpxauto;	
    background:brown;	
    overflow:hidden;	
   }
   .item.img {
    width:430rpx;	
    margin-right:20rpx;	
    float:left;	
   }
   .title{
    font-size:30rpx;	
    display:block;	
    margin:30rpxauto;	
   }
   .description{
    font-size:26rpx;	
    line-height:15rpx;
   }

 swiper

swiper 组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper 组件由<swiper/ >和＜swiper -item/>两个标签组成，它们不能单独使用。<swiper/＞中只能放置一个或多个 <swiper -item/ >，若放置其他组件则会被删除；<swiper - item/ >内部可以放置任何组件，默认宽高自动设置为100%。swiper 组件的属性如表所示。

 
<swiper indicator-dots='true' autoplay='true' interval='5000' duration='1001'>
    <swiper-item>
    <image src="/miniprogram/pages/wsimg/01.jpg" style="width: 100%"></image>
    </swiper-item>
    <swiper-item>
      <image src="/miniprogram/pages/wsimg/01.jpg" style="width: 100%"></image>
    </swiper-item>
    <swiper-item>
      <image src="/miniprogram/pages/wsimg/01.jpg" style="width: 100%"></image>
    </swiper-item>
</swiper>

 

 基础内容组件

icon

 icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性如表

// wxml代码
<view>icon类型：
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" />{{item}}
  </block>
</view>
<view>icon大小：
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}" />{{item}}
  </block>
</view>
<view>icon颜色：
  <block wx:for="{{iconColor}}">
    <icon type="success" size="30" color="{{item}}" />{{item}}
  </block>
</view>

// js代码
Page({
  data:{
    iconType:["success","success_no_circle","info","warn","wating","cancel","download","search","clear"],
    iconSize:[10,20,30,40],
    iconColor:['#f00','#0f0','#00f']
  }
})

 text

  text组件用于展示内容，类似html中的<span>, text组件中的内容支持长按选中，支持转义字符“\”，属于行内元素。text组件的属性如表

//wxml
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{26-x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}">&nbsp;</text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=2*x-1}}">
<text>*</text>
</block>
</block>
</view>
</block>
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{20+x}}" wx:for-item="x">
<text decode="{{true}}"space="{{true}}">&nbsp;</text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=11-2*x}}">
<text>*</text>
</block>
</block>
</view>
</block>
 
//js
Page({
  data:{
    x:[1,2,3,4,5],
    y:[1,2,3,4,5,6,7,8,9]
  }
})

 picker

//js
Page({
  data:{
    startdate:2000,
    enddate:2050,
    date:'2018',
    dtarttime:'00:00',
    endtime:'12:59',
    time:'8:00'
  },
  changedate:function(e){
    this.setData({date:e.detail.vslue});
    console.log(e.detail.value)
  },
  changetime:function(e){
    this.setData({time:e.detail.value})
    console.log(e.detail.value)
  }
})

//.wxml
<view>
<picker mode="date"start="{{startdate}}"end="{{enddate}}"value="{{date}}"bindchange="changedate">
选择日期:{{date}}
</picker>
</view>
<view>
<picker mode="time"start="{{starttime}}"end="{{endtime}}"bindchange="changetime">
选择的时间:{{time}}
</picker>
</view>

省市选择器 

//.js
Page({
  data:{
      region:['陕西省','西安市','长安区'],
      customitem:'全部'
  },
  changeregion:function(e){
    console.log(e.detail.value)
    this.setData({
      region:e.detail.value
    })
  }
})
 
//.wxml
<picker mode="region"value="{{region}}"custom-item="{{cust-omitem}}"bindchange="changeregion">
      选择省份:{{region[0]}},{{region[1]}},{{region[2]}}
</picker>

 form

form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<form/>表单中formType为submit的<button/>组件时，会将表单组件中的value值进行提交。form组件属性如表。

 

.js
Page({
  hobby:"",
  data:{
    hobbies:[
      {name:'jsj',value:'计算机',checked:'true'},
      {name:'music',value:'听音乐'},
      {name:'game',value:'玩电竞'},
      {name:'swim',value:'游泳',checked:'true'}]
  },
  formSubmit:function(e){
    console.log('from发生了submit事件，携带数据为：',e.detail.value)
  },
  formReset:function(){
    console.log('from发生了reset事件')
  }
})
 

.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<view>姓名：
  <input type="text" name="xm"/>
  </view>
  <view>性别:
    <radio-group name="xb"/>
      <label>
      <radio value="男" checked/>男</label>
      <label>
      <radio value="女"/>女</label>
  </view>
  <view>爱好：
    <checkbox-group name="hobby">
    <label wx:for="{{hobbies}}">
      <checkbox value="{{item.value}}"
    checked="{{item.checked}}">{{item.value}}</checkbox>
    </label>
    </checkbox-group>
  </view>
  <button formType='submit'>提交</button>
  <button formType='reset'>重置</button>
</form>

 多媒体组件

  多媒体组件包括image(图像)、audio（音频）、video（视频）、camera（相机）组件，使用这些组件，可以让页面更具有吸引力。

image

image组件为图像组件，与HTML中的<img/>类似，系统默认image组件的宽度为300px、高度为2250px，image组件的属性如表。

缩放模式

//.wxml
<block wx:for="{{modes}}">
<view>当前图片的模式是:{{item}}</view>
<image mode="{{item}}" src="../image/pic02.jpg"  style="width: 100%;height: 100%;"/>
</block>
 
//.js
Page({
  data:{
    modes:['scaleToFill','aspectFit','aspectFill','widthFix']
  }
})

 裁剪模式

//.js
Page({
  data:{
    modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']
  }
})
 
//.wxml
<block wx:for="{{modes}}">
  <view>当前图片的模式是:{{item}}</view>
  <image mode="{{item}}" src="../image/pic02.jpg" style="width: 100%;height: 100%; "/>
</block>
 
 
​

 video 

 video组件用来实现视频的播放、暂停等。视频的默认宽度为300px，高度为225px，video组件的属性如表

//.js
Page({
  data:{
    src:"",
  },
  bindButtonTap:function(){
    var that=this
    wx.chooseVideo({
      sourceType:['album','camera'],
      maxDuration:60,
      camera:['front','back'],
      success:function(res){
        that.setData({
          src:res.tempFilePath
        })
      }
    })
  }
})

.wxml
<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>

 camera

 camera 组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个 camera 组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像；在手机中运行时，使用手机前后摄像头实现拍照或录像。camera 组件的属性如表。

//.js
Page({
  takephoto(){
    const ctx=wx.createCameraContext()
    ctx.takePhoto({
      quality:'high',
      success:(res)=>{
        this.setData({
        src:res.tempImagePath
      })
    }
  })
},
error(e){
  console.log(e.detail)
}
})
 
.wxml
<camera device-position="back" flash="off" binderror="error" style="width: 100%;height: 350px;"></camera>
<button type="primary" bindtap="takephoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

 

录音API

    录音 API 提供了语音录制的功能，主要包括以下两个 API 接曰：
 wx. startRecord（Object）接口用于实现开始录音。
 wx. stop Record （Object） 接口用于实现主动调用停止录音。

停止录音

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

 

 暂停播放

wx.startRecord({
  success:function(res){
    var tempFilePath=res.tempFilePath
    wx.playVoice({
      filePath: 'tempFilePath'
    })
    setTimeout(function(){
      wx.pauseVoice()
    },5000)
      }
  })

结束播放

wx.startRecord({
  success:function(res){
    var tempFilePath=res.tempFilePath
    wx.playVoice({
      filePath: 'tempFilePath'
    })
    setTimeout(function(){
      wx.stopVoice()
    },5000)
      }
  })

获取位置信息

wx.getlocation（ Object）接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息，其相关参数如表

wx.getlocation（ Object）调用成功后，返回的参数如表

wx.getLocation({
  type:'wgs84',
    success:function(res){
      console.log("经度"+res.longitude);
      console.log("纬度度"+res.latitude);
      console.log("速度"+res.longitude);
      console.log("位置的精确度"+res.accuracy);
      console.log("水平精确度"+res.horizontalAccuracy);
      console.log("垂直精确度"+res.verticalAccuracy);
    }
})

 

选择位置信息

 wx. chooseLocation（Object）接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如表

 

wx.chooseLocation({
    success:function(res){
      console.log("位置的名称"+res.longitude)
      console.log("位置的地址"+res.accuracy)
      console.log("位置的纬度"+res.horizontalAccuracy)
      console.log("位置的纬度"+res.verticalAccuracy)
    }
})

 显示位置信息

wx.getLocation({
  type:'gcj02',
    success:function(res){
      var latitude=res.latitude
      var longitude=res.longitude
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        scale:10,
        name:'智慧国际酒店',
        address:'西安市长安区西长安区300号'
      })
    }
})

扫描二维码

wx.scanCode(Object)接口用于调起客户端扫码界面，扫码成功后返回相应的内容 其属性如表

 
wx.scanCode({
  success:(res)=>{
    console.log(res.result)
    console.log(res.scanType)
    console.log(res.charSet)
    console.log(res.path)
  }
})