小程序入门体验

工作原理

小程序不是一个封装好的html也不是一个简单的网页，它是一个基于微信进行二次渲染和编译的应用，我们开发好的小程序打包放在微信的服务器上，每次我们使用小程序时，需要从微信服务器上下载下来，里面还会涉及第三方接口，也要访问第三方服务器

发展趋势

搭建微信小程序的开发环境

开发上线的必须要APPID，如果只是自己来用可以不用APPID

需要申请独立的APPID

暂时先不申请APPID，我们来新建一个项目，整个项目打开之后的界面如下：

微信小程序开发工具界面

整个项目结构，做简单的介绍，也算是自己过一遍

项目目录

我们可以看到打开项目之后同级的目录如下：

项目目录

app.js 是用来监听并处理小程序的生命周期函数、生命全局变量（通俗来说就是设置初始数据，定义事件，交互，逻辑运算，变量声明，注释等）

app.js

其中App()函数用来注册一个小程序，接受一个object参数，指定小程序的生命周期函数等

app.json 是对整个小程序进行全局配置，好像只能修改导航栏的样式，比如文字，背景颜色，文字颜色等

app.json

我们可以看到里面是一个对象，包括pages和window等属性，其中pages来说明小程序都是由哪些页面组成，这里只有两个页面一个是首页一个是logs页面，以后我们新建的页面都要在这里配置下，采用的是相对路径，window属性不配置小程序的窗口背景颜色，导航条的样式，还有默认的标题是什么，而且注意此json文件不可以添加任何注释，框架中的json优先级高于全局的json优先级

app.wxss 是整个小程序的公共样式表，优先级没有框架中的wsxx优先级高

所以当我们启动小程序的时候，其工作流程如下：从app.js里获取数据，从app.wxss中获取样式，从app.json中读取页面跳转的信息，默认跳转pages属性里第一个页面，这里正好是"pages/index/index"

我们再来看pages文件夹里的内容

pages文件夹

包括两个文件夹index和logs分别对应index页面和log页面，其中index.js是控制index页面的生命周期函数或者获取用户数据并处理数据，响应页面交互时间等，index.wxml是本页面的结构类似于html，index.wxss控制本页面的样式，发现index文件夹里没有index.json，默认读取app.json，但是logs文件夹里有logs.json所以，会覆盖掉app.json，同样如果没有index.wxss会默认采用app.json的样式，如果有则覆盖app.json

utils 该文件夹主要用来存放全局的js文件，公共的一些事件处理代码可以放到这里，用于全局调用，如：对时间的处理等

util.js

这个公用的方法正好在logs.js里面引用了

logs.js