微信小程序首先他不是h5页面,他更像是个app，但是原声hybird模式都会占用我们的手机空间，可以直接放到微信里运行，

什么是微信小程序

首先他不是h5页面,他更像是个app，但是原声hybird模式都会占用我们的手机空间，可以直接放到微信里运行，跨平台，支持离线缓存，但开发体验很好，缺点，不适合做逻辑复杂的，页面多的等等。类似于vue单页开发

具体请查看微信公众平台

万事开头难

申请AppId 具体参见微信公众平台
下载小程序，
创建项目

编辑区 - 模拟界面
目录结构区
调试 - source,storage,...

搭建结构

app配置文件

app.json 全局配置文件，可以配置小程序入口，标题，tabbar配置导航，每个子文件夹下的json相当于app.jsonde window项，不设置，默认为app.json内容，设置的话可覆盖
app.wxss css样式文件引入css, @import ,flex布局@import "list-tmpl/list-tmpl.wxss";
app.js 引入 js require var list = require('../../data/data.js');
wxml 引入<import src='list-tmpl/list-tmpl.wxml' />
images文件夹
data文件夹

路径一律相对路径

单位 rpx

1rpx在iopone6下 == 2px

宽度 750饶平县= 100%

高度一般采用rpx

线条1px

事件

bindtab冒泡
catchtab非冒泡
bindchange
bindinput

跳转三种方式

navigateTo跳转到，有返回键
switchTab 如果有tabbar只能用switchTab方法切换
redirectTo 重定向没有返回键
navigateBack

组件

swiper组件通常结合下拉刷新需要配置window <swiper autoplay="{{true}}" interval='2000' indicator-dots='{{true}}' circular='{{true}}' vertical='{{true}}' style='height:400rpx'> <swiper-item wx:for="{{imgs}}" wx:for-item="num">
<picker mode="time" start="10:00" end="18:00" bindchange="timerEvent">
<picker mode="date" start="2015-04-11" end="2017-08-05" value=" {{time}}" bindchange="dateEvent">
<picker range="{{array}}" value="{{time}}" bindchange="selector">
<picker-view style="width:100%;height:300px" indicator-style="height:50px" bindchange="picks"> <picker-view-column style="line-height:50px"> <view wx:for="{{foods}}">{{item}}</view> </picker-view-column>
<progress percent="20" active show-info></progress>
<switch type="switch" checked="{{true}}" />
<view wx:for="{{arrs}}"> <icon type="{{item}}" size="30"></icon>{{item}} </view>arrs有很多种类型

播放音乐

wx.playBackgroundAudio({
      dataUrl: 'http://isure.stream.qqmusic.qq.com/C4000032ZOkm0LBgHW.m4a?vkey=88FEC5880C346CE5D6F0C5E6A3DAA71ED4EB67057F6B17250168EE7E9BC7D6D0928632F365D3582E587273A0B2305466C54B963BC4D54298&guid=8491420912&uin=0&fromtag=66',
      success: (res) =>{
        app.flag = false;
        this.setData({
          flag:false
        })
      }
});

onLoad: function (options) {
    //防止用户使用自带播放，导致图片显示不同步
    wx.onBackgroundAudioPlay(()=>{
      app.flag = false;
      this.setData({
        flag: false
      })
    })
    wx.onBackgroundAudioPause(() => {
      app.flag = true;
      this.setData({
        flag: true
      })
    })
  },
  
  //flag要设置全局的
  //数据公用
  //var app = getApp();可以获取app里面的数据

模版使用

声明：<template name="list">
引入： <template is="list" data="{{...item}}" ></template>

还有很多组件和APi可以照这文档开发就可以啦