WX小程序学习（一）基础组件、共有属性

一、小程序架构

    1.Pages里不同页面文件夹：包含.js、.wxml（html文件）、.wxss

    2.app.js :js文件

    3.app.json：json文件

    4.app.wxss：样式文件

二、不同文件作用

    1. js文件，wxss文件都和前端差不多

    2. 。wsml文件和html文件差不多，就是标签不一样

    3. .json文件不止是存放数据的作用，还有页面路径，Windows属性等

三、App.json文件属性

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式

    1.“pages”：{

        “pages/index/index”,

          “pages/logs/logs”

    }

PS：1.pages中存放数组形式存入页面路径，文件不需要写格式；

        2.创建页面最快的方式就是在   page里写“pages/shouye/shouye”，就会自动创建页面目录

    2.Windows属性（用于设置小程序的状态栏，导航条，标题，窗口背景色）

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

    3.TabBar属性（底部tab的表现）

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top

ps：positon为top时不会显示图片

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

PS：页面.json文件是写windows内容，只需写花括号

四、选择器

        1..class     例：.intro    选择多有class=“intro”的组件

        2、#id       例：#firsname   选择id=“firstname”的组件

        3、element   例：view    选择所有view组件

        2、element element   例：view checkbox    选择所有文档的view组件和所有的check组件

         4、::after     例    view::after    在view组件后插入内容

         5、::before    例    view::before    在view组件前插入内容

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式