微信小程序和HTML的区别

点击上方“程序员小鸿”，马上关注，每天早上推送精彩文章，请置顶或星标

2017年1月9日0点，万众瞩目的微信第一批小程序正式上线，小程序出来已经有一段时间了，对于前端开发者来说，学小程序开发并不是件很难得事情，多数开发者都是不知道从哪里开始着手学习，本篇文章就带你来了解微信小程序和HTML的区别在哪。

HTML调用的是HTML定义的API，而小程序则是调用微信开发团队另行开发的一套API，实际上本质相同，用法相似，只是运行环境不同，传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境是微信内置的浏览器，并非完整的浏览器，小程序的开发过程中会用到HTML相关的技术(并非全部)。

小程序目录结构分析
在我们新建一个新的小程序项目，默认的目录结构如下

[/code][code]| – page （可以用于存放小程序的所有页面文件）

复制代码

| – log （新建的log页面）

复制代码

| – index （新建的index页面）

复制代码

--index.wxml （结构文件，index.wxml相当于index.html，只是后缀名不一样）

复制代码

--index.wxss （样式文件，index.wxss相当于index.css，只是后缀名不一样）

复制代码

--index.js （index页面的js文件）

复制代码

--index.json （index页面的配置文件，配置当前页面的顶部导航文本内容，颜色等等）

复制代码

| – utils （工具类文件夹，项目中同一个js在多个页面用到了可以把它抽离出来，方便复用，所以是工具类）

复制代码

| – util.js

复制代码

| – app.js （app.js文件，用来定义小程序的全局数据和函数，控制、监听小程序的全生命周期。）

复制代码

| – app.json （app.json是配置文件，可以配置小程序顶部导航名称，配置页面路径，相当于vue-router，新建一个小程序页面需要在这里配置，配置网络超时，配置debug模式）

复制代码

| – app.wxss （全局样式文件，所有页面用到的公用样式可以放在app.wxss里边）

复制代码

| – project.config.json （这是一个项目配置文件，比如项目的名字，appid等等）

复制代码

| – sitemap.json （sitemap.json 文件用来配置小程序及其页面是否允许被微信索引）

复制代码

小程序一个页面分为4个文件
wxml：相当于html文件，只是后缀名不同。
wxss：相当于css文件，只是后缀名不同。
js：当前页面的js文件。
json：当前页面的配置文件，配置当前页面的顶部导航文本内容，颜色等等。

wxml和html所用的标签不同
wxml模板：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF

从这张图我们可以很清楚的看出，小程序使用的是微信自己封装的标签，用法和传统的HTML5很相似，只是语义不同，改成了，文本标签都统一改成了，这两者标签区别在于是块级元素，是行内元素。

wxss和css的样式用法相同，没有特殊用法
wxss样式官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXSS-%E6%A0%B7%E5%BC%8F

.js文件
js逻辑交互官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JS-%E9%80%BB%E8%BE%91%E4%BA%A4%E4%BA%92

在这里可以见到的有onLoad(监听小程序初始化)，onReady（监听页面渲染完成），onshow(监听小程序显示),onhide(监听小程序隐藏)，onUnload（监听页面卸载）等。data里面还可以定义一些变量。用法和vue及其相似。

.json文件
可以配置小程序顶部导航名称，文字、背景颜色，json文件更多用法请查看官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE