微信小程序入门简单讲解

小程序简介：

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

微信发布了一款自己研发的小程序开发工具：微信Web开发者工具
下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
集合了开发，预览，发布为一体的开发工具。

一切准备就绪；
首先呢，展示并介绍一下小程序开发的文件目录结构：

• pages：项目开发目录 相当于vue脚手架中的src目录。
• utils：存放封装的工具函数的目录。
• app.js：小程序的入口js文件 相当于vue中的main.js 通过App({})构造器实现。
• app.json：小程序的全局配置。
• app.wxss：小程序的全局css样式，全影响所有的页面外观。
• project.config.json：工具的统一配置。
• sitemap.json：用来配置小程序及其页面是否允许被微信索引。

一个完整的小程序页面包括4部分：

1. xxx.wxml:模板页面（也称视图，类似于html） 常用标签：
   view：相当于div
   button：按钮
   image：嵌入图像 类似于img
   text：添加文本 相当于span
   block：标签一个组织区域，最终不会渲染到页面上，相当于vue中的template

2. xxx.wxss:页面样式 相当于css 注意：用rpx代表响应式单位 类似于rem

3. xxx.js: 写页面逻辑的

4. xxx.json:页面的配置

首先一个重点：
小程序的全局配置 app.json :

"pages": [ //设置页面的路径
  "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
  "pages/logs/logs"
],
"window": {
    //设置默认窗口的表现形式
  "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
  "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
  "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字 自由设置
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
  "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
  "disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
},
"tabBar": {
    //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
  "list&#