首先登陆微信公众平台：https://mp.weixin.qq.com/
注册一个账号，注册成功后可以获取到一个appId，这个appId就是开发者的唯一标识；
微信开发者工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html （不用特意去记，在微信公众平台翻翻就能找到）
小程序文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
普通web和微信小程序的区别
新建项目
我们可以打开微信开发者工具，点击项目选项，新建一个项目，然后设置项目名称，指定项目文件地址，输入appId，即可新建一个小程序项目；
小程序目录结构：
新建成功后会有这样的一个目录结构：
pages里面是放页面的，里面会有两个预制的页面
index是首页，logs是显示日志的页面
我们可以看到每个页面都有4个部分构成，.js，.json，.wxml，.wxss，分别代表js文件、页面配置文件、'html'页面、'css'页面;
utils文件中放着一些公共的方法
app.js是整个小程序的入口文件
app.json是控制整个小程序大体接口的文件，比如页面数量配置，导航条默认标题，导航条背景明暗设置，导航条字体颜色设置；
app.wxss是默认全局的样式
project.config.json是项目配置文件，对应到开发者工具中详情按钮的内容，我们可以在开发者工具里用图形化的形式进行操作；可以配置项目名称、appid等信息；
小程序配置介绍：
一个小程序应用会包括最基本的两种配置文件，一种是全局的app.json和页面自己的page.json
全局配置app.json：
app.json是当前小程序的全局配置，包括了小程序的所有页面路径、页面表现、网络超时时间、底部tab等；
小程序中如何新增页面呢？我们第一种想法可能是，按照结构目录一个一个新建页面，但是这种方式在小程序中显得繁琐，我们可以在app.json中的pages想汇总新增一个页面路径，小程序自动会为我们建立页面里对应的文件的！！
如上，新增页面路径后，ctrl+s保存一下，小程序就会自动建立对应的页面了；
另外有一个需要注意，pages中哪个路径在最前面，小程序启动的时候，默认页面就是谁！！！
小程序文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
如何添加底部/顶部tab栏？
同样在app.json中配置：（yabBar要求至少两个，最多5个，否则会报错），其它配置看文档
"tabBar": { "list": [{ "pagePath": "pages/index/index",//对应的页面路径 "text": "首页",//tab名称 "iconPath": "images/tabbar/home.png",//默认图标 "selectedIconPath": "images/tabbar/activeHome.png",//被选择是的图标 }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/tabbar/log.png", "selectedIconPath": "images/tabbar/activeLog.png" }] }
小程序汇总页面配置：
进入某一个页面的xxxx.json(具体参考文档)
{ "usingComponents": {}, "navigationBarBackgroundColor":"#00b26a",//配置导航栏背景色 "navigationBarTitleText":"页面2",//配置导航栏文字内容 }
视图层wxml
<text>:类似于web中的span标签，是行内元素
<view>:类似于web中的div标签，是块级元素
<block>:用于包括含有多个节点的代码片段，相当于一个容器，也是块级元素
数据绑定（类似vue中的双向绑定）：
在某个页面的xxx.js中定义几个变量：
data: { msg:"hello world 1", person:{ name:"小明", height:185 }, title:"这是一个标题" },
在xxx.wxml中绑定这些变量：（可以绑定普通值，也可以绑定属性，需要注意的是，绑定布尔值时要加上双括号，否则会报错或不生效）
<view> {{ msg }} <view> {{person.name}}--{{person.height}} </view> <view data-id="{{title}}">title</view> <view> <checkbox checked="{{false}}"></checkbox> </view> </view>
列表渲染：
wx:for (既可以循环数组也可以循环对象)
项的变量名默认为item，wx:for-item可以指定数组当前元素的变量名
下标变量名默认为index，wx:for-index可以指定数组当前下标的变量名
xxx.js:
data: { arr:["苹果","香蕉","西瓜"], person:{ name:"小明", height:180 } },
xxx.wxml:
<view> <view wx:for="{{arr}}" wx:key="{{index}}"> {{index}}:{{item}} </view> <view wx:for="{{arr}}" wx:for-item="aa" wx:for-index="bb" wx:key="{{aa}}"> {{bb}}:{{aa}} </view> <view wx:for="{{[1,2,3,4,5]}}" wx:key="*this"> {{item}} </view> <view wx:for="{{person}}" wx:for-item="val" wx:for-index="key" wx:key="*this"> {{key}}:{{val}} </view> </view>
wxss：
wxss相当于web中的css，只不过新增了尺寸单位rpx，和样式导入
rpx可以根据屏幕的宽度进行自适应，规定屏幕宽度为750rpx，如在iphone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素；可以理解为1rpx是屏幕宽度的1/750;
xxx.wxss:
.box1{ width:50rpx; height:50rpx; background-color: aqua; }
样式导入：
@import语句可以导入外联样式表， @import后跟需要导入的外联样式表的相对路径，用；表示语句结束。
例子：
我们在根目录下建立一个stylues文件夹，里面建立一个box.wxss文件
box.wxss：
.lg_box{ width:200rpx; height:200rpx; background-color: aqua; }
之后在某个页面的xxx.wxss中引入这个样式表：
@import "../../stylues/box.wxss";
样式表中的注释是/**/这样的
基础组件：
<view>组件：类似于web中的div标签，不过在小程序汇总它有个hover-class等属性，当标签被点击时会触发这个样式；
<view hover-class='lg_box'>dasd</view>
<text>组件：类似于span标签，不过在小程序汇总也添加了其它属性，比如selectable，指定文本是否可选，默认值为false
decode属性用来指定是否解码text标签中的内容，如果为false，在标签中的 这些空格会鸳鸯展示出来
<text selectable='{{true}}' decode>dsadaa sdassa</text>
<image>组件：
文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
小程序中的image标签和web中的img标签存在很大区别：
image组件默认宽度300px、高度240px，
小程序中不存在背景图片的说法，image标签是背景图片和img标签的结合体
src属性还是指的图片路径，
mode属性表示图片裁剪缩放的方式：
默认值是scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
mode 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 | |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 | |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 | |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 | |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 | |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 | |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 | |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 | |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
lazy-load：图片是否懒加载 默认值是false
show-menu-by-longpress：开启长按图片显示识别小程序码菜单 默认值false
binderror：加载发生错误时触发，值是事件
bindload：加载完成时触发，值是事件
<view> <image src='../../images/bigImg.png' mode='widthFix'></image> </view>
<swiper>:轮播组件
<swiper>滑块视图容器，默认宽度100%，高度150px。其中只可放置swiper-item组件，否则会导致未定义的行为。<swiper-item>默认宽度高度都是100%；
swiper的属性：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
| indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
| autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
| current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
| interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
| duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
| circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
| vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
| previous-margin | string | "0px" | 否 | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | 1.9.0 |
| next-margin | string | "0px" | 否 | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | 1.9.0 |
| display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
| skip-hidden-item-layout | boolean | false | 否 | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | 1.9.0 |
| easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
| bindchange | eventhandle | 否 | current 改变时会触发 change 事件，event.detail = {current, source} | 1.0.0 | |
| bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} | 2.4.3 | |
| bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件，event.detail 同上 | 1.9.0 |
easing-function 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| default | 默认缓动函数 | |
| linear | 线性动画 | |
| easeInCubic | 缓入动画 | |
| easeOutCubic | 缓出动画 | |
| easeInOutCubic | 缓入缓出动画 |
示例
<swiper autoplay indicator-dots indicator-color='rgba(0,0,0,.3)' indicator-active-color='rgba(0,100,100,1)' current='0' interval='5000' duration='500' circular vertical previous-margin='20px' next-margin='20px' display-multiple-items='1' skip-hidden-item-layout> <swiper-item> <image src='../../images/bigImg.png' mode='aspectFit'></image> </swiper-item> <swiper-item> <image src='../../images/bigImg.png' mode='aspectFit'></image> </swiper-item> <swiper-item> <image src='../../images/bigImg.png' mode='aspectFit'></image> </swiper-item> </swiper>
<navigator>：导航组件，类似于web中的a标签
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| target | string | self | 否 | 在哪个目标上发生跳转，默认当前小程序 | 2.0.7 |
| url | string | 否 | 当前小程序内的跳转链接 | 1.0.0 | |
| open-type | string | navigate | 否 | 跳转方式 | 1.0.0 |
| delta | number | 1 | 否 | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 | 1.0.0 |
| app-id | string | 否 | 当target="miniProgram"时有效，要打开的小程序 appId |
2.0.7 | |
| path | string | 否 | 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页 |
2.0.7 | |
| extra-data | object | 否 | 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情 |
2.0.7 | |
| version | string | release | 否 | 当target="miniProgram"时有效，要打开的小程序版本 |
2.0.7 |
| hover-class | string | navigator-hover | 否 | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 |
1.0.0 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 | 1.0.0 |
| hover-stay-time | number | 600 | 否 | 手指松开后点击态保留时间，单位毫秒 | 1.0.0 |
| bindsuccess | string | 否 | 当target="miniProgram"时有效，跳转小程序成功 |
2.0.7 | |
| bindfail | string | 否 | 当target="miniProgram"时有效，跳转小程序失败 |
2.0.7 | |
| bindcomplete | string | 否 | 当target="miniProgram"时有效，跳转小程序完成 |
2.0.7 |
target属性：默认值是self，跳转到当前小程序的页面，miniProgram：跳转到其它小程序
url：指定跳转到当前小程序的链接地址
open-type：跳转方式
open-type 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能，但不能跳到tabBar页面 | |
| redirect | 对应 wx.redirectTo 的功能，但不能重定向到tabbar页面 | |
| switchTab | 对应 wx.switchTab 的功能，跳转到tabbar页面，并且关闭所有非tabbar页面 | |
| reLaunch | 对应 wx.reLaunch 的功能，关闭所有页面，跳转到指定的所有类型页面，包括tabbar页面 | 1.1.0 |
| navigateBack | 对应 wx.navigateBack 的功能 | 1.1.0 |
| exit | 退出小程序，target="miniProgram"时生效 |
2.1.0 |
示例：
<!-- navigate --> <navigator url='../index2/index2' open-type='navigate'>跳转到页面2</navigator> <!-- redirect 无历史记录--> <navigator url='../index2/index2' open-type='redirect'>重定向到页面2</navigator> <!-- switchTab --> <navigator url='../index/index' open-type='switchTab'>跳转到tabbar页面，并且关闭非tabbar页面</navigator> <!-- reLaunch --> <navigator url='../index/index' open-type='reLaunch'>关闭所有页面，可以跳转到包括tabbar内的所有页面</navigator>
<vedio>:视频组件(更多用法查看文档)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 是 | 要播放视频的资源地址，支持云文件ID（2.3.0） | 1.0.0 | |
| duration | number | 否 | 指定视频时长 | 1.1.0 | |
| controls | boolean | true | 否 | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） | 1.0.0 |
| danmu-list | Array.<object> | 否 | 弹幕列表 | 1.0.0 | |
| danmu-btn | boolean | false | 否 | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 | 1.0.0 |
| enable-danmu | boolean | false | 否 | 是否展示弹幕，只在初始化时有效，不能动态变更 | 1.0.0 |
| autoplay | boolean | false | 否 | 是否自动播放 | 1.0.0 |
| loop | boolean | false | 否 | 是否循环播放 | 1.4.0 |
| muted | boolean | false | 否 | 是否静音播放 | 1.4.0 |
| initial-time | number | 0 | 否 | 指定视频初始播放位置 | 1.6.0 |
| page-gesture | boolean | false | 否 | 在非全屏模式下，是否开启亮度与音量调节手势（废弃，见 vslide-gesture） | 1.6.0 |
| direction | number | 否 | 设置全屏时视频的方向，不指定则根据宽高比自动判断 | 1.7.0 | |
| show-progress | boolean | true | 否 | 若不设置，宽度大于240时才会显示 | 1.9.0 |
| show-fullscreen-btn | boolean | true | 否 | 是否显示全屏按钮 | 1.9.0 |
| show-play-btn | boolean | true | 否 | 是否显示视频底部控制栏的播放按钮 | 1.9.0 |
| show-center-play-btn | boolean | true | 否 | 是否显示视频中间的播放按钮 | 1.9.0 |
| enable-progress-gesture | boolean | true | 否 | 是否开启控制进度的手势 | 1.9.0 |
| object-fit | string | contain | 否 | 当视频大小与 video 容器大小不一致时，视频的表现形式 | 1.0.0 |
| poster | string | 否 | 视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效 | 1.0.0 | |
| show-mute-btn | boolean | false | 否 | 是否显示静音按钮 | 2.4.0 |
| title | string | 否 | 视频的标题，全屏时在顶部展示 | 2.4.0 | |
| play-btn-position | string | bottom | 否 | 播放按钮的位置 | 2.4.0 |
| enable-play-gesture | boolean | false | 否 | 是否开启播放手势，即双击切换播放/暂停 | 2.4.0 |
| auto-pause-if-navigate | boolean | true | 否 | 当跳转到其它小程序页面时，是否自动暂停本页面的视频 | 2.5.0 |
| auto-pause-if-open-native | boolean | true | 否 | 当跳转到其它微信原生页面时，是否自动暂停本页面的视频 | 2.5.0 |
| vslide-gesture | boolean | false | 否 | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） | 2.6.2 |
| vslide-gesture-in-fullscreen | boolean | true | 否 | 在全屏模式下，是否开启亮度与音量调节手势 | 2.6.2 |
| ad-unit-id | string | 是 | 视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告 | 2.8.1 | |
| bindplay | eventhandle | 否 | 当开始/继续播放时触发play事件 | 1.0.0 | |
| bindpause | eventhandle | 否 | 当暂停播放时触发 pause 事件 | 1.0.0 | |
| bindended | eventhandle | 否 | 当播放到末尾时触发 ended 事件 | 1.0.0 | |
| bindtimeupdate | eventhandle | 否 | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次 | 1.0.0 | |
| bindfullscreenchange | eventhandle | 否 | 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal | 1.4.0 | |
| bindwaiting | eventhandle | 否 | 视频出现缓冲时触发 | 1.7.0 | |
| binderror | eventhandle | 否 | 视频播放出错时触发 | 1.7.0 | |
| bindprogress | eventhandle | 否 | 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比 | 2.4.0 |
示例：
<view> <video style='100%;' src='http://47.90.213.237/youtube/JU3AL8S3zyE.mp4' controls duration='60' autoplay></video> </view>
自定义组件：相当于vue中的组件
新建自定义组件：在跟文件下建立一个components文件夹，里面建一个MyHeader文件夹，然后再右键这个文件新建component，开发者工具会帮我们新建4个文件，很方便
xxx.json文件中有一句："component": true,，是声明这是一个组件
xxx.wxml中写点内容：slot是插槽，可以将父组件里的内容插进去
<view class='myheader'> {{cData}} <view> <slot></slot> </view> </view>
xxx.wxss中可以写点简单的样式：
.myheader{ font-size: 50px; background-color: yellow; }
xxx.js中可以定义组件自身的属性（cData）
Component({ /** * 组件的属性列表 */ properties: { cData:{ value:"组件的默认值", type:String } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } })
以上是简单的定义了一个组件，那么如何在页面内引用呢？
在要引用此组件的页面的json文件汇总这样设置：
{ "usingComponents": { "MyHeader":"../../components/MyHeader/MyHeader" }, "navigationBarBackgroundColor": "#00b26a", "navigationBarTitleText": "页面3" }
在这个页面中记得使用MyHeader组件
<view> <MyHeader cData="我是父组件传给子组件的值">我是自定义组件的插槽内容</MyHeader> </view>