小程序的配置文件可以在两个地方出现,一个是根目录下的app.json,另外一个地方就是每个page下面的json文件,两者有点区别:app.json包含'pages'(页面),'window'(窗口),'tabBar'(标签栏),'networkTimeout'(网络请求相关),'debug'(调试模式)配置选项,而页面的json只能配置window类的属性,且覆盖根目录属性。
第一个为启动页面
如果设置的页面不存在,IDE自动补齐文件
backgroundTextStyle: 'dark | light' 下拉刷新时候的文字风格
enablePullDownRefresh: true | false 是否启动下拉刷新功能
disableScroll: true | false 只能在页面中设置,不能再app.json中设置
list[{},{}]中存放标签栏的每个导航,至少要两个才能启用
在list中定义了路径的页面才会显示标签栏,没有在标签栏中定义路径的页面进入后不会显示tabBar
color,selectedColor,backgroundColor:可以设置tabBar中文字颜色、选中文字颜色和背景色,它们与list同级
position: bottom | top 如果设为top,那么tabBar会到顶部显示
app.js定义应用的生命周期函数
App({对象}):用于创建一个应用实例对象,在它内部定义应用生命周期函数
在App中除了定义生命周期函数外,还可以定义任何成员,这些成员就是全局对象,在页面用app=getApp()获取全局唯一的app对象,然后通过app.成员来访问
[page_name].js定义页面的生命周期函数
Page({}):用于创建一个页面实例对象。
页面的数据被规定必须放在逻辑页面的data对象里,data对象的属性可以被页面直接访问到。
页面访问的时候需要用{{ var_name }}小胡子语法(mustache)来输出。它可以作用在元素的内容和属性上。
页面中只要被“”号包裹的值都是字符串类型,如果要用到boolean或其他类型值,可以用小胡子语法来声明有类型的值。
data对象只能暴露数据成员,函数成员没法暴露,在视图中定义函数:(必须遵循commonjs规范)
module.exports = {
f1:function(str){
return str+'ok';
}
}
使用{{ name.f1(x) }}在视图中使用。
在逻辑文件中用this.setData({ data1='string1' })方式设置值,然后在页面文件中用控制属性来使用值。控制属性如下:
在需要包裹元素的时候,可以用
控制属性如下:
{{ i }}
{{ s.name }}
{{ s.age }}
如果不制定for-item默认为item变量,不制定for-index默认为index变量,key设置的值是遍历数据单项的属性名,不需要小胡子语法,还可以通过*this来制定当前被遍历的元素。
在视图页面绑定事件处理函数,在逻辑页面定义事件处理函数。具体事件根据元素不同而有所区别,可以参考开发文档。在事件中用bind+事件名来绑定,如果要阻止事件冒泡就用catch+事件名来绑定。
事件传参:用data-属性来实现,在逻辑页面获取事件函数参数e.target.dataset的属性来获取
data数据在视图页面通过小胡子语法直接绑定;
如果要从视图改变逻辑页面的数据,要通过视图中的事件来实现;
事件回传的数据要再次改变视图页面,必须用setData({})来实现。