小程序的一些心得

前天开始参照一个小项目写了一部份内容，过程和理解如下：

一、页面配置：

1. 参照项目展示的页面，对页面图做了一些标注；我习惯用 A4纸画草图并标注；文字、图片、页面名字等都用笔标出来。如下图

说明：text表示文本内容；png表示这个位置是png格式的图片；jpg也是图片，图片大一点；tab:1表示第1个tab，箭头指向的index是点中tab图片时要跳转让的页面名字；exent表示点中jpg图时触发的事件。

2. 画好草图后，打开app.json,此配置文件的作用是对pages的路径和tabBar的内容进行设定。

因为是新项目，在对页面的路径设定后，保存，开发工具会自动生成相应的文件夹；每个文件夹名称对应的应当的是页面的名称。pages选项的格式："pages":["","",...""]。首页的写法：pages:["pages/index/index"]。如下图：

生成的文件夹：

tabBar的设定：

格式："tabBar":{}

一个黄色的{}对应的是tab栏的一项；如果需要增加多一个tab，在"list"选项下增加一个黄色的{}，并填入对应的内容。

注：为什么有2个图片文件?展示时一个，当点击tab时（表示选中），换成另一个图片，以形成效果。

3. 心得：index页在pages选项一定是位于第1行的，不信?换个位置试试?

二、页面的布局

1. tabBar是固定在底部的，可以通过wxss改变其高度；

2. 打开index.wxml，把jpg和text先做进去，不用管效果。

3. 内容基本放完后，再编辑wxss文件，调整页面布局。

index.wxml内容：

index.wxss内容：

三、inde.js的编写

1. 在草图中，看看那些是需要点击的或那个内容是会触发事件的。

2. 在js文件中分别写对应的方法（函数）。

如：点击tab,跳转新页面。即上图标记的event

四、其他页面的编写，基本上就是重复二至三的步骤，看需求，会有不同的方法、事件和配置。