微信小程序学习笔记

本文是笔者学习微信小程序开发的一些笔记。

Posted by 南三号 on April 10, 2018

踩的坑:

微信小程序中的button组件有特定的css,背景可以用“background:none”去掉,但是边框再用“border : none”去掉就不可以了,这也是微信小程序与h5的不同之处。

/*使用如下方法来去除边框 */
button::after{ 
		border: none; 
	} 

微信小程序入门

小程序应用场景

  • 低频非刚需

小程序文件组成

  • app.json
    • pages:小程序中新增/减少页面,都需要对 pages 数组进行修改。
    • windows:用于设置小程序的状态栏、导航条、标题、窗口背景色
    • tabBar:设置底部 tab 的表现
    • networkTimeout:设置网络超时时间
    • debug:设置是否开启 debug 模式
  • app.js:App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等
    • onLaunch
    • onShow
    • onHide
    • onError
    • onPageNotFound
    • 其他:开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
  • app.wxss:公共样式表
  • 一个小程序page的文件组成:
    • js
    • wxml
    • wxss
    • json:用于这个页面的配置

app.json文件

  • pages:一个文件夹即一个页面

  • 页面配置在app.json中,新增页面需要在app.json的pages中注册

  • 文件名不需要写文件后缀,因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合,而不需要将每个文件均添加到page中。

    //假如有一个index的page
    {
      "pages":[
        "pages/index/index"
      ]
    }
    

app.js文件

  • 关闭小程序(基础库版本1.1.0开始支持): 当用户从扫一扫、转发等入口(场景值为1007, 1008, 1011, 1025)进入小程序,且没有置顶小程序的情况下退出,小程序会被销毁。

  • page实例生命周期

  • getApp()

    • 全局的 getApp() 函数可以用来获取到小程序实例
    // other.js
    var appInstance = getApp()
    console.log(appInstance.globalData) // I am global data
    
    • 注意:
      • App() 必须在 app.js 中注册,且不能注册多个。
      • 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
      • 不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
      • 通过 getApp() 获取实例之后,不要私自调用生命周期函数。
  • 场景值

  • 事件响应:
    • 事件分为冒泡事件和非冒泡事件:
      1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
      2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
    • bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
  • import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
  • include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置