2.uniapp入门2

1.pages存放页面

   static是静态资源的
   unpackage是打包的目录
   manifest.json配置打包之后的配置文件
   pages.json是配置全局的外观,和全局路径的/xxx全局都是这个路径

uni.scss 常用的样式变量
2.规范(vue和小程序的规范)

   1.页面都是vue写的
   2.html的template是靠经小程序规范的也就是,只能用<view>view>...等标签
   3.接口能力接入是靠近微信小程序规范
   4.数据绑定和事件处理是靠近vue规范的
   5.建议flex布局,(和微信小程序一样)

3.全局的配置,和外观的配置

1.在pages.json
   navigationBarBackgroundColor 导航栏背景色
   navigationBarTextStyle 导航栏字体颜色,只能是黑和白

2.pages是全局的配置,会覆盖局部的,删除他的标题
   globalgroundColors是局部的
   backgroundColorBottom是最底部的背景色
   enablePullDownRefresh: true 开启下拉,也就是下拉刷新功能
   backgroundColorTop: 头部下拉的背景
   backgroundTextStyle:"light" //下拉点点的背景色

4.创建新文件

   1.在pages创建一个文件夹
   2.创建一个vue文件
   3.需要把页面的路径到pages.json的pages

 ,{
"pages/xxx",
                "style":{
      "navigationBarTitleText":"xxx"  //与全局的一种
                    "h5":{   //设置h5的样式
           		  "pullToRefrewsh":{   //设置下拉刷新的样式
                 	  //只影响h5端的样式
    	 "color":"#7D26CD"

              	                           }
       	                }

          }
         
 
   }

5.tabbar

  1.在pages.json配置(默认都有)
       "tabBar":{
              "color":"#",  //16进制,未选中的字体的颜色
              "selectedColor":"#",
              "backgroundColor":"",背景
              "borderStyle":"white",  //app2.4.3支持16进制,边框的样式
              "position":"top",//可以在小程序上部显示,浏览器不显示
              "list":[
	{
                        "text":"首页",
                        "pagePath":"pages/index/index",//跳转的页面
                         "iconPath":""//未选中时的icon,
                         "selectedIconPath":"",//选中时的icon

                  },
                 {
                        "text":"信息",
                        "pagePath":"pages/index/index",//跳转的页面
                         "iconPath":""//未选中时的icon,
                         "selectedIconPath":"",//选中时的icon

                  }

          
               ]



         }

6.conditio启动模式(方便小程序调试)模拟直达页面,因为有些情况不是
直接到首页的

 1.pages的选项
      "condition":{
            "current":0;  #不管
             "list":[
              {
	    "name":"详情页",  //小程序会显示的调试
                     "path":"xxx",     //路径
	     "query":"id=80" //查询的参数
              }

           ]
      }

7.text组件

  <text selectable>xxxtext>   //是否长按可以选中
     //空格显示的格式,显示中文的一半大小,ensps是中文空格大小
     //nbsp是根据设置的字体大小来决定的
    <text selectable space="ensp" style="font-size:20px">xxxtext> 
      <text decode>&text> //可以对默认字符进行解码

8.view组件

  <view hover-class="xxx" :hover-start-time="2000">  //按下去的样式
		    //点2000毫秒后出现效果, 
		    //:hover-stay-time="2000" 手指离开后持续2秒后效果消失
		   <view hover-stop-propagation  hover-class="xxx">	view> //阻止冒泡
     <view>

9.button组件

<button size="mini">button> //按钮大小
  <button type="primary">button> //颜色,蓝色
  <button plain>button>  //是否镂空
  disabled //禁用按钮
  loading//带有加载的图标,不同平台不同

10.image组件(被缩放了)

  <image src="">image>
  <image mode="aspectFill">image> //设置缩放的模式
   <image mode="aspectFit">image>