踩的坑:
微信小程序中的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()
获取实例之后,不要私自调用生命周期函数。
- 全局的
-
场景值
- 事件响应:
- 事件分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。
- 事件分为冒泡事件和非冒泡事件:
- import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
include
可以将目标文件除了<template/>
<wxs/>
外的整个代码引入,相当于是拷贝到include
位置-