微信小程序和vue的区别

一 、微信小程序和vue的目录对比

（1）微信小程序的项目构成

① pages    用来存放所有小程序的页面  *
② utils    用来存放工具性质的模块（例如：格式化时间的自定义模块） *
③ app.js   小程序项目的入口文件   *
④ app.json  小程序项目的全局配置文件  *
⑤ app.wxss  小程序项目的全局样式文件  *
⑥ project.config.json 项目的配置文件
⑦ sitemap.json   用来配置小程序及其页面是否允许被微信索引

（2）vue项目构成build文件夹：项目构建（webpack）相关代码
config文件夹：配置文件夹，配置目录，端口号等等
node_modules:npm依赖的项目模块

package.json：配置文件
src文件夹：开发目录

 src目录:

assets:静态资源文件夹

component文件夹：组件文件夹

router文件夹：存放路由文件，里面的index.js存放路由

store:管理全局变量，便于组件之间传值

view:建立子组件

App.vue文件：项目入口文件

main.js文件项目的核心文件

 

 二、WXML 和 HTML

（1）什么是wxml？

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。

（2）什么是html？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

  WXML 和 HTML的区别

① 标签名称不同 
   HTML （div, span, img, a） 
   WXML（view, text, image, navigator） 
② 属性节点不同 
   超链接
    
③ 提供了类似于 Vue 中的模板语法 
   数据绑定 
   列表渲染 
   条件渲染

三、WXSS 和 CSS 的区别

(1)WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

(2)CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

！WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

① 新增了 rpx 尺寸单位 
    CSS 中需要手动进行像素单位换算，例如 rem 
    WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算 
② 提供了全局的样式和局部样式 
   项目根目录中的 app.wxss 会作用于所有小程序页面 
   局部页面的 .wxss 样式仅对当前页面生效 
③ WXSS 仅支持部分 CSS 选择器 
    .class 和 #id 
    element 
    并集选择器、后代选择器 
    ::after 和 ::before 等伪类选择器