微信公众号和小程序的主要区别？
1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）
2、实现技术区别（公众号基于H5（html5 vue angualr react ionic），小程序必须用小程序的语法开发）
3、用户体验（小程序的用户体验要比 html5好一些，更接近原生app）
4、调用原生的能力（微信公众号可以借助jssdk调用手机的摄像头拍照，调用扫描二维码等能力有限。小程序调用原生的能力非常强大，能实现几乎app能实现的所有功能）（调用原生的功能 *可以不开发app ）
5、微信app上面的入口不一样

微信小程序的应用场景：
互联网+ 物联网+ 人工智能+
餐厅点餐+小程序
基于LBS小程序直接搜索附近的餐厅，进店用进行扫码点餐、支付。
无人点餐：
公交+小程序
公交车站放一个小程序二维码，扫一扫就知道公交什么时候来。
买电影票+小程序
进入小程序直接搜附近电影院下单搞定。
加油站缴费+小程序
加油下车排队缴费太麻烦，扫小程序不用下车就能解决。
火车上叫餐+小程序
不用去固定车厢点餐，扫座椅后背的小程序二维码下单，乘务员给你送来。
旅行+小程序
旅行酒店预订、周边攻略、目的地、游记等都可以在小程序里轻松搞定。
快递+小程序
一键打开快递小程序，查看自己的订单，查看快递送达的时间，查看宝贝现在的物流情况
医疗+小程序
用小程序，提前挂号、网上排队，就医后扫码支付，直接拿药
景区+小程序
扫描景点门票小程序的二维码，即可查看景区详情
零售+小程序
想吃个水果或吃点零食，直接搜索附近小程序下单，送货上门。

小程序开发文档、开发工具、开发指南、体验demo：
开发文档
https://developers.weixin.qq.com/miniprogram/dev/
开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
体验demo
https://developers.weixin.qq.com/miniprogram/dev/demo.html?t=1477656485442

3.创建小程序注册小程序账户小程序工具功能介绍以及小程序的目录结构分析

目录结构：

pages-所有页面
首页index 业务逻辑.js wxml–html wxss-css
登录脚本多了一个配置文件json
utils
工具js 模块化的东西
App.js
全局的js文件其他地方调用App 只需要用 const app=getApp(); 获取应用实例
App.json
全局的配置文件整个页面导航条的颜色底部菜单切换
app.wxss
全局css文件
project
项目配置文件一般不改动

视图——wxml wxss
业务逻辑——js

4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍绑定数据、绑定属性、条件判断、循环渲染数据

MINA框架介绍

MINA(MINA IS NOT APP) 是在微信中开发小程序的框架。
MINA的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
MINA提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
MINA的核心是一个响应的数据绑定系统。
整个系统分为两块视图层(View)和逻辑层(App Service)
MINA可以让数据与视图保持同步非常简单。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新
MINA是腾讯给微信小程序命名的框架，其实他实际上应用的是目前IT界最被推崇的MVVM模式。

微信小程序与H5的不同之处：

view=div
text=span
没有ul li

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

数据绑定与Vue差不多
有判断条件

<view class='box' wx:if='{{flag}}'>
绑定属性
 <view data-aid="{{aid}}">放上去看一下</view>
循环数据——简单数组
<view class='list'>
  <view class='item' wx:for="{{list}}">
      {{index}}-----{{item}}
  </view>
</view>
循环数据——数组里面有对象
<view class='list'>
  <view class='item' wx:for="{{list1}}">
      {{index}}-----{{item.title}}
  </view>
</view>

嵌套循环
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

<view class='list'>
  <view class='item' wx:for="{{list2}}">
      {{item.cate}}

      <view wx:for="{{item.list}}">
      -------{{item.title}}
      </view>
  </view>
</view>

<view class='list'>
  <view class='item' wx:for="{{list2}}" wx:for-item=“item”>
      {{item.cate}}

      <view wx:for="{{item.list}}" wx:for-item=“car”>
      -------{{car.title}}
      </view>
  </view>
</view>

5.微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件

不可以使用alert方法
自定义方法与data同级

没有br换行
<view class='br'> </view>

执行方法的几种写法：
1.在生命周期函数里面调用方法
this.run（）

2.<button size="mini" bindtap='run'>执行run方法</button>
注意触发方法不需要写（）

3.获取data的数据
console.log(this.data.msg);

4.改变data的数据

his.setData({
      msg:'我是改变后的msg'
    })

MVVM:是Model-View-ViewModel的简写,将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

事件对象:原生js相似鼠标按下的当前DOM节点和一切的相关信息
获取自定义属性的值

 doEventFn(e){
    console.log(e);
    console.log(e.currentTarget.dataset.aid);
  }

小程序里面执行方法传值——在view视图层执行方法传值
不能直接传值需要靠event 事件对象

requestViewData(event){
    console.log(event.currentTarget.dataset);
  }
<button size="mini" data-aid='234' data-cid='234xsxs' bindtap='requestViewData'>执行方法传值</button>

冒泡与非冒泡事件

事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 bindtap
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 catchtap

6.微信小程序app.json配置视图样式、配置底部tab切换、页面跳转配置页面里面的.json文件

app.json的配置和使用：
1.pages配置路由、windows显示效果、底部tab切换
导航条只支持黑色和白色
1、小程序里面的资源不能大于2M

2、底部tab切换菜单最少2个最多5个

 "tabBar": {
    "color":"#666",
    "selectedColor":"#f60",
    "backgroundColor":"#eee",
    "borderStyle":"white",
    "position":"bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"static/images/home1.png",
        "selectedIconPath":"static/images/home.png"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻",
        "iconPath":"static/images/news1.png",
        "selectedIconPath":"static/images/news.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath": "static/images/user1.png",
        "selectedIconPath": "static/images/user.png"
      }
    ]
  }

页面跳转：

从一个页面跳转到另一个页面

  goShop(){
    wx.navigateTo({
      url: '../shop/shop'
    })
  }

7.微信小程序小小练习小程序页面跳转传值、请求Api接口获取服务器数据【无人点餐系统菜品页面制作】

页面跳转传值：

<button size="mini" data-aid="22" bindtap='goFoodContent'>跳转到详情页面传值2</button>

goFoodContent(event){
    console.log(event.currentTarget.dataset.aid);
    var aid = event.currentTarget.dataset.aid;
    wx.navigateTo({
      url: '../foodcontent/foodcontent?aid='+aid
    })
  }

跳转到的页面来监听上个页面传过来的值

	onLoad: function (options) {
    //获取上一个页面的传值
    console.log(options);
  }

请求数据：
wx.request
WX样式的字体有另一种单位——移动端一般喜欢用rem
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
一般移动端设计：宽度自适应，高度按照设计稿的一半

获取数据在嵌套循环

requestData(){
    var that = this;
    wx.request({
      url: 'http://a.itying.com/api/productlist', // 仅为示例，并非真实的接口地址
      data: {

      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data);
        //用this需要注意this箭头指向
       that.setData({
          list:res.data.result
        })
      }
    })
  }

列表：http://a.itying.com/api/productlist

详情：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955

8.微信小程序小小练习解决图片显示问题、页面跳转、以及通过api接口获取详情页面数据【无人点餐系统菜品详情页面制作】

网络图片获取显示：
网络图片地址：\这个斜杠不可以解析
1.服务器数据返回时就将斜杠改为/
2.客户端解决

 requestData(){
    var that = this;
    wx.request({
      url: 'http://a.itying.com/api/productlist', // 仅为示例，并非真实的接口地址
      data: {

      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data);
        //替换 \ /
        var arr = res.data.result;

        for(var i = 0; i < arr.length; i++){
          for (var j = 0; j < arr[i].list.length; j++){
            arr[i].list[j].img_url = arr[i].list[j].img_url.replace(/\\/g,'/');-----用了正则表达式
          }
        }
        //用this需要注意this箭头指向
        that.setData({
          list:arr
        })
      }
    })
  }

地址改为本地地址：

 host:'http://a.itying.com/'
<image src='{{host}}{{food.img_url}}'></image>

列表：http://a.itying.com/api/productlist

详情：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955

9.小程序wxParse插件解析html数据【解析无人点餐系统菜品详情页面html】

web-view远程页面在服务器端但是有局限性

wxParse插件——解析HTML数据

1、找到demo
https://github.com/icindy/wxParse

2、下载这个demo

3、把demo里面的wxParse目录拷贝到我们的项目里面

4、在我们要用到的页面的js里面引入 wxParse下面的js

      var WxParse = require('../../wxParse/wxParse.js');
数据绑定
      var article = '<div>我是HTML代码</div>';
//article是需要渲染的html代码
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
      var that = this;
       WxParse.wxParse('article', 'html', article, that, 5);

5、可以在app.wxss引入 wxParse.wxss

	@import "wxParse/wxParse.wxss";

6、模板 wxml引入下面代码

         <import src="你的路径/wxParse/wxParse.wxml"/>
          //这里data中article为bindName
        <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

10.微信小程序中的模块化utils 以及全局app.js 配置无人点餐项目公共的api地址【配置无人点餐项目公共api】

公共模块封装一下：
模块化-----utils
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块里面的属性和方法默认是私有的，
模块只有通过 module.exports 或者 exports 才能对外暴露接口。
在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

var config={
  host: 'http://a.itying.com/',
  getHost(){
    return this.host;
  }
}
module.export=config;

在需要使用的页面引用：

var config=require('../../utils/config.js');

将请求数据的api合并一下,可以统一管理

app.js-----小程序逻辑
App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

全局函数
//获取应用实例
const app = getApp()
//获取方法
 //调用app.js全局方法
app.getAppMsg();

11.微信小程序中的WXS 脚本语言的使用

WXS–公共的业务逻辑
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构

把公共的功能抽离成一个单独的WXS, 可以在模板中使用WXS暴露的数据和方法

WXML需要调用自定义的方法，可以放在wxs文件中

注意

wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

utils里面的语法跟JS语法一致
变量名不能是关键字保留字
使用看文档：
数据类型有点区别

格式化日期的功能：
时间戳—对应日期
wxml文件中写

<wxs src="../../wxs/utils.wxs" module="utils" />
<view>{{utils.formatDate(d)}}</view>

wxs文件中写

var formatDate = function (oTime) {
  //传入时间戳 转换成 2019/1/14
  var d = date = getDate(parseFloat(oTime));

  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')

  console.log(d);
}

var formatNumber = function (n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatDate: formatDate
};

12.微信小程序中的自定义组件注册组件

微信小程序不可以使用html标签进行布局要使用小程序提供的内置标签

view image text button

用法：
1.可以把公共的功能封装起来方便其他地方使用
2.可以扩展html–wxml构建应用的不足–标签的不足

自定义组件

1.新建components文件夹

2、在components文件夹下面创建一个组件文件夹，然后点击右键创建组件（components）、
组件也是由四个文件组成—.js .json .wxml .wxss

3、注册组件：–在哪个页面用就在哪个页面的json中注册

{
  "navigationBarTitleText":"新闻页面",

   "usingComponents": {
                 "br": "../../components/br/br" ,

                  "header": "../../components/header/header"
  }
}

注意路径

1.扩展标签—自定义空行标签<br>
2.扩展标签—自定义头部标签<header>

13.微信小程序中的自定义组件父子组件组件事件父子组件传值

父子组件传值：
父组件传给子组件！！！
1.父组件调用子组件的时候给自组件绑定属性

2、在子组件的properties 里面接收父组件传过来的数据

properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    },
    myProperty2: String // 简化的定义方式
  }

components子组件触发事件：
是一样的

14.微信小程序中的自定义组件 slot 子组件调用父组件的方法、父组件调用子组件的方法

只有component的方法才在methods里面写，pages的方法函数与data同级

父组件给子组件传值

父组件调用子组件的时候给自组件绑定属性
在子组件的properties 里面接收父组件传过来的数据

   properties: {
       myProperty: { // 属性名
         type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
         value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
         observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
       },
      myProperty2: String // 简化的定义方式
    }

父组件调用子组件的方法

调用子组件的时候定义一个id
<header id="header"></header>
父组件获取子组件的实例
var header = this.selectComponent("#header")
3、header.方法名调用子组件里面的方法
header.data.msg父组件里面直接获取子组件的数据

子组件执行父组件里面的方法

子组件里面执行父组件的方法
this.triggerEvent('myevent', 数据, 参数）
父组件绑定方法
<footer bindmyevent="run" />
真正的方法函数是run myevent是用来标识那个是父子组件
run(e)可以得到父组件的一些数据

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个<slot>节点，用于承载组件引用时提供的子节点。

15.微信小程序自定义toast组件代码讲解

16.小程序view 结合scroll-view结合真实新闻客户端api实现上拉分页加载更多

scrollview实现上拉分页加载更多

<scroll-view
    scroll-y
    style="height: {{windowHeight}}px;"
    bindscrolltolower="loadMore"
  >
      <view class='list'>
        <view class='item' wx:for="{{list}}">
            {{item.title}}
        </view>
      </view>
</scroll-view>

必须设置高度不然拉到最底部不可以触发方法

得到浏览器高度----wx.getSystemInfo({
  success(res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})
   //获取屏幕高度
     wx.getSystemInfo({
      success(res) {
        that.setData({
          windowHeight: res.windowHeight
        })
        console.log(res.windowHeight);
      }
    })

  requestData(){
    var that=this;
    var api = 'http://www.phonegap100.com/appapi.php';
    wx.request({
      url: api, // 仅为示例，并非真实的接口地址
      data: {
        a: 'getPortalList',
        catid: '20',
        page:this.data.page
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        //console.log(res.data);
        var list = that.data.list.concat(res.data.result);----新旧数据拼接
        var page = ++that.data.page;
        that.setData({
          list:res.data.result,
          page:page
        })
      }
    })
  }

存在的问题：
1.加载重复页面
2.没数据还是会触发请求

列表
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
详情
http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=123

17.小程序view 结合scroll-view结合真实新闻客户端api实现上拉分页加载更多重复请求没有数据不请求

1.重复触发页面的解决方法：
多一个判断选择

flag:true
requestData(){
先改变
this.setData({
      flag:false
    })
}
再改变为true
this.setData({
      flag:true
    })
}

 loadMore(){
    if(this.data.flag){
      this.requestData();
    }
}

2.没有数据就结束请求
根据返回数据的长度来决定

18.微信小程序导入小程序代码、导入代码片段、官方组件介绍以及实现swiper组件

小程序内置组件
导入官方的代码块–官方文档–代码片段—小程序demo—在开发者工具中预览效果–有相应程序代码—知道修改

19.微信小程序 video cover-view cover-image 组件的使用

cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。

摩拜单车：上面是地图，下面是扫码
视频播放：自定义播放器的条和按钮视频标签放一个cover-view覆盖物组件，对覆盖物布局

小程序调用视屏和地图都是调用原生组件

改变视频播放的播放条
JS语言演示：
video的id需要对应起来才能识别
按钮方法–注意myVideo是ID

 onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play() {
    this.videoCtx.play()
  },
  pause() {
    this.videoCtx.pause()
  }

<view class='video_box'>
    <video
      id="myVideo"
      src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
      controls="{{false}}"
      event-model="bubble"
    >

      </video>

      <view class='controls'>
        <view bindtap='play'>播放</view>
        <view bindtap='pause'>暂停</view>

      </view>

</view>
根据自己的喜好改变样式
.video_box{
   position:relative;

}
#myVideo{
  width:100%;
}

.controls{
  height:80rpx;
  line-height: 80rpx;
  position:absolute;
  bottom:0px;
  background: rgba(0,0,0,0.5);
  width:100%;
  color:#fff;
  text-align:center;
  display: flex;
}

.controls view{
  width:200rpx;
}

cover-image:看文档

20.微信小程序基础内容组件 icon 、text 、rich-text、progress

基础内容组件：
icon 图标
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

text
相当于span标签
selectable Boolean false 文本是否可选
有时候没效果？？

相当于 span标签  解析为空格

空格输入：半角改成全角下的英文输入法空格 或者css实现空格

rich-text
传入类型：Array / String
解析简单的文本内容是可以的，但是如果是图片的话就不太好用----用WXparse

progress
进度条。
属性：percent show-info stroke-width activeColor backgroundColor

21.微信小程序表单组件 button checkbox form input label radio slider switch textarea 获取表单数据

表单组件：
多了picker
通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。还可以自定义选择器
picker-view、switch

1.input

type:属性决定弹出的键盘的类型
password:属性决定是否是密码符号
focus:获取焦点–输入键盘自动弹起
confirm-type设置键盘右下角按钮的文字（send-发送，done-完成），仅在type='text’时生效
adjust-position 键盘弹起时，是否自动上推页面
bindinput 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
可以获取表单输入的值

2.checkbox

多选项目。
checkbox-group 多项选择器，内部由多个checkbox组成。
bindchange<checkbox-group>中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

任何项目改变都会触发bindchange里面的方法。。value放在一个数组

3.radio

单选项目
radio-group
单项选择器，内部由多个<radio>组成。
bindchange <radio-group>中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

4.switch

开关选择器。

5.form

bindsubmit 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
注意要起名字

 doPost(e){
  //获取form表单提交的数据  注意表单需要定义名称
     console.log(e.detail.value);
  }

小程序用form获取各个表单的数据
1.整个表单用form包含起来
2.各个表单有唯一的独特名字来标识
3.按钮来提交数据、清空数据

   <view class="btn-area">
      <button form-type="submit">Submit</button>
      <button form-type="reset">Reset</button>
  </view>
   4.form绑定提交表单的方法
<form bindsubmit='doPost'>

22.微信小程序表单组件 picker picker-view 实现日期区域联动选择

picker
三级联动选择器

1.普通选择器：

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">当前选择：{{array[index]}}</view>
</picker>

range:数组或者对象
value:表示选择了 range 中的第几个（下标从 0 开始）
array:从哪个数组开始选择
index:数组的索引
改变触发方法

bindPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }

2.时间选择器

<picker
    mode="time"
    value="{{time}}"
    start="09:01"--范围
    end="21:01"
    bindchange="bindTimeChange"
  >
    <view class="picker">当前选择: {{time}}</view>
  </picker>

value：表示选中的时间，格式为"hh:mm"

bindTimeChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  }

3.日期选择器

 <picker
    mode="date"
    value="{{date}}"
    start="2015-09-01"
    end="2017-09-01"
    bindchange="bindDateChange"
  >
    <view class="picker">当前选择: {{date}}</view>
  </picker>

value：表示选中的日期，格式为"YYYY-MM-DD"

 bindDateChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  }

4.省市区选择器

  <picker
    mode="region"
    bindchange="bindRegionChange"
    value="{{region}}"
    custom-item="{{customItem}}"
  >
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>

value：数组表示选中的省市区，默认选中每一列的第一个值
custom-item：字符串可为每一列的顶部添加一个自定义的项—customItem: ‘全部’（每一列最上面）

bindRegionChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }

5.多列选择器：mode = multiSelector最复杂

两级—

三级

  <picker
    mode="multiSelector"
    bindchange="bindMultiPickerChange"
    bindcolumnchange="bindMultiPickerColumnChange"
    value="{{multiIndex}}"
    range="{{multiArray}}"
  >
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>

value-----multiIndex
value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）初始值：[0,0,0]

range-----multiArray
二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,“b”], [“c”,“d”]]
bindchange-----value 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchange-----某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
每一选项有自己子母关系

  bindMultiPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  }

  bindMultiPickerColumnChange(e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value)----先获取改变的列以及最后修改的值
    const data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    }
   data.multiIndex[e.detail.column] = e.detail.value-----改变multiIndex[0,0,0]
   //判断第几列
   //获取第一列选中的值  e.detail.value进行判断给下一列的值
    用switch case来选择
  //改变data里面的值
    console.log(data.multiIndex)
this.setData(data)

23.微信小程序媒体组件 images显示图片以及实现多图预览功能

image组件：
1.图片地址本地地址 src=’…/…/images/0.jpg’ src=’/images/1.jpg两者都可以

2.图片缩放解析
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式

3.图片左右滑动预览----借助API
API-媒体-图片-wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

<image bindtap='preview'
          style="width: 200px; height: 200px; background-color: #eeeeee;"
          mode="{{item.mode}}"
          data-src="{{src}}"------绑定地址 由事件对象来获取
          src="{{src}}"
        ></image>

  preview(e){
    console.log(e.currentTarget.dataset.src); //打印事件对象看当前图片地址
    var current = e.currentTarget.dataset.src;
    wx.previewImage({
      current: '', // 当前显示图片的http链接
      urls: [‘’] // 需要预览的图片http链接列表  地址的数组
    })
  }

24.微信小程序媒体组件camera、audio、video、live-player、live-pusher

1.camera组件：

自定义拍照页面–区域、样式自己弄（很贵1~2万人工费）

从图库选择、拍照都有现有的API
wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
wx.chooseVideo(Object object)
拍摄视频或从手机相册中选视频。

需要用户授权 scope.camera
属性：
device-position 前置或后置，值为front, back
flash 闪光灯，值为auto, on, off

拍照的组件：
wx.createCameraContext
创建 camera 上下文 CameraContext 对象。CameraContext.takePhoto(Object object) 拍摄照片

直接看组件的源码：
返回的都是地址

播放流视频
live-player：播放视频—实时音视频播放。该组件是原生组件，使用时请注意相关限制。
live-pusher: 直播—实时音视频录制。该组件是原生组件，使用时请注意相关限制。
需要用户授权 scope.camera、scope.record

2.audio组件：

 action="{{audioAction}}"  默认暂停
    audioAction: {
      method: 'pause'
    }
集成好的
<view class="page__bd">
    <view class="section section_gap">
      <audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
    </view>
  </view>

audioPlayed: function (e) {
    console.log('audio is played')
  },

  audioTimeUpdated: function (e) {
    this.duration = e.detail.duration;
  },

播放
playAudio: function () {
    this.setData({
      audioAction: {
        method: 'play'
      }
    });
  },

暂停
pauseAudio: function () {
    this.setData({
      audioAction: {
        method: 'pause'
      }
    });
  }

进度—只有播放的时候才有用
bindtimeupdate
当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}

 //获取音频播放的总时间
audioTimeUpdated: function (e) {
    this.duration = e.detail.duration;    //获取音频的播放时间 单位：S秒
  },

  timeSliderChanged: function (e) {
    if (!this.duration)
      return;

    var time = this.duration * e.detail.value / 100;   //播放的时间 总时间*进度的百分比

    this.setData({
      audioAction: {
        method: 'setCurrentTime',
        data: time   //改变音频的播放时间
      }
    });
  },

播放速率---可能没用
  playbackRateSliderChanged: function (e) {
    this.setData({
      audioAction: {
        method: 'setPlaybackRate',
        data: e.detail.value-----改变音频的播放速率
      }
    })
  },

3.video

发送弹幕的功能
danmu-list 弹幕列表
可以设置出现的文字、颜色、时间

danmuList:
      [{
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }]
    },

enable-danmu 是否展示弹幕，只在初始化时有效，不能动态变更
danmu-btn 是否显示弹幕按钮，只在初始化时有效，不能动态变更

弹幕内容：
bindblur="bindInputBlur"
 bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },

发送弹幕：
bindtap="bindSendDanmu"  formType="submit"
bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },

随机生成颜色：
function getRandomColor () {
  const rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

25.open-data web-view 以及 canvas、map简单介绍

open-data

用于展示微信开放的数据。
可以获取用户信息

<open-data type="userAvatarUrl"></open-data>  用户头像
<open-data type="userGender" lang="zh_CN"></open-data>   用户性别

userNickName 用户昵称
userCity 用户所在城市
userProvince 用户所在省份
userCountry 用户所在国家
userLanguage 用户的语言

web-view

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
就是小程序的浏览器

<web-view src="https://mp.weixin.qq.com/"></web-view>会加载对应地址的网页页面

如果出不来页面 check一下是否是因为没有填写AppID

26.用微信小程序请求数据、拍照、上传图片 api实现图片上传功能

未完成的功能组件：map canvas 导航——navigator（相当于href标签）
api:小程序里面用H5的东西来调用手机原生的功能
H5不具备上传、下载文件的功能，没法直接扫描、支付，调用手机的文件
小程序通过api接口提供了，H5的知识来使用
拍照：
wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
上传图片：
wx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。

27.用微信小程序下载文件保存文件打开文件

下载文件：wx.downloadFile
文件操作api——wx.openDocument(Object object)
新开页面打开文档
音频视频的对应接口来打开文件
临时文件转换为永久文件：wx.saveFile——保存文件
wx.getSavedFileList——得到本地保存文件的列表
wx.removeSavedFile——删除保存的文件（一个一个的删除，异步，写一个递归循环删除）

28.微信小程序中类似localStorage的数据缓存Api

H5的本地缓存——localStorage，小程序里面无法使用（作用：实现多个页面之间的数据共享）
1、缓存用户信息
2、实现页面传值
3、猜你喜欢
4、搜索历史记录
数据缓存——wx.setStorage（异步存储）——异步是非阻塞的，必须在里面获取数据
wx.getStorage(异步获取)
wx.setStorageSync(同步存储数据)

29.微信小程序获取位置、查看位置、选择位置、系统信息、网络状态、加速度计（摇一摇功能）、罗盘 API

wx.getLocation——获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用，type属性注意
wx.openLocation——使用微信内置地图查看位置
wx.chooseLocation——打开地图选择位置。选择当前位置，获取经纬度，同城发布商品需要选择当前位置

wx.chooseLocation({
success:function(res){
   console.log(res);
}
})

wx.getSystemInfo——获取系统信息（上拉分页加载更多使用过scroll-view）
wx.getNetworkType——获取网络类型（播放视频，选择是3g/4g网络，提示是否需要在流量状态下播放）
wx.onAccelerometerChange——监听加速度数据事件。频率根据 wx.startAccelerometer() 的 interval 参数。可使用 wx.stopAccelerometer() 停止监听。（实现摇一摇的功能，手机支持重力感力功能）
方法里面的数据每隔5秒获取一次
1、获取加速度保存
2、获取新的加速度
3、和第一次的加速度比较
4、把第一次的加速度的值当做当前值
5、重复2-4步的操作
wx.onCompassChange——监听罗盘数据变化事件。频率：5 次/秒，接口调用后会自动开始监听，可使用 wx.stopCompass 停止监听。（指南针手机支持罗盘功能）

30.拨打电话、扫码、剪贴板、屏幕亮度、用户截屏事件、振动、手机联系人 API

wx.makePhoneCall——拨打电话
html5 web页面拨打电话——<a href=”tel:10086”></a>
wx.scanCode——调起客户端扫码界面进行扫码
wx.setClipboardData——设置系统剪贴板的内容
wx.setScreenBrightness——设置屏幕亮度
wx.onUserCaptureScreen——监听用户主动截屏事件。用户使用系统截屏按键截屏时触发
wx.vibrateLong——使手机发生较长时间的振动（400 ms)
wx.addPhoneContact——添加手机通讯录联系人。用户可以选择将该表单以「新增联系人」或「添加到已有联系人」的方式，写入手机系统通讯录
本微信小程序基础知识是看大地老师视频学习的！！！

初识微信小程序

文章目录

2.初识微信小程序

微信小程序：

3.创建小程序 注册小程序账户 小程序工具功能介绍 以及小程序的目录结构分析

4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据