1.项目目录结构
1.1,app.json配置
1.11,pages属性
注意:数组第一项为初始页面
1.12,window属性
1.13,tabBar属性
1.131,tabBar -- list属性详解
注意:1.当设置 position 为 top 时,将不会显示 icon
2.tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
1.14,networkTimeout网络事件设置
1.15,debug调试属性
2,page.json配置
app.json对全局页面配置。page.json单个页面配置,覆盖全局配置。单个页面配置,只配置本页面窗口表现,window,可省略。
2,逻辑层 (.js)
2.1,App()
App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
也可以再其中添加数据,则为全局数据:globalData:'I am global data'
2.11,onLaunch,onShow参数
referrerInfo.appId来应用场景值
(后期详解)
2.12,onPageNotFound参数
2.13,getApp()函数
可以用来获取到小程序实例
2.14,注意事项
1.App() 必须在 app.js 中注册,且不能注册多个。
2.不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
3.不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
4.通过 getApp() 获取实例之后,不要私自调用生命周期函数。
2.2,场景值
可以在 App 的 onlaunch 和 onshow 中获取上述场景值,部分场景值下还可以获取来源应用、公众号或小程序的appId。
referrerInfo.appId来应用场景值
2.3,注册页面
Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
2.31,Page() 函数参数列表
2.32,data页面数据初始化
2.33,周期函数
2.34,页面处理函数
2.35,Page.prototype.route属性
基础库 1.2.0 开始支持,低版本需做兼容处理
route 字段可以获取到当前页面的路径。
2.36,Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
2.37,setData()
2.4 页面路由
2.41 getCurrentPages()
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
2.42 路由方式
注意:
2.5 模块化
2.51 文本作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在App() 中设置。
2.52 模块化
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
要注意的是:
exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。
3. 视图层(.wxml,wxs,wxss)
3.1 WXML
3.11 标签
后面组件详解
3.12 数据绑定(跟vue很像)
同vue一样,也可以在{{}}中进行数据计算
3.13 渲染指令
wx:for 列表渲染,遍历
wx:if, wx:elseif, wx:else 条件渲染
3.14 事件绑定
bindtap="事件名"
3.15 template模块
定义模板
使用 name 属性,作为模板的名字。然后在templete模板中定义代码块。
使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如
3.16 引用
WXML 提供两种文件引用方式import和include。
import引用
import作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
include引用
3.2 WXS
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。类似html中的javascript脚本语言。
注意:
WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内。
每一个 .wxs 文件和 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
每个 wxs 模块均有一个内置的 module 对象。
属性
exports: 通过该属性,可以对外共享本模块的私有变量与函数。
src:引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。
注意
wxs 模块只能在定义模块的 WXML 文件中被访问到。使用 include或 import时,wxs 模块不会被引入到对应的 WXML 文件中。
<template>标签中,只标签标签标签能使用定义该<template>的WXML 文件中定义的 wxs模块。标签标签标签标签标签标签标签标签标签
3.3 WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
尺寸计算:
样式导入(外联)
样式导入(内嵌)
选择器