微信小程序篇之与vue有何不同

大家好！又怀着兴奋的心情去学习了微信小程序，框架这个东西嘛，随着时代的新潮一波又一波的到来，一波又一波的被冲走。为什么要拿vue与小程序开发做对比呢？

这是因为我相信大家不会在没有学习到vue之前就把小程序给学习了，哈哈哈。这篇文章最好给已经接触过别的框架的同学来学习。

闲话少说！

vue的重心我个人觉得还是在多功能组件的封装与调用；vue+router的实现的页面跳转；第三方功能模块的引入；vuex全局状态的管理；vue+axios的后端接口请求以及拿到数据的渲染。

当我们有了vue的基础之后，来学习小程序就好像，我学了二年级的数学之后，你让我做一年级的数学题，基本上是畅通无阻。不同之处更多的体现在形式上与设计师认为这个程序给开发者如何带来更多的便利，在难度方面并无太难点。

在小程序当中

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量；

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则；

我们稍微要注意的点在——app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

当我们创建一个新的项目的时候，删掉pages文件夹里面的两个文件夹，并在app.json文件中把pages的原有属性值去掉，这个时候在数组里面添加新的属性值，pages文件夹便会自动帮我们生成这些文件夹

 window属性的作用在于给屏幕上方的页头部分做出配置

 它有4个属性值

下拉loading图的样式仅支持light/dark ;背景颜色；以及title的设置；字体颜色的设置。以及一些别的属性详解在官方文档中可见

还有切换多个页面的tabBar组件可以添加

 让我们来到pages文件夹下

每个自动生成的文件夹都有4个文件，分别是js，json，wxml，wxss。

js文件与原来的js文件相同；json文件主要给当前文件夹做一些配置，可以参考app.json文件；wxml文件与原来的html文件相同；wxss文件与原来的css文件相同。

小程序常用标签：

view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
button 这个是按钮组件。
input 这个是输入框组件。
navigator 这个是导航组件