微信小程序基础知识

Day01

pages文件里是与页面有关的文件，里面会有index和log两个文件：

• index文件里面是主页面的文件
• log文件是日志文件
• 也可以通过新建文件夹->新建page新建文件路径，此路径会自动写入json文件

其中都会有四个文件：

•  xxx.js：页面相关的js代码可以写在这里
• xxx.wxml：这个就是页面文件，相当于我们之前的HTML，所以页面结构内容写在这里
• xxx.wxss：页面的样式内容，相当于之前的css，所以页面相关的样式可以写在这里
• xxx.json：页面有关的配置，比如页面导航栏的背景色、内容等等

json里的全局配置：

1. pages(String[]):页面路径列表
   1. 如果pages里面的路径文件不存在，会报错，所以在删除文件之后也要把路径删除
   2. json文件的属性统一用双引号
   3. json文件里面不可以写注释，会报错
2. window:用于设置小程序的状态栏、导航条、标题、窗口背景色
   1. navigationBarBackgroundColor：导航栏背景颜色，默认为#000000
   2. navigationBarTextStyle：导航栏标题颜色，仅支持black/white
   3. navigationBarTitleText：导航栏标题文字内容
   4. navigationStyle：导航栏样式，仅支持以下值：
      1. default 默认样式
      2. custom 自定义导航栏，只保留右上角胶囊按钮。
3. tabBar:客户端窗口的底部或顶部可以切换页面的 tab
   1. color：tab上文字的默认颜色，仅支持十六进制
   2. selectedColor：tab选中时的颜色，仅支持十六进制
   3. backgroundColor：tab的背景颜色，仅支持十六进制
   4. borderStyle：tabbar上边框的颜色，仅支持black/white
   5. list：tab的列表，只能配置最少2个，最多5个tab
   6. position：tabbar的位置，仅支持bottom/top，如果是在上边图标不显示

• 注意：图标文件不能放在pages页面里

WXSS

与css相比，扩展了尺寸单位和样式导入

• 尺寸单位

        rpx(responsive pixel)：根据屏幕宽度自适应，iphone6中1rpx = 0.5px = 1物理像素

• 样式导入

        使用@import导入样式，后面空格直接跟引号写要导入样式的路径，最后加引号，不然会报错

        文件在哪引入就相当于把样式写在哪

• 内联样式

        框架组件上支持使用style、class属性来控制组件的样式

• 选择器
  • .class
  • #id
  • element,如view组件
  • element,element  如view和checkbox组件
  • ::before
  • ::after

微信小程序组件

不同于html,小程序上面所有的标签都没有，称为组件，只有view+text+img

view块元素，可以嵌套view和其他标签，类似div，而text类似于span

• view组件

        hover-class：指定按下去的样式类，当 hover-class="none" 时，没有点击态效果

        flex-direction:row  横向显示

        flex-dirextion:column  纵向显示

• swiper组件

        滑块视图容器，其中只可放置swiper-item组件，否则会导致未被定义的行为

        属性可以直接写，不写值

        1.indicator-dots：是否显示面板指示点，默认false

        2.indicator-color：指示点颜色

        3.indicate-active-color：当前选中指示点的颜色

        4.autoplay：是否自动切换，默认为false

        5.interval：自动切换时间间隔,默认是5000ms

        6.current：当前所在滑块的index

        7.duration：滑动动画时长，默认是500ms

        8.easing-function：指定swiper切换缓动动画类型

                default 默认缓动动画

                linear 线性

                easeInCubic、easeOutCubic、easeInOutCubic

• scroll-view组件

        可滚动视图区域，使用竖向滚动时，需要给scroll-view一个固定高度

        scroll-x:是否允许横向滚动

        scroll-y:是否允许纵向滚动

• icon组件
  • type：icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  • size：icon的大小，单位默认为px
  • color：icon的颜色
• progress组件

        进度条，默认单位是px

       percent：百分比，0-100

        show-info：在进度条右侧显示百分比

        stroke-width：进度条线的宽度

• text组件
• 表单组件
  • button
    • size
      • default
      • mini
    • type
      • primary 绿色
      • default 白色
      • warn 红色
    • plain 是否镂空，背景透明
    • disabled 是否禁用
    • loading：是否带loading图标
    • form-type：用于form组件，点击会触发form组件的submit/reset事件
    • open-type：微信开放能力
      • contact 打开客服会话，只有真机测试才能打开
      • share 触发用户转发 用户转发界面可以自己设置
      • getPhoneNumber 手机号快速验证，需要使用回调函数
      • getUserInfo 获取用户信息，需要使用回调函数
      • chooseAvatar 获取用户头像
  • input
    • type
      • text
      • number
      • idcard 身份证输入键盘
      • digit 带小数点的数字键盘
      • safe-password 密码安全输入键盘
      • nickname 昵称输入键盘
    • password 是否是密码类型
    • focus 获取焦点
    • confirm-type 设置键盘右下角按钮的文字，仅在type='text'时生效
      • send 发送
      • search 搜索
      • next 下一个
      • go 前往
      • done 完成