【初学微信小程序】
一、微信小程序是什么？
小程序呢有很多种，微信小程序呢只是其中之一，英文名：Wechat Mini Program，它是一种不需要下载安装即可使用的应用，相对于vue开发呢微信小程序更加的简单和高效，而且安全。2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序 正式上线 。
二、小程序的开发使用流程？
1.注册微信小程序的账号
我们可以直接到百度搜索到官网上搜索 ‘微信小程序官网’，进行注册，并且下载我们的开发工具《微信开发者工具》，或者可以同过以下链接进行注册。
`注册网址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN`
操作步骤 : 帐号信息 -> 邮箱激活 -> 信息登记
注册成功以后：找到 AppID(小程序ID) 进入小程序后台找到开发选项复制出来
我们还可以在小程序后台添加成员管理，方便协作开发
2.微信开发者工具的下载：
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.打开微信开发者工具创建微信小程序
微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。
全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。
启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号
程序调试主要有三大功能区：
1、模拟器：
模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。
2、调试工具
调试工具分为 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel
3、小程序操作区
微信小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从微信小程序中回到聊天窗口，会触发一个微信小程序被设置为后台的api。
4.利用小程序开发的又优势：
1. 快速的加载
2.更强大的能力
3.原生的体验 （Native体验，即android,ios的App体验）
4.易用且安全的微信数据开放
5.高效和简单的开发
5.小程序和H5开发的区别
<1、不一样的运行环境：
H5仅能借助浏览器实现启动，但小程序虽然包含H5技术，但在运行环境方面与H5不同，
它基于解析器得以运行，结合自定义的开发语言标准，其性能更是有了长足的进步。
简单讲小伙伴们可以利用浏览器打开H5网页，运用微信平台打开小程序。
<2、不一样的成本：
在开发方面，很多企业借助各类开发软件针对H5开发，这种开发需要结合多方面技术实现，
因此相对比较复杂，开发的成本也是比较高的。然而小程序则不一样，
开发完全借助官方下载的开发工具即可实现，小程序开发价格相对低廉很多。
<3、不一样的系统级权限：
从程序本身来看，这个小程序能得到更多的系统权限，而对于H5则不同，权限很低。
很简单举几个例子，比如网络当前的状态，甚至是一些数据的缓存应用等，都能够得
以与小程序进行连接。
<4、 不一样的运行状态
现在的人们总是强调人性化，提高用户的体验感，这一点就被小程序抢先了，对比H5，
小程序拥有更为流畅的使用速度，多使用过小程序和H5的客户，都很印象深刻，
前者的打开速度要快上很多，利用一些软件就也可以测试出两者的差距。我们举例来说，
如果我们打开H5，就相当于打开一个网页，页面需要加载，因此打开速度相对较慢。
而对于小程序则不同，该应用程序完全借助微信运行，根本不需要像浏览器加载的操作，
就可以直接打开。此外，H5页面之间的切换也需要时间，但小程序不用担心这些困难。
<5、H5:ECMA(ES5,Es6),DOM,BOM
1.有完整的的DOM API和BOM API。例如：getEleentById,window,location
2.网页开发渲染线程和脚本线程是互斥的
微信小程序：
1.缺少相关的DOM API和BOM API。例如：getEleentById,window,location
2.网页开发渲染线程和脚本线程是二者是分开的
6、小程序的开发目录结构：
*pages:平时开发页面的目录 相当于vue中的src目录
*utils:存放平时开发时常用的工具函数
*app.js:小程序项目的逻辑入口 相当于vue中的main.js
*app.json:是小程序的全局配置文件，会影响每个页面的配置
*app.wxss:是小程序的全局样式,会影响每个页面的样式
*project.config.json:项目的配置文件（一般不需要改动）
*sitemap.json:小程序的搜索蜘蛛（一般不需要）
index.js:页面的JS逻辑 相当于H5中的JS
index.json:指当前页面的配置文件（注意：只能使用app.json中window的各种配置）
index.wxml:指当前页面模板 相当于H5中的html
小程序常用标签：
1-view:相当于H5中的div
2-image:插入图片，相当于H5中的img
3-text:嵌入文本 相当于H5中的span（它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)
4-block:逻辑包裹标签，最终不渲染到页面中 相当于vue中template标签
5-index.wxss:指页面的样式 相当于H5中的css
6-button 这个是按钮组件。
7-input 这个是输入框组件。
8-navigator 这个是导航组件。
7.如何给小程序添加底部的tabbar
微信文档的链接地址：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
参考tabBar部分的配置即可
操作步骤：
打开app.json，添加tabBar选项，配置代码如下：
{
......
"tabBar":{
"custom":true,//true,表示开启自定义tabbar
"color":"#000", //未选中的文字颜色
"selectedColor":"#d4237a", //选中的文字颜色
"list":[
{"text":"首页", //tabbar显示文字
"pagePath":"pages/index/index", //页面路径
"iconPath":"/images/home.png", //未选中的icon
"selectedIconPath":"/images/home_active.png" //选中的icon
},
{"text":"日志",
"pagePath":"pages/logs/logs",
"iconPath": "/images/my.png",
"selectedIconPath":"/images/my_active.png"}
]
}
...
}
注意：设置tabBar最多5项，最少2项
自定义的tabBar:
参考链接地址：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
三、微信小程序常用的指令
1.遍历数组：wx:for 相当于vue中的v-for
注： index:代表遍历的索引，item:代表遍历每一项
如果不改变index和item的名子，则需要设置：
更改索引：wx:for-index="idx"
更改每一项wx:for-item="ite"
为了提高遍历性能，通常在遍历时加上wx:key,类似于vue中的key
2.条件渲染：
wx:if:条件true渲染标签，false不渲染，类似于vue中的v-if
hidden:条件true隐藏标签，false显示标签,类似于vue中的v-show