一到六章总结

第一章

小程序简介

微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南，全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。

上线时间

2017年1月9日

第一个微信小程序项目

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

-<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="userinfo">
      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
        </button>
        <view class="nickname-wrapper">
          <text class="nickname-label">昵称</text>
          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
        </view>
      </block>
      <block wx:elif="{{!hasUserInfo}}">
        <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
        <view wx:else> 请使用2.10.4及以上版本基础库 </view>
      </block>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>
    <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
    </view>
  </view>
</scroll-view>

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Component({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },
  methods: {
    // 事件处理函数
    bindViewTap() {
      wx.navigateTo({
        url: '../logs/logs'
      })
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    onInputChange(e) {
      const nickName = e.detail.value
      const { avatarUrl } = this.data.userInfo
      this.setData({
        "userInfo.nickName": nickName,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res)
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    },
  },
})

微信开发者工具界面功能介绍

工具栏

在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。

模拟区

在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运
行效果

目录文件区

目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作

编辑区

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json 文件的操作，使用组合键能提高代码的编辑效率

调试区

调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发供了9个调试功能模块，分别是Console、Sources、Network、Security、Storage、App[Wxml、Sensor和Trace。最右边的扩展菜单项“:”是定制与控制开发工具按钮

Console面板

Console面板是调试小程序的控制面板，当代码执行出现错误时，错误信息将显示在Console面板中，便于开发者排查错误

Sources面板

Sources面板是源文件调试信息页，用于显示当前项目的脚本文件

Network面板

Network 面板是网络调试信息页，用于观察和显示网络请求request和socket等网络相关的详细信息

Security面板

Security 面板是安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问颐

Storage面板

Storage 面板是数据存储信息页，开发者可以使用wx.setStorage 或者 wx.setStorageSync 将数据存储到本地存储，存储在本地存储中的变量及值可以在Storage 面板中显示

AppData面板

AppData 面板是实时数据信息页，用于显示项目中被激活的所有页面的数据情况

Wxml面板

Wxml面板是布局信息页，主要用于调试Wxml组件和相关CSS样式，显示Wxml转化后的界面。Wxml面板调试区的左侧部分是Wxm代码，右侧部分是该选择器的CSS样式

Sensor面板

Sensor 面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现用于调试重力感应 API

Trace面板

Trace 面板是路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android)设备的路由信息

扩展菜单项

最右边的扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息

第二章

微信小程序开发基础：

• 小程序的基本目录结构

主体.文件：

app.js：小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScrpt文件。

app.json：小程序公共设置文件，配置小程序全局设置。

app.wxss：小程序主样式表文件,类似HTML的、css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。

页面文件：

.js文件：页面逻辑文件，在该文件中编写JavaSenpt代码控制页面的逻辑。

.wxml文件：页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.hml文件。

.wxss文件：页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用app.wxss中指定的样式规则。

.json文件：页面配置文件。

• 小程序的开发框架

视图层：

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;wxss 文件用于描述页面的样式。

逻辑层：

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。
微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

数据层：

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。

• 配置文件

pages:pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串代表对应页面的“路径”+“文件名”。

window:window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。

taBar:当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现

networkTimeout:小程序中各种网络请求 API的超时时间值只能通过networkTimeout配置项进行统一设不能在 API中单独设置。

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

{
  "pages": [
    "pages/new/new",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundColor": "#ccc",
    "backgroundTextStyle": "light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序window功能演示",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "首页",
      "iconPath": "images/one.jpg",
      "selectedIconPath": "images/two.jpg"
    },
    {
      "pagePath": "pages/new/new",
      "text": "新闻",
      "iconPath": "images/three.jpg",
      "selectedIconPath": "images/four.jpg"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

• 逻辑层文件

App({
  onLaunch(){
    console.log("小程序初始化");
  },
  onShow(){
    console.log("小程序启动");
  },
  onHide(){
    console.log("小程序隐藏");
  }
})

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

• 页面结构文件

<view>姓名:{{name}}</view>
22<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{ffbirthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>算数运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==40?'happy':'nohappy'}}</view>

<view wx:if="{{x>0}}">1</view>
<view wx:elif="{{x==0}}">0</view>
<view wx:else>-1</view>

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


<template name="stu">
<block wx:for="{{student}}">
<view >
<text>index}}</text >
<text>item.name )</text>
<text>item.age}}</text>
<text>item.hobby})</text>
</view >
</block>
</template>
<template is="stu" data="{{istudent}}"/>

• 页面样式文件

第三章

 盒子模型

一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成。

块级元素与行内元素

块级元素：

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

<view style="border: 1px solid #f00;">块级元素1</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>

行内元素：

行内元素不能被设置高度和宽度，其高度和宽度由内容决定。

行内元素内不能放置块级元素，只级容纳文本或其他行内元素。

同一块内，行内元素和其他行内元素显示在同一行。

当元素的 display属性被设置为imline-block时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

<view style="padding: 20px;">
<text style="border: 1px solid #f00;">文本1</text>
<text style="border: 1px solid #f00;margin: 10px;pad: 5px;">文本2</text>
<view style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</view>一行显示不全，自动换行显示
</view>
<view>
元素像是方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素，行内元素和行内块元素</view>三种类型。
</view>

浮动与定位

浮动：

float:none lleft lright;
none--默认值，表示元素不浮动:
lef--元素向左浮动;
night--元素向右浮动。

clear:left lright lboth Inonef
lef--清除左边浮动的影响，也就是不允许左侧有浮动元素;

night--清除右边浮动的影响，也就是不允许右侧有浮动元素；

both--同时清除左右两侧浮动的影响;
none--不清除浮动。

<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 style="border: 1px solid #0f0">box3</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: 5px;">
<view style="float: left; border: 1px solid #0f0">box1</view>
<view style="float: left; border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 box3 左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left; border: 1px solid #0f0">box1</view>
<view style="float: left; border: 1px solid #0f0">box2</view>
<view style="float: left; border: 1px solid #0f0">box3</view>
</view>



<view>box1 box2 左浮动 box3清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left; border: 1px solid #0f0">box1</view>
<view style="float: left; border: 1px solid #0f0">box2</view>
<view style="clear: left; border: 1px solid #0f0">box3</view>
</view>


<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px" class="clearfloat">
<view style="float: left; border: 1px solid #0f0">box1</view>
<view style="float: left; border: 1px solid #0f0">box2</view>
<view style="float: left; border: 1px solid #0f0">box3</view>
</view>

定位： 

posicion:static ，relative ，absolute ，fixed
static-默认值，该元素按照标准流进行布局；
relative-相对定位，相对于他在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它
abeolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
fixed--固定定位，相对于浏览器窗口进行定位。，

静态定位：

<view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>

 相对定位：position:relative;

<view>
<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>

绝对定位：position:absolute;

<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>

固定定位：position:fixed;

<view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>

 

box1,2,3父元素相对定位，box2绝对定位 

box1,2,3父元素相对定位，box2固定定位  

flex布局

flex支持的七种属性：

display:

display用来指定元素是否为flex布局。
.box {display:flexlinline-flex;}
其中,ex--块级fex布局，该元素变为弹性盒子:
inline-flex--行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex布局规范。

flex-direction:

flex-direction 用于设置主轴的方向，即项目排列的方向。
.box {flex -direction:row lrow -reverse lcolumn lcolumn-reverse;}

row——主轴为水平方向，起点在左端，当元素设置为ex布局时，主轴默认为row;

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

column——主轴为垂直方向，起点在顶端;

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

flex-wrap:

fex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行

.box{ flex-wrap:nowrap | wrap | wrap-reverse;}
其中，nowrap--不换行，默认值;wrap--换行，第一行在上方;
wrap-reverse--换行，第一行在下方，
当设置换行时，还需要设置 align-item属性来配合自动换行，但 align-item 的值不stretch。

flex-flow:

flex-fow是flex-direction和flex-wrap的简写形式，默认值为 row nowrap。语法格式如下
boxiflex-flow:<flex-direction>||<flex-wrap >;

justify-content:

justify-content用于定义项目在主轴上的对齐方式。语法格式如下:
.box { justify -content:flex-start | flex -end lcenter | space -between |  space-around:}
其中，justify-content--与主轴方向有关，默认主轴水平对齐，方向从左到右:fex-start--左对齐，默认值;
fex-end--右对齐;
center--居中:
space-between--两端对齐，项目之间的间隔都相等:space-around--每个项目两侧的间隔相等,

align-items:

align-items用于指定项目在交叉轴上的对齐方式。
.box{ align  items:flex-start | flex -end | center l baseline l stretch;}
其中，align-items--与交叉轴方向有关，默认交叉由上到下;
fex-start--交叉轴起点对齐:
flex-end--交叉轴终点对齐;
center--交叉轴中线对齐;
baseline--项目根据它们第一行文字的基线对齐:
stretch--如果项目未设置高度或设置为auto,项目将在交叉轴方向拉伸填充容器，此为默认值

//.wxml
<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;
}
.item4{
  height: 120px;
}

align-content:

align-content用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。
.box {align -content:flex-start |flex -end |center |space -between |space -around lstretch}

 项目属性

order:

order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。
.item{order:<number>;}

<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: 3;">2</view>
  <view class="item" style="order: 2;">3</view>
  <view class="item">4</view>
</view>

 flex-grow:

flex-grow定义项目的放大比例，默认值为0，即不放大。
.item{flex-grow:<number >;}

<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>

 

flex-shrink:

fex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小。
.item{flex-shrink:<number>;}

<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-shrink: 2;">2</view>
  <view class="item" style="flex-shrink: 1;">3</view>
  <view class="item" style="flex-shrink: 4;">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: px;
  width: 150px;
  margin: 2px;
}

flex-basis:

fex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)。
.item{flex-basis:<number> |auto;}

<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-basis: 100px;">2</view>
  <view class="item" style="flex-basis: 200px;">3</view>
  <view class="item">4</view>
</view>

flex:

fex属性是fex-grow、fex-shrink和fex-basis 的简写，其默认值分别为0、1、auto。
item{ flex:<flex-grow>|<flex-shrink>|<flex -basis >;}

align-self:

align-self属性用来指定单独的伸缩项目在交叉上的对齐方式。

.item {align-self:auto | flex-start | flex-end | center | baseline | stretch;}

第四章

主键的定义及属性

<标签名 属性名=“属性值”>内容</标签名>

id组件的唯一表示，保持整个页面唯一

class组件的样式类，对应WSXX中定义的样式

style组件的内联样式，可以动态设置内联样式

hidden组件是否显示，所有组件默认显示

daa-* 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传人参数对象的currentTarget.dataset方式来获取自定义属性的值

bind*/catch*组件的事件，绑定逻辑层相关事件处理函数

容器视图组件

view

<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: 1px solid #f00;">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: 2;">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: 2;">3</view>
</view>
</view>

scroll-view

swiper

基础内容组件

icon

<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","warn","waiting","cancel",
    "download","search","clear"],
    iconSize:[10,20,30,40],
    iconColor:['#f00','#0f0','#00f']
    }
  })
  Page({
    data:{
      iconType:["success","success_no_circle","info","warn","warn","waiting","cancel",
    "download","search","clear"],
    iconSize:[10,20,30,40],
    iconColor:['#f00','#0f0','#00f']
    }
  })

 

text

<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{25-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="{{19+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,]
  }
})

 

progress

<view>显示百分比</view>
<progress percent="80" show-info="80"></progress>
<view>改变宽度</view>
<progress percent="50" stroke-width="2"></progress>
<view>自动显示进度条</view>
<progress percent="80" active></progress>

表单组件

button

<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bindtap='buttonSize' size="{{size}}">改变size</button>
<button type="default" bindtap='buttonPlain' plain="{{plain}}">改变plain</button>
<button type="default" bindtap='buttonLoading' loading="{{loading}}">改变loading显示</button>
//js
Page({
  data:{
    size:'default',
    plain:'false',
    loading:'false'
  },
  buttonSize:function(){
    if(this.data.size=="default")
    this.setData({size:'mini'})
    else
    this.setData({set:'default'})
  },
  buttonLoading:function(){
    this.setData({loading:!this.data.loading})
  }
})

radio

<view>选择你喜爱的城市：</view>
<radio-group bindchange="citychange">
<radio value="西安">西安</radio>
<radio value="北京">北京</radio>
<radio value="上海">上海</radio>
<radio value="广州">广州</radio>
<radio value="深圳">深圳</radio>
</radio-group>
<view>你的选择：{{city}}</view>
<view>选择你喜欢的计算机语言：</view>
<radio-group class="radio-group" bindchange="radiochange">
<label class="radio" wx:for="{{radios}}">
<radio value="{{item.value}}" checked="{{item.checked}}"/>
{{item.name}}
</label>
</radio-group>
<view>你的选择：{{lang}}</view>
//js
Page({
  data:{
    radios:[
      {name:'java',value:'JAVA'},
      {name:'python',value:'Python',checked:'true'},
      {name:'php',value:'PHP'},
      {name:'swif',value:'Swif'},
    ],
    city:",lang:"
  },
  citychange:function(e){
    this.setData({city:e.detail.value});
  },
  radiochange:function(event){
    this.setData({lang:event.detail.value});
    console.log(event.detail.value)
  }
})

 

checkbox

<view>选择你喜爱的城市：</view>
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}" checked='{{item.checked}}'>
{{item.value}}
</checkbox>
</label>
</checkbox-group>
<view>您的选择是：{{city}}</view>
//js
Page({
  city:'',
 data:{
    citys:[
      {name:'km',value:'昆明'},
      {name:'sy',value:'三亚'},
      {name:'zh',value:'珠海',checked:'true'},
      {name:'dl',value:'大连'}]
    },
    cityChange:function(e){
      console.log(e.detail.value);
      var city=e.detail.value;
      this.setData({city:city})
    }
})

 

switch

<view>
<switch bindchange="swl">{{var1}}</switch>
</view>
<view>
<switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
<switch type="checkbox" bindchange="sw3">{{var3}}</switch>
</view>
//js
Page({
  data:{
    var1:'关',
    var2:'开',
    var3:'未选'
  },
  sw1:function(e){
    this.setData({var1:e.datail.value ?'开':'关'})
  },
  sw2:function(e){
    this.setData({var2:e.datail.value ?'开':'关'})
  },
  sw3:function(e){
    this.setData({var3:e.datail.value ?'已选':'未选'})
  }
})

 

slider

<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

<view>---range为数组---</view>
<picker range="{{array}}" value="{{index1}}" bindchange="arrayChange">
  当前选择：{{array[index1]}}
</picker>
<view>---range为数组对象---</view>
<picker bindchange="objArrayChange" value="{{index2}}" range-key="name" range="{{objArray}}">
  当前选择：{{objArray[index2].name}}
</picker>
//js
Page({
data:{
  array:["JAVA","Python","C","C#"],
  objArray:[
    {id:0,name:"JAVA"},
    {id:1,name:"Python"},
    {id:2,name:"C"},
    {id:3,name:"C#"}
  ],
  index1:0,
  index2:0
},
arrayChange:function(e){
  console.log("picker值变为",e.detail.value)
  var index=0;
  this.setData({
    index1:e.detail.value
  })
},
objArrayChange:function(e){
  console.log("picker值变为",e.detail.value)
  this.setData({
    index2:e.detail.value
  })
}
  })

picker-view：

<view>当前日期:{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height:50px;" style="width: 100%; height: 300px;"
value="{{value}}" bindchange="bindchange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px;">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px;">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px;">{{item}}日</view>
</picker-view-column>
</picker-view>
//js
const date=new Date()
const years=[]
const months=[]
const days=[]
for(let i=1900; i<=2050; i++){
  years.push(i)
}
for(let i=1; i<=12; i++){
  months.push(i)
}
for(let i=1; i<=31; i++){
  days.push(i)
}
Page({
  data:{
    years:years,
    months:months,
    days:days,
    year:date.getFullYear(),
    month:date.getMonth()+1,
    day:date.getDate(),
    value:[118,0,0],
  },
  bindChang:function(e){
    const val=e.datail.value
    console.log(val);
    this.setData({
      year:this.data.years[val[0]],
      month:this.data.months[val[1]],
      day:this.data.days[val[2]]
    })
  }
})

input：

<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bindtap="bindButton">使得输入框获取焦点</button>
<input maxlength="10" placeholder="最大输入长度为10"/>
<view class="section_title">您输入的是:{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
<input bindinput="bindReplaceInput" placeholder="连续两个1会变成2"/>
<input password type="number"/>
<input password type="text"/>
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>
//js
Page({
  data:{
    focus:false,
    inputValue: ""
  },
bindButtonTpa:function(){
  this.setData({
    focus:true
  })
},
bindKeyInput:function(e){
  this.setData({
    inputValue:e.detail.value
  })
},
bindReplaceInput:function(e){
  var value=e.detail.value
  var pos=e.detail.cursor
  if(pos!=-1){
    var left=e.detail.value.slice(0,pos)
    pos=left.replace(/11/g,'2').length
  }
  return{
    value:value.replace(/11/g,'2'),
    cursor:pos
  }
}
})

textarea:

label:

<view><checkbox></checkbox>中国</view>
<view><label><checkbox></checkbox>中国</label></view>
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}"checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您的选择是：{{city}}</view>
//js
Page({
  data:{
    citys:[
      {name:'km',value:'昆明'},
      {name:'sy',value:'三亚'},
      {name:'zh',value:'珠海',checked:'true'},
      {name:'dl',value:'大连'}
    ]
  },
  cityChange:function(e){
    console.log(e.detail.value);
    var city=e.detail.value;
    this.setData({city:city})
  }
})

form:

<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>
</radio-group>
</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 form-type="submit">提交</button>
<button form-type="reset">重置</button>
</form>
//js
Page({
  hobby:'',
  data:{
    hobbies:[
      {name:'jsj',value:'计算机',checked:'true'},
      {name:'music',value:'听音乐'},
      {name:'game',value:'玩电竞'},
      {name:'swim',value:'游泳',checked:'true'}
    ]
  },
  forSubmit:function(e){
    console.log('form发生了submit事件，携带数据为：',e.detail.value)
  },
  formReset:function(){
    console.log('form发生了reset事件')
  }
})

多媒体组件

包括image,audio,video,camera组件

image: 

缩放模式：

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

 裁剪模式：

top
不缩放图片, 只显示图片的顶部区域。

bottom
不缩放图片, 只显示图片的底部区域。

center
不缩放图片, 只显示图片的中间区域。

left
不缩放图片, 只显示图片的左边区域。

 right
不缩放图片, 只显示图片的右边区域。

top-left
不缩放图片, 只显示图片的左上边区域。

top-right
不缩放图片, 只显示图片的右上边区域。

bottom-right
不缩放图片, 只显示图片的左下边区域

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

 audio:

vdo: 

<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
//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
        })
      }
    })
  }
})

camera:

<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>
//js
Page({
  takePhoto(){
    const ctx=wx.createCameraContext()
    ctx.takePhoto({
      quality:'high',
      success:(res)=>{
        this.setData({
          src:res.tempImagePath
        })
      }
    })
  },
  error(e){
    console.long(e.datail)
  }
})

其他组件

map:

  

<map id="map"
longitude="108.9200"
latitude="34.1550"
scale="14"
controls="{{controls}}"
bindlabeltap="controls"
markers="{{markers}}"
bindmarkertap="markers"
polyline="{{polyine}}"
bindregionchange="regionchange"
show-location 
style="width: 100%; height: 300px;"></map>
//js
Page({
  data:{
    markers:[{
      iconPath:"/pages/dw.png",
      id:0,
      longitude:"108.9290",
      latitude:"34.1480",
      width:50,
      height:50
    }],
    polyline:[{
      points:[
        {
          longitude:"108.9200",
          latitude:"34.1400"
        },
        {
          longitude:"108.9200",
          latitude:"34.1500"
        },
        {
          longitude:"108.9200",
          latitude:"34.1700"
        }
      ],
      color:"#00ff00",
      width:2,
      dottedLine:true
    }],
    controls:[{
      id:1,
      iconPath:'/pages/dw.png',
      position:{
        left:0,
        top:300,
        width:30,
        height:30
      },
      clickable:true
    }]
  },
  regionchange(e){
    console.log(e.type)
  },
  markertap(e){
    console.log(e.markerId)
  },
  controltap(e){
    console.log(e.controlId)
  }
})

canvas:

<canvas canvas-id="myCanvas" style="border: 1px solid pink;"/>
//js
Page({
  onLoad:function(options){
    var ctx=wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('green')
    ctx.fillRect(10,10,200,100)
    ctx.draw()
  }
})

第五章

 即速应用的优势：

1. 开发流程简单，零门槛制作
2. 行业模板制作，种类齐全
3. 丰富的功能组件和强大的管理后台

应用组件

基本组件：

文本组件：

文本组件用于展示文字，设置点击事件，是小程序页面中最常用的组件

图片列表组件：

图片列表组件可以将图片以列表的形式展示，还可以设置图片的名称、标题和点件。

按钮组件：

按钮组件用于在页面中展示按钮

标题组件：

标题组件用于在页面中展示标题

轮播组件：

轮播组件用于实现图片的轮播展示

分类组件：

设置不同内容展示在不同类别中，还可以添加、删除分类的个数及进行应的设置

视频列表组件：

图文集组件：

图文集组件用于展示图片、标题和简介

视频组件：

视频组件用于展示视频

布局组件：

双栏：

双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时自则不会出现。双栏组件默认设置每个栏占50%总宽，也动态分类可以按实际需要调整比例。双栏里面可以添加基本的组4、从面达到整体的布局效果。双栏还可以嵌套双栏，即可以在其中的一个栏里嵌入一个双栏双面将整体分成3部分

面板：

面板组件相当于一个大画板，用户可以将很多基本(甚至高级)的组件(如文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等)放进面板组件里一起管理

自由面板：

自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户既可以向自由面板内卷入部分组件(包括文本组件、图片组件和按钮组件)，也可以拖入任意相关容器组件，用于不规则布局

滑动面板：

侧边栏：

分割线：

分割线组件被放置于任意组件之间，用于实现分割。

悬浮窗：

顶部导航：

顶部导航组件固定于页面顶部，用于编辑顶部的导航。常用的手机应用顶部有一条导航，上面写有手机应用App的名称或logp，以及返回键等

底部导航：

底都导航组件固定于页面底部，用于编辑底部的导航。

动态分类：

动态分类组件仪适用于电商、到店类小程序。用户通过选择动态分类组件的样式，可以实现顶部分类、边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序

高级组件：

动态列表组件：

态列表组件是容纳基础组件来展示后台数据的容器，通过添加基础组件来展示对应的后数据

个人中心组件：

个人中心组件显示个人相关信息的组件，包括图像、昵称、我的订单、收货地址、购物车等

动态表单组件：

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

评论组件：

评论组件提供信息发布或回复信息的组件

计数组件：

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

地图组件：

地图组件用于显示指定地址的地图，常用于实现定位及导航功能

城市定位组件：

城市定位组件通常与列表类组件搭配使用，常见搭配有动态列表和商品列表。例如,城市定位组件与商品列表搭配，可以实现通过城市定位来搜索出某具体位置信息下的商品列

悬浮窗组件：

悬浮窗组件的固定搭配有:客服、我的订单、购物车、回到顶部。悬浮窗组件通常出现在个人中心或商品列表页面

其他组件：

音频组件：

音频组件用于播放音乐(每个页面有一个音组件即可)，手动点击播放按钮后即可现播放。音频文件可以选择音频库中的音乐，出可以上传本地音频进行更换

动态容器组件：

动态容器组件用于动态页面，即所在页面绑定了数据对象。动态容器组件中可以添加种组件--文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件计数组件。其中，文本组件和图片组件可以绑定相应的数据对象字段(填充相应动态据)，若有计数组件、则会自动与动态容器关

即速应用后台管理：

数据管理：

数据管理包括数据总览、访客分析和传播数据功能数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线图

分享设置：

分享设置主要提供可以分享应用的方式

用户管理：

分享设置主要提供可以分享应用的方式

应用数据：

成用数据是后台管理的主要内容，前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据。

轮播管理：

轮播管理是前端软播组件的后台数据管理器，通过软播管理来设置前端软播组件展示的图片内容

分类管理：

分类管理适用于电商，到店、用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示向用数据、商品数据等效果。动态分类的二级有图模式只适用于电商

商品管理：

商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理。商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细，运费管理和评价管理功能

经营管理：

经营管理丰要包括子账号管理、手机端客户关系管理和短信接收管理，便于管理者管理小程序的运营。

营销工具：

营销工具是小程序营销推广的有力工具，主要有会员卡、优惠券、积分、储值、推广秒杀，集集乐，拼团活动、大转盘、砸金蛋、刮刮乐等。这些营销工具都需要事前在后台合理设置后，才能在活动中发挥更大的作用

多商家管理：

多商家管理是即建应川为有众多商家的商城(如“华东商城”“义乌商城”等)开设的管理功能，万便管理者统计每家店铺的订单及进行收益分析

第六章

 网络API

发起网络请求

wx.request(0bject)接口 用于发起HTTPS 请求
wx.uploadFile(0bject)接口 用于将本地资源上传到后台服务器
wx.downloadFile(0bject)接口 用于下载文件资源到本地
wx.connectSocket(0bject)接口用于创建一个WebSocket 连接
wx.sendSocketMessage(0bject)接口 用于实现通过WebSocket 连接发送数据
wx.closeSocket(0bject)接口 用于关闭 WebSocket 连接
wx.onSocketOpen(CallBack)接口用于监听WebSocket 连接打开事件
wx.onSocketError(CallBack)接口 用于监听 WebSocket 错误
wx.onSocketMessage(CallBack)接口用于实现监听WebSocket接收到服务器的消息
事件
wx.onSocketClose(CallBack)接口 用于实现监听WebSocket 关闭

通过wx.request获取百度首页数据

<button type="primary"bindtap="getbaidutap">获取HTML数据</button>
<textarea value='{{html}}'auto-heightmaxlength='0'></textarea>
//js
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
        })
      }
    })
  }
})

 

  通过wx.request的GET方法获取邮政编码对应地址信息

<view>邮政编码：</view>
<input type="text"bindinput="input"placeholder='6位邮政编码'/>
<button type="primary"bindtap="find">查询</button>
<block kwx:for="{{address}}">
<text>{{item}}</text>
</block>
//js
Page({
  data:{
    postcode:"",
    address:[],
    errMsg:"",
    error_code:-1
  },
  input:function(e){
    this.setData({
      postcode:e.datail.value,
    })
    console.log(e.detail.value)
  },
  find:function(){
    var postcode=this.data.postcode;
    if(postcode!=null&&postcode!=""){
      var self=this;
      wx.showToast({
        title: '正在查询，请稍后......',
        icon:'loading',
        duration:10000
      });
      wx.request({
        url:'https://v.juhe.cn/postcode/query',
        data:{
          'postcode':postcode,
          'key':'0ff9bfccdf147476e067de994eb5496e'
        },
        header:{
          'Content-Type':'application/json',
        },
        method:'GET',
        success:function(res){
          wx.hideToast();
          if(res.data.error_code==0){
            console.log(res);
          self.setData({
            errMsg:"",
            error_code:res.data.error_code,
            address:res.data.result.list
          })
        }
       else{
          self.setData({
            errMsg:res.data.reason || res.data.reason,
            error_code:res.data.error_code
          })
        }
      }
      })
    }
  }
})

 通过wx.request的POST方法获取邮政编码对应地址信息

<view>邮政编码：</view>
<input type="text"bindinput="input"placeholder='6位邮政编码'/>
<button type="primary"bindtap="find">查询</button>
<block kwx:for="{{address}}">
<block kwx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>
//js
Page({
  data:{
    postcode:"",
    address:[],
    errMsg:"",
    error_code:-1
  },
  input:function(e){
    this.setData({
      postcode:e.datail.value,
    })
    console.log(e.detail.value)
  },
  find:function(){
    var postcode=this.data.postcode;
    if(postcode!=null&&postcode!=""){
      var self=this;
      wx.showToast({
        title: '正在查询，请稍后......',
        icon:'loading',
        duration:10000
      });
      wx.request({
        url:'https://v.juhe.cn/postcode/query',
        data:{
          'postcode':postcode,
          'key':'0ff9bfccdf147476e067de994eb5496e'
        },
        header:{
          'Content-Type':'application/X-www-form-urlencoded'
        },
        method:'POST',
        success:function(res){
          wx.hideToast();
          if(res.data.error_code==0){
            console.log(res);
          self.setData({
            errMsg:"",
            error_code:res.data.error_code,
            address:res.data.result.list
          })
        }
       else{
          self.setData({
            errMsg:res.data.reason || res.data.reason,
            error_code:res.data.error_code
          })
        }
      }
      })
    }
  }
})

上传文件 

  通过wx.uploadFile将图片上传到服务器

<button type="primary" bindtap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"/>
//js
Page({
  data:{
    img:null,
  },
  uploadimage:function(){
    var that=this;
    wx.chooseImage({
      success:function(res){
        var tempFilePaths=res.tempFilePaths
        upload(that.tempFilePaths);
      }
    })
    function upload(page,path){
      wx.showToast({
        icon:"loading",
        title: '正在上传',
      }),
      wx.uploadFile({
        url:"http://localhost/",
        filePath: 'path[0]',
        name: 'file',
        success:function(res){
          console.log(res);
          if(res.statusCode!=200){
            wx.showModal({
                title: '提示',
                content: '上传失败',
                showCancel:false
            })
            return;
          }
          var data=res.data
          page.setData({
            img:path[0]
          })
        },
        fail:function(e){
          console.log(e);
          wx.showModal({
            title:'提示',
            content: '上传失败',
            showCancel:false
          })
        },
        complete:function(){
          wx.hideToast();
        }
      })
    }
  }
})

下载文件

<button type="primary" bindtap='downloadimage'>下载图片</button>
<image src="{{img}}" mode="widthFix" style="width: 90%;height: 500px;"></image>
//js
Page({
  data:{
    img:null
  },
  downloadimage:function(){
    var that=this;
    wx.downloadFile({
      url: 'http://localhost/1.jpg',
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  }
})

 多媒体API

图片API

wx.chooselmage(Object)接口 用于从本地相册选择图片或使用相机拍照。
wx.previewImage(Object)接口 用于预览图片。
wx.getlmageInfo(Object)接口 用于获取图片信息。
wx.savelmageToPhotosAlbum(Object)接口 用于保存图片到系统相册

选择图片或拍照

wx.chooseImage({
  count:2,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths=res.tempFilePaths
    var tempFiles=res.tempFiles;
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
})

预览图片

wx.previewImage({
  current:"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
  urls: ["http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
  "http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
  "http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"]
})

 获取图片信息

wx.chooseImage({
  success:function(res){
    wx.getImageInfo({
      src: 'res.tempFilePaths[0],',
      success:function(e){
        console.log(e.width)
        console.log(e.height)
      }
    })
  }
})

 保存图片到系统相册

wx.chooseImage({
  success:function(res){
    wx.saveImageToPhotosAlbum({
      filePath: 'res.tempFilePaths[0]',
      success:function(e){
        console.log(e)
      }
    })
  }
})

 录音API

wx.startRecord(0bject)接口 用于实现开始录音。
wx.stopRecord(0bject)接口用于实现主动调用停止录音

开始录音

 停止录音

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

 音频播放控制API

wx.playVoice(0bject)接口 用于实现开始播放语音
wx.pauseVoice(0bject)接口用于实现暂停正在播放的语音
wx.stopVoice(Object)接口 用于结束播放语音。

播放语音

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

 暂停播放

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)
  }
})

 音乐播放控制API

wx.playBackgrundAudio(0bject)接口用于播放音乐
wx.getBackgroundAudioPlayerState(0bject)接口 用于获取音乐播放状态
wx.seekBackgroundAudio(0bject)接口 用于定位音乐播放进度
wx.pauseBackgroundAudio()接口用于实现暂停播放音乐
wx.stopBackgroundAudio()接口 用于实现停止播放音乐
wx.onBackgroundAudioPlay(CallBack)接口 用于实现监听音乐播放
wx.onBackgroundAudioPause(CallBack)接口 用于实现监听音乐暂停
wx.onBackgroundAudioStop(CallBack)接口 用于实现监听音乐停止

<view class="container">
<image class="bgaudio" src="{{changedImg? music.coverImg:'/image/qyc.jpg'}}"/>
<view class="control-view">
<image src="/image/qyc.jpg"bindtap="onPositionTap"data-how="0"/>
<image src="/image/{{isPlaying?'pause':'qyc'}}.jpg"bindtap="onAudioTap"/>
<image src="/image/qyc.jpg"bindtap="onStopTOP"/>
<image src="/image/qyc.jpg"bindtap="onPositionTap"data-how="1"/>
</view>
</view>
//wxss
.bgaudio{
  height: 350rpx;
  width: 350rpx;
  margin-bottom: 100rpx;
}
.control-view image{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}
//js
Page({
  data:{
    isPlaying:false,
    coverImgchangedImg:false,
    music:{
      "url":"http://bmob-cnd-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
      "title":"盛晓玫-有一天",
      "coverImg":
      "http://bomb-cnd-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg"
    },
  },
  onLoad:function(){
    this.onAudioState();
  },
  onAudioTap:function(event){
    if(this.data.isPlaying){
      wx.pauseBackgroundAudio();
    }else{
      let music=this.data.music;
      wx.playBackgroundAudio({
        dataUrl: music.url,
        title:music.title,
        coverImgUrl:music.coverImg
      })
    }
  },
  onStopTap:function(){
    let that=this;
    wx.stopBackgroundAudio({
      success:function(){
        that.setData({isPlaying:false,changedImg:false});
      }
    })
  },
  onPositionTap:function(event){
    let how=event.target.datase.how;
    wx.getBackgroundAudioPlayerState({
      success:function(res){
        let status=res.status;
        if(status===1){
          let duration=res.duration;
          let currentPosition=res.currentPosition;
          if(how==="0"){
            let position=currentPosition-10;
            if(position<0){
              position=1;
            }
            wx.seekBackgroundAudio({
              position: position,
            });
            wx.showToast({title:"快退10s",duration:500});
          }
          if(how==="1"){
            let position=currentPosition+10;
            if(position>duration){
              position=duration-1;
            }
            wx.seekBackgroundAudio({
              position: position,
            });
            wx.showToast({title: "音乐未播放",duration:500});
             }
          }else{
            wx.showToast({title: "音乐未播放",duration:800});
          }
      }
    })
  },
  onAudioState:function(){
    let that=this;
    wx.onBackgroundAudioPlay(function(){
      that.setData({isPlaying:true,changedImage:ture});
      con

 

文件API

wx.saveFile(0bject)接口 用于保存文件到本地
wx.getSavedFileList(0bject)接口 用于获取本地已保存的文件列表
wx.getSaveFilelnfo(0bject)接口 用于获取本地文件的文件信息
wx.removeSaveFile(0bject)接口 用于删除本地存储的文件
wx openDocument(0bject)接口 用于新开页面打开文档，支持格式:doc、xls、pdf、ppt、docx、xlsx、ppts

保存文件

saveImg:function(){
  wx.chooseImage({
    count:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
      var tempFilePaths=res.tempFilePaths[0]
      wx.saveFile({
        tempFilePath:tempFilePaths,
        success:function(res){
          var saveFilePath=res.savedFilePath;
          console.log(saveFilePath)
        }
      })
    }
  })
}

 获取本地文件列表

wx.getSavedFileList({
  success:function(res){
    that.setData({
      fileList:res.fileList
    })
  }
})

 获取本地文件的文件信息

wx.chooseImage({
  count:1,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths=res.tempFilePaths[0]
    wx.saveFile({
      tempFilePath:tempFilePaths,
      success:function(res){
        var saveFilePath=res.savedFilePath;
        wx.getSavedFileInfo({
          filePath:saveFilePath,
          success:function(res){
            console.log(res.size)
          }
        }）
      }
    }）
  }
}）

删除本地文件 

wx.getSavedFileList({
  success:function(res){
    if(res.fileList.length>0){
      wx.removeSavedFile({
        filePath:res.fileList[0].filePath,
        complete:function(res){
          console.log(res)
        }
      })
    }
  }
})

 打开文档

wx.downloadFile({
  url:"http://localhost/fm2.pdf",
  success:function(res){
    var tempFilePath=res.tempFilePath;
    wx.openDocument({
      filePath:tempFilePath,
      success:function(res){
        console.log("打开成功")
      }
    })
  }
})

本地数据及缓存API        

保存数据

 wx.setStorage(object)接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来的key对应的内容

wx.setStorage({
  key:'name',
  data:'sdy',
  success:function(res){
    console.log(res)
  }
})

 wx.setStorageSync(key,data)是同步接口，其参数只有key和data。

wx.setStorageSync('age', '25')

获取数据

wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。

wx.getStorage({
  key:'name',
  success:function(res){
    console.log(res.data)
  },
})

 wx.getStorageSync(key)从本地缓存中同步获取指令key对应内容。

try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
}catch(e){
  console.log("获取失败")
}

删除数据

wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。

wx.removeStorage({
  key: 'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})

wx.removeStorageSync(key)接口用于从本地缓存中同步删除指定key对应的内容。

try{
  wx.removeStorageSync('name')
}catch(e){
  
}

清空数据

wx.clearStorage()接口用于异步清理本地数据缓存，没有参数。

wx.getStorage({
key:'name',
successs:function(res){
wx.clearStorage()
},
})

wx.clearStorageSync()接口用于同步清理本地数据缓存。

try{
wx.clearStorageSync()
}catch(e){
}

位置信息API

小程序可以通过位置信息AP1来获取或显示本地位置信息，小程序支持WCS84和CC0标准，WGS84标准为地球坐标系，是国际上通用的坐标系;CCj02标准是中国国家测绘局定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系默认为 WGS84 标准，若要查看位置需要使用GCj02标准。主要包括以下3个AP接口,

wx.getLocation(Objeet)接口用于获取位置信息。

wx.chooseLocation(Objeet)接口用于选择位置信息。

wx.openLocation(0bjeet)接口用于通过地图显示位置。

获取位置信息

wx.getLocation(0bject)接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部时、可以获取到定位信息。

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

 选择位置信息

wx.chooseLocation(Object)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称，地址，经维度信息。

wx.chooseLocation(
success:function(res)
console.log("位置的名称:"+res.name)console.l0g("位置的地址:"+res.address)
console.log("位置的经度:"+ res.longitude)
console.log("位置的纬度:"+res.latitude)
}
})

显示位置信息

wx.openLocation(Object)接口用于在微信内置地图中显示位置信息。

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号'
})
}
})

设备相关API

设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口 API:
wx.getSystemInfo(Object)接口、wx.getSystemInfoSyne()接口 用于获取系统信息wx.getNetworkType(Object)接口 用于获取网络类型
wx.onNetworkStatusChange(CallBack)接口用于监测网络状态改变
wx.makePhoneCall(Object)接口 用于拨打电话
wx.scanCode(Object)接口用于扫描二维码

获取系统信息

wx. getSystemInfo(0bject)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。

 wx.getSystemInfo()接口或wx.getSystemInfoSyne()接口调用成功后，返回系统相关信息

wx.getSystemInfo({
success:function(res){
console.log("手机型号:"+res.model)
console.log("设备像素比:"+res.pixelRatio)
console.log("窗口宽度:"+res.windowWidth)
console.log("窗口高度:"+res.windowHeight)
console.log("微信版本号:"+res.version)
console.log("操作系统版本:"+res.system)
console.log("客户端平台:"+res.platform)
}，
})

 网络状态

获取网络状态

wx.getNetworkType(Object)用于获取网络类型

wx.getNextworkType({
success:function(res){
console.log(res.networkType)
},
})

监听网络状态变化

wx.onNetworkStatusChange(CallBack)用于监听网络变化，当网咯状态变化时，返回当前状态类型及是否有网络连接

wx.onNextworkStatusChange(function(res){
console.log("网络是否连接:"+res.isConnected)
console.log("变化后的网络类型:"+res.networkType)
})

拨打电话

wx.makePhoneCall({
phoneNumber:'18092585093'
})

扫描二维码

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

 扫码成功后返回数据如下

//允许从照相机和相册扫码
wx.scanCode({
success:(res)=>{
console.log(res.result)
console.log(res.scantype)
console.log(res.charSet)
console.log(res.path)
}
})

//只允许从相机扫码
wx.scanCode({
onlyFromCamera:true,
success:(res)=>{
console.log(res)
}
})