微信小程序学习《一》：目录文件详解，视图渲染详解

一、目录文件揭秘

1.首先看看下根目录下的app.json的文件，可以看见在”pages”的数组里，里面布局了每个界面，且涵盖了每个界面文件的目录

2.可以看见每个页面须要涵盖两个文件，一个就是js文件，就是每个界面的入口，wxml的文件就是每个界面的布局文件，那wxss就是什么呢？它就是每个界面的样式文件。比如说：看看右图可以看见，建立代莱项目存有两个界面，一个就是index.js界面，一个就是logs.js的界面，且都存有对应的布局文件（.wxml）和样式文件（.wxss）

3.可以看见在logs文件夹中比index文件夹中多出了一个logs.json的文件，这个文件就是干嘛的呢？可知，这个文件不是必须的，因为index界面的文件夹中就没这个文件，logs.json这个文件布局了一个界面的title的信息

具体内容效果可以看看gif图

总结

1.根目录下的app.js就是整个程序的入口，app.json布局整个程序的信息

2.一个微信小程序所需涵盖的文件只须要存有app.js和app.json以及对应界面的js文件和布局文件（.wxml）就可以了

二、视图图形

一：建立一个页面

1.首先我们新建一个项目，在新建的项目中存有index 页面和 logs 页面，即为热烈欢迎页和小程序启动日志的展现页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都须要写下在 app.json 的 pages 中，且 pages 中的第一个页面就是小程序的首页。

每一个小程序页面就是由同路径下同名的四个相同后缀文件的共同组成，例如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件就是脚本文件，.json后缀的文件就是配置文件，.wxss后缀的就是样式表文件，.wxml后缀的文件就是页面结构文件。

不好了，然后我们新建一个自己的页面，首先建好一个文件夹（myPage），在文件夹下建立对应的布局文件（myPage.wxml）和js文件（myPage.js），最后回忆起在app.json中布局页面信息，在app.json中须要特别注意了，在pages的数组里，第一个代表着启动时第一个读取的页面

2.然后步入调试界面，页面重新启动按钮，看看下效果，可以辨认出在控制器中弹出来了收起的信息，如下：

3.看书错的信息，很确切的晓得在myPage.js文件中没找出Page方法，因此我们在myPage.js文件中调用Page方法，然后调试，重新启动，就可以辨认出不收起了！

4.不好了，在第一点中也说道至，在app.json中pages的数组里，第一个代表着启动时第一个读取的页面，那不好我们把顺序调转一下，就可以检验我们的结论了

建议看看官方的教程：https://mp.weixin.qq.com/debug/wxadoc/dev/

二、组件的采用和数据的存取

1.必须介绍微信小程序组件的采用，最出色的方法就是查阅微信小程序的API文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

可以看见API文档详尽的了解了各种组件的采用，必须熟识组件的采用，最出色的方式就是多练习了!

2.看著文档，把官方文档的例子轻易贴进来，然后我们也建立一个text组件，看一看效果先吧：

融合代码展开分析：

js代码：

三、图形标签

微信小程序给我提供更多了两种图形标签：

1.推论标签wx:if和wx:else

虽然之前没碰触过js，可是代码也挺难认知的，逻辑思维跟Android还是类似于，不过想要努力学习，还是要学下js的，所以最近我也可以学下js

最后我们看看下效果图吧，可以看见当位true的时候就表明1 false时表明2

2.循环标签（wx:for）

看看下循环标签在布局文件中的采用吧

看看下效果图：

四、样式模板的采用

从上面的代码就可以看见，一个界面可能会使用很多布局的代码，可是界面与界面之间可能会存有很多重复的样式，然而这些样式的代码，每次都必须再次写下就很麻烦了，而且也浪费资源，微信小程序像是其他研发一样，也存有样式模板的采用方式

1.采用include的方式涵盖模板样式

比如：

具体内容的采用看看图片：

采用这种方式提及模板，实际上就是等同于把templates中的myText的代码全部导入到include这里

2.采用import的方式

比如：