微信小程序—— 1 基础

组件:

<view> 视图容器 <icon> 图标文件
<text> 文本域 <checkbox> 复选框
<button> 按钮 <radio> 单选框
<image> 图片 <input> 输入框
<form> 表单 <progress> 进度条
  1. text与view的区别

    1. text中回车键有换行效果,而view中没有
  2. input中type类型:

    可选值 说明 默认
    text 文本输入键盘
    number 数字输入键盘 -
    idcard 身份证输入键盘 -
    digit 带小数点的数字键盘 -
  3. 全局样式和页面样式

    1. 页面样式需要导入:
        @import "文件名";
    2. 全局样式在app的根目录下,不需要导入
    3. 页面样式的优先级高于全局样式
    
  4. wxss选择器

    选择器 示例 说明
    .class .container 选择所有class="container"的组件
    #id #id 选择id="#id"的组件
    element view 选择所有view组件
    element, element view, text 选择所有view组件和所有text组件
    ::after view::after 在view组件内的后面插入内容
    ::before view::before 在view组件内的前面插入内容
  5. 配置文件

    1. 页面级配置

      navigationBarBackgroundColor 导航栏背景颜色,默认为“#000000”
      navigationBarTextStyle 导航栏标题颜色,仅支持black、white(默认)
      navigationBarTitleText 导航栏的标题文字内容
      backgroundColor 窗口的背景色,默认为“#ffffff”
      backgroundTextStyle 下拉loading的样式,仅支持dark(默认)、light
      onReachBottomDistance 页面上拉触底事件触发时距页面底部距离(单位为px),默认为50
      enablePullDownRefresh 是否全局开启下拉刷新,默认为false
      disableScroll 默认为false。设为true时,页面整体不能上下滚动
    2. 应用级配置

      属性 说明
      pages 页面路径列表
      window 全局的默认窗口表现
      tabBar 底部 tab 栏的表现
      networkTimeout 网络超时时间
      debug 是否开启调试模式,默认为false
      requiredBackgroundModes 需要在后台使用的能力,如“音乐播放”
      plugins 使用到的插件
      1. networkTimeout

        request Number wx.request()的超时时间(毫秒),默认为60000
        connectSocket Number wx.connectSocket()的超时时间(毫秒),默认为60000
        uploadFile Number wx.uploadFile()的超时时间(毫秒),默认为60000
        downloadFile Number wx.downloadFile()的超时时间(毫秒),默认为60000
  6. 页面逻辑

    1. page()函数参数对象属性:

      属性 类型 说明
      data Object 页面的初始数据
      onLoad Function 生命周期回调函数,监听页面加载
      onReady Function 生命周期回调函数,监听页面初次渲染完成
      onShow Function 生命周期回调函数,监听页面显示
      onHide Function 生命周期回调函数,监听页面隐藏
      onUnload Function 生命周期回调函数,监听页面卸载
      onPullDownRefresh Function 页面事件处理函数,监听用户下拉动作
      onReachBottom Function 页面事件处理函数,页面上拉触底
      onShareAppMessage Function 页面事件处理函数,用户单击右上角的分享按钮
      onPageScroll Function 页面事件处理函数,页面滚动会连续触发
      其他 Any 开发者可以添加任意的函数或者数据到data中,在页面的函数中可以通过this.*来访问。
      注意:
      使onPullDownRefresh,OnReachBottom,OnPageScroll函数生效,需加两个参数在对应的json文件中
      
      "onReachBottomDistance": 20, //距离越大,越容易触发
        "enablePullDownRefresh": true // 默认为false
      
    2. e.target和e.currentTarget的区别:

      1. e.target获取子元素的属性集合
      2. e.currentTarget获取父元素的属性集合
  7. 冒泡事件:

    属性 类型
    touchstart 手指触摸动作开始
    touchmove 手指触摸后移动
    touchcancel 手指触摸动作被打断,如来电提醒,弹窗
    touchend 手指触摸动作结束
    tap 手指触摸后马上离开
    longpress 手指触摸后,超过350ms再离开。如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

    绑定冒泡事件和非冒泡事件:

    bindtap: 冒泡
    catchtap: 不冒泡
    
  8. app.js的生命周期函数:App()函数

    onLaunch****()****和****onShow()****函数*触发后返回的字段:

    ppath:打开小程序的路径。

    pquery:打开小程序的query。

    pscene:打开小程序的场景值。

    pshareTicket:获取到shareTicket。

    preferrerInfo:获取来源于小程序、公众号的AppId等。

    App()****函数中还可以保存一些在所有页面中共享的数据

组件

  1. swiper****组件常用属性

    可选值 说明 默认
    indicator-dots Boolean 是否显示面板指示点,默认为false
    indicator-color Color 指示点颜色,默认为rgba(0,0,0,.3)
    indicator-active-color Color 当前选中的指示点颜色,默认为#000000
    autoplay Boolean 是否自动切换,默认为false
    current Number 当前所在滑块的index,默认为0
    current-item-id String 当前所在滑块的item-id(不能同时指定current)
    interval Number 自动切换时间间隔(毫秒),默认为5000
    duration Number 滑动动画时长(毫秒),默认为500
    circular Boolean 是否采用衔接滑动,默认为false
    vertical Boolean 滑动方向是否为纵向,默认为false
    bindchange EventHandle current改变时会触发change事件
  2. include主要用途:

    p将代码拆分到多个文件中,可以更方便地查找代码。

    p将代码公共部分抽取出来。通过外部文件引入。

  3. scroll-view****组件的属性及说明

    可选值 说明 默认
    scroll-x Boolean 允许横向滚动,默认为false
    scroll-y Boolean 允许纵向滚动,默认为false
    scroll-top Number / String 设置竖向滚动条的位置
    scroll-left Number / String 设置横向滚动条的位置
    bindscrolltoupper EventHandle 滚动到顶部/左边时触发的事件
    bindscrolltolower EventHandle 滚动到底部/右边时触发的事件
    scroll-with-animation Boolean 在设置滚动条位置时是否使用动画过渡
    scroll-into-view String 设置哪个方向可滚动,则在哪个方向滚动到该元素。值应为某子元素id(id不能以数字开头)
    bindscroll EventHandle 滚动时触发的事件
    scrollLeft:横向滚动条左侧到视图左边的距离。
    scrollTop:纵向滚动条上端到视图顶部的距离。
    scrollHeight:纵向滚动条在Y轴上最大滚动距离。
    scrollWidth:横向滚动条在X轴上最大的滚动距离。
    deltaX:横向滚动条的滚动状态。
    deltaY:纵向滚动条的滚动状态。
    
  4. image****组件属性及说明

    可选值 说明 默认
    src String 图片资源地址
    mode String 图片裁剪、缩放的模式,默认为'scaleToFill'
    lazy-load Boolean 图片是否懒加载,默认为false。只针对page与scroll-view下的image有效
    binderror HandleEvent 图片发生错误时的事件
    bindload HandleEvent 图片载入完成时的事件
    scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素。适用于容器与图片宽高比相同的情况,如果不同,图片会变形。
    aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。适用于将图片完整显示出来。例如,详情页的图片
    aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来,长边将会发生截取。适用于容器固定,图片自动缩放的情况,如列表页的缩略图
    widthFix 宽度不变,高度自动变化,保持原图宽高比不变

    image****组件9种裁剪模式

    可选值 说明
    top 不缩放图片,只显示图片的顶部区域
    bottom 不缩放图片,只显示图片的底部区域
    center 不缩放图片,只显示图片的中间区域
    left 不缩放图片,只显示图片的左边区域
    right 不缩放图片,只显示图片的右边区域
    top left 不缩放图片,只显示图片的左上边区域
    top right 不缩放图片,只显示图片的右上边区域
    bottom left 不缩放图片,只显示图片的左下边区域
    bottom right 不缩放图片,只显示图片的右下边区域
  5. slider****组件属性及说明:滑块

    可选值 类型 说明
    block-size Number 滑块的大小,取值范围为12~28,默认为28
    block-color Color 滑块的颜色,默认为#ffffff
    show-value Boolean 是否显示当前value,默认为false
    bindchange EventHandle 完成一次拖动后触发的事件
    bindchanging EventHandle 拖动过程中触发的事件
  6. this作用域分析:

    1.在Page({})里面,this关键字指代Page({})整个对象

    2.因此可以通过this关键字访问或者重新设置Page({})里data的变量

    3.然而在loadData函数中使用了wx.request({})API这个方法导致在wx.request({})里没办法使用this来获取Page({})对象

    4.虽然在wx.request({})里没法使用this获取Page({})对象,但是可以在wx.request({})外面先把this存在某个变量中,所以就有了 var that =this 这个声明。此时that指代Page({})整个对象,这样子就可以在wx.request({})里使用that访问或者重新设置Page({})里data的变量

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,589评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,615评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,933评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,976评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,999评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,775评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,474评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,359评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,854评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,007评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,146评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,826评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,484评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,029评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,153评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,420评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,107评论 2 356