微信小程序

微信小程序

一、微信小程序是什么?

微信小程序是一种不需要下载也不需要安装就可以使用的应用程序，是微信在2017年1月份上线的一个产品，而且小程序其实就是嵌入微信里的功能丰富、操作简洁的轻应用，不需要下载安装即可使用。从另一方面来讲，微信小程序，即应用号，意思就是用户关注了一个应用号，就像安装了一个App一样

二、微信小程序的商业价值

1、易传播属性 轻松实现社交裂变
2、连接线下与线上 扩大商业场景
3、强大的数据统计分析能力 有利于精准营销

（1）依托微信，有强大广泛的用户基础，推广方便
（2）不用安装，即点即用，不用关闭，不占手机内存空间

三、微信小程序和普通H5的区别

1. 微信小程序没有DOM,BOM的API，只能使用EcmaScript核心 部分（数组，字符串方法，for,if…）
2. 微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易导致代码阻塞
3. 视图层区别
   两者首先在视图层的角度上来说就有着很大的区别，特别是它们的开发工具就是非常不同的，小程序都是依赖于微信客户端的，所以相对来说开发工具没有H5那么多。
   另外两者的开发语言也都是不同的，微信小程序有自己的一套标签与样式语言，与标准的H5语言是不一样的。
   微信小程序还独立了很多的原生app的组件，所以它在组件封装上面与H5也都是有所不同的，我们只需要通过这些方面进行对比，就能够大致了解它们的不同。
   4、服务器区别
   微信小程序与H5在服务器和域名等方面的配置也都是有着极大不同的，比如说域名上面，小程序肯定是依托于微信平台的，而且必须备案，而普通的H5网站相对来说域名的选择要更为广泛一些。
   在服务器的配置上面也都会有着明确的区别，两者对于服务器的要求上，小程序的要求要更高一点。
   5、数据性区别
   再来我们还可以看到的是，这两者之间的数据区别也是很大的，H5网页里面的所有数据，都会在客户自己的服务器上面，所以对于数据来源的处理就变得十分地简单。而微信小程序里面的数据都需要上传到微信服务器上，还有一些数据则是放在自己的服务器上面，相对来说需要专门进行程序接口的设置，因此两者看着相似，实际上很多方面都是截然不同的。

四、微信小程序的账号注册及开发流程

1、微信小程序的注册

注册地址 ： https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

按照连接地址给出的提示进行注册
2.微信小程序登录：

https://mp.weixin.qq.com/
登录后：找到开发-开发管理-开发设置-开发者ID
AppID(小程序ID) wxb61621e772a9f027

3.开发和发布流程

开发->提交->审核->发布上线

五、小程序环境搭建与目录结构分析说明

1、微信开发者工具的下载与安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

六、小程序目录结构说明

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”
}
]
},
…
}