一、微信小程序是什么
- 微信小程序是一种不需要下载安装即可使用的应用
- 微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。
二、微信小程序商业价值
- 依托微信，有强大广泛的用户基础，推广方便
- 不用安装，即点即用，不用关闭，不占手机内存空间
三、微信小程序和普通H5的区别
- 微信小程序没有DOM,BOM的API，只能使用EcmaScript核心 部分（数组，字符串方法，for,if…）
- 微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易导致代码阻塞
四、微信小程序的帐号注册及开发流程
- 微信小程序的注册
注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
按照连接地址给出的提示进行注册
- 微信小程序登录：
https://mp.weixin.qq.com/
登录后：找到开发-开发管理-开发设置-开发者ID
AppID(小程序ID) wxb61621e772a9f027
- 开发和发布流程
开发->提交->审核->发布上线
五、小程序环境搭建与目录结构
- 微信开发者工具的下载与安装
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 使用微信开发者工具创建小程序项目并运行
创建小程序项目的界面如下：
六、手机运行测试
点击微信开发者工具--预览按钮（二维码预览和自动预览）
真机调试：通过开发者工具控制台来实时的高度真机上的项目
七、项目组合作开发项目
1.在组长微信小程序管理后台：管理-成员管理-点击添加成绩按钮（搜索组员微信号按提示添加）
2.从码云上克隆项目(第一次：git clone，后面只是git pull)
3.....每天完成对应的任务
4.再提交到组长指定的仓库分支上
八、小程序目录结构分析与说明
目录结构说明：
app.js:小程序的入口文件 相当于vue中的main.js
app.json:是小程序的全局配置文件，即如果没配置页面json，会自动使用app.json中的配置
app.wxss:是小程序的全局css样式文件,会影响到所有小程序页面的样式
了解 project.config.json：是开发者工具环境配置项
了解 sitemap.json：是不允许小程序蜘蛛索引页面
pages:咱们平时干活常用的目录 相当于vue上的src
index
index.wxml:即页面的结构 相当于html
index.wxss:即页面的样式 相当于css
index.js:即页面的逻辑部分
index.json:即页面的配置文件
utils:存放常用工具函数的目录,方便复用
问题：小程序如何创建一个新的页面？
新建页面目录--在目录上右键--选择新建page并输入文件名并回车
九、小程序如何实现tabBar导航
第一步：在app.json中添加tabBar配置属性
第二步：在tabBar的list属性中配置要添加的条目
注意：最少配置2个，最多5个
tabBar参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
配置tabBar具体演示代码：
{
....
"tabBar": {
"borderStyle":"white", //tabBar是否有顶部边框
"list": [ //配置tabBar的列表项数组
{
"text": "首页", //每项的名称
"pagePath": "pages/index/index", //要打开的页面路径，跟pages项有关
"iconPath": "/imgs/home.png", //未选中的图标路径
"selectedIconPath": "/imgs/home_active.png" //选中的图标路径
},
{
"text": "我的",
"pagePath": "pages/logs/logs",
"iconPath": "/imgs/my.png",
"selectedIconPath": "/imgs/my_active.png"
}
]
},
....
}