微信小程序学习（二）熟悉官方小程序demo

一、app.js

   

• onLaunch方法会在程序启动时由框架来进行调用
• onShow方法在小程序显示出来时调用

         

        

二、app.json

  

       

        

• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
• pagePath：点击后要显示的页面，必填，并且必须在 pages 中先定义
• iconPath：图标路径
• selectedIconPath：选中后的图标路径
• text：tab上按钮文字，必填
• 由app.json中的pages可以知道首页为："page/component/index"。

三、index.json

     覆盖掉app.json中对“navigationBarTitleText”的赋值。

     {

         "navigationBarTitleText": "小程序官方组件展示"

     }

四、index.js:处理逻辑

• id：在index.wxml中获取每一项id的name值，通过resources目录选择对应的图片。

        

• open：设置下拉列表是否要开启。
• pages：下拉列表项，在index.wxml中对每一个下拉列表项进行url设置，与pages目录对应

        

• 实现kindToggle方法，在index.wxml中对下拉项进行绑定。

        

五、index.wxml：描述页面内容

• 读取index.js中的data数据渲染界面，创建出该页面的结构。
• 绑定index.js中的函数。
• block用于绑定list数组。

         

五、index.wxss：配置页面样式

• .WXSS是为了美化.WXML。
• .WXML中的class字段是为了在.WXSS中方便的对其进行设置。