一，什么是微信小程序
微信小程序是一种基于微信平台的应用程序，用户可以在微信中直接使用，无需下载安装。
二，注册微信小程序
如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。
小程序 (qq.com)
接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。
三，微信小程序开发者工具
1，下载
微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)
根据自己电脑选择合适的版本
注意：进去的时候要用一个开发者ID，这个在你申请上的小程序的时候有
2，工具介绍
3，文件目录介绍
. ├── app.js # 小程序的逻辑文件 ├── app.json # 小程序的配置文件 ├── app.wxss # 全局公共样式文件 ├── pages # 存放小程序的各个页面 │ ├── index # index页面 │ │ ├── index.js # 页面逻辑 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式表 │ └── logs # logs页面 │ ├── logs.js # 页面逻辑 │ ├── logs.json # 页面配置 │ ├── logs.wxml # 页面结构 │ └── logs.wxss # 页面样式表 ├── project.config.json └── utils └── util.js
注意：小程序里面的WXSS就相当于CSS, WXML相当与HTML,JOSN文件用来存放配置文件
小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在
四，开发
1，JSON配置
（1）JSON配置文件的作用 JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例外: 通过不同的json 配置文件，可以对小程序项目进行不同级别的配置。
小程序项目中有 4种json 配置文件，分别是
项目根目录中的 app.json 配置文件 项目根目录中的 project.config.json 配置文件 项目根目录中的sitemap.json 配置文件 每个页面文件夹中的 .json 配置文件
注意：
哪个page在最上面，默认显示哪页，
json要求严格语法，不能有多余的注释和逗号
（2）app.json 文件
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。
简单了解下这4个配置项的作用:
pages: 用来记录当前小程序所有页面的路径window: 全局定义小程序所有页面的背景色、文字颜色等style: 全局定义小程序组件所使用的样式版本sitemapLocation: 用来指明 sitemap.json 的位置
（3）project.config.json 文件 project.config,json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如:
setting 中保存了编译相关的配置 projectname 中保存的是项目名称 ·appid 中保存的是小程序的账号 ID
（4）sitemapjson 文件 微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
注意: sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false。
（5）页面的 json 配置文件
小程序中的每一个页面，可以使用 .son 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json 的 window 中相同的配置项
（6）新建小程序页面
只需要在 app.json --> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件如图所示:
（7）修改项目首页
只需要调整 app.json --> pages 数组2411中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染
2，WXML
常用的标签
scroll-view
可滚动的视图区域常用来实现滚动列表效果
普通视图区域类似于HTML中的div，是一个块级元素常用来实现页面的布局效果
scroll-view
可滚动的视图区域常用来实现滚动列表效果
swiper 和 swiper-item
轮播图容器组件和轮播图 item 组件
text
文本组件类似于HTML中的span 标签，是一个行内元素
button
按钮组件功能比HTML中的 button 按钮丰富通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image
图片组件image组件默认宽度约 300px、高度约240px注意：微信小程序的单位是rpx，这个单位是微信小程序中特有的尺寸单位，也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx，就是把屏幕宽度分成750部分，根据屏幕宽度进行自适应。可与 rem 换算：1 rem = (750/20) rpx =37.5 rpx
navigator
这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.
使用
wx.navigateTo.
通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.
//
//js文件
next_calculator:function () {
wx.navigateTo({
url: '/pages/calculator/calculator',
})
wx.redirectTo.
关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。
类似于html中的 window.open(‘…’); 跳转后左上角出现返回小箭头,点击后可返回原本页面.
tabBar
tabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时，不显示 icon，只显示文本
tabBar的组成
① backgroundColor： tabBar 的背景色
② selectedIconPath： 选中时的图片路径
③ borderStyle： tabBar 上边框的颜色
④ iconPath： 未选中时的图片路径
⑤ selectedColor： tab 上的文字选中时的颜色
⑥ color： tab 上文字的默认（未选中）颜色
配置 tabBar 选项 ① 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点 ② tabBar 节点中，新增 list 数组 ，这个数组中存放的，是每个 tab 项的配置对象 ③ 在 list 数组中， 新增每一个 tab 项的配置对象 。对象中包含的属性如下： pagePath 指定当前 tab 对应的页面路径 【 必填 】 text 指定当前 tab 上按钮的文字【 必填】 iconPath 指定当前 tab 未选中时候的图片路径【可选】 selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
{
"pages": [
"pages/hone/hone",
"pages/Profile/Profile",
"pages/experience/experience",
"pages/skill/skill",
"pages/index/index",
"pages/logs/logs"
],
"tabBar":{
"color": "#777",
"selectedColor": "#1cb9ce",
"list":[
{"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
{"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
{"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
{"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
]
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
3，语法（与vue大同小异）
1，文本渲染
{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}
2，条件渲染
wx:if=""
wx:elif=""
wx:else
3，列表渲染
wx:for="{{list}}"
wx:key="index"
{{item}}
{{index}}
4，自定义列表渲染
定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}
5，事件
bindInput 表单输入时
bindconfirm 表单输入确认
bindtap 点击时候
6，内置组件
view 组件块组件
text 组件行内组件
button 组件按钮
input 组件表单