api 微信内置浏览器js_微信小程序和HTML的区别

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

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

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

小程序目录结构分析

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

|  –  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