小程序笔记之目录结构

2018-08-11

I:简介

.json为配置文件
.wxml 为模板文件,相当于HTML模板
.wxss 为样式文件,相当于HTML的CSS样式表
.js 为JS 脚本逻辑文件,相当于HTML的js脚本

II:总结构

一个描述整体程序的 app
多个描述各自页面的 page
一个项目IDE配置文件project.config.json
一个共用程序逻辑库

1.主体

一个小程序主体部分(名称为app)由三个文件组成,必须放在项目的根目录
文件                               必填          作用
app.js                             是               小程序逻辑
app.json                        是               小程序公共配置
app.wxss                       否                小程序公共样式表

2.pages

多个描述各自页面的 pages(pages目录存储小程序的每个页面)
文件                               必填           作用
页面名称.js                   是               本页面逻辑
页面名称.wxml            是               页面结构
页面名称.wxss             否               页面样式表
页面名称.json              否               页面配置
注意:
1)为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
2)从上可看出可包含.json、.wxml、.wxss、.js ,4个类型的文件
.json配置文件,即是当前这个页面的配置文件,
默认创建项目时,每个页面底下没有.json配置文件,因为它不是必填必须有的文件

3.根目录下的project.config.json

1).项目配置文件或称为项目IDE配置文件
在“微信开发者工具”上做的任何配置都会写入到这个文件。
2).应用场景:
通常在使用一个开发IDE工具的时候,都会针对各自喜好做一些个性化配置,
例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,
你还要重新配置。
3).解决办法:就是这个project.config.json项目IDE配置文件
当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,
开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,
其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项
4).引申
这么说,每个项目都可以定制了一套自己喜欢的IDE配置

4.util目录

一个共用程序逻辑库(util目录)这个目录可以自定义名称,公共的js函数文件,通过module.exports的方式暴露pages下的每个页面使用,不需要每个页面编写重复的Js代码。

5.总结构图

III.注册小程序项目

一个描述整体程序的 app 之app.js文件(注册小程序项目)
作用:调用了App()函数注册一个小程序,参数为一个{}对象
App()函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等

详情参考API文档"逻辑层/程序注册"
但要注意:
1.App() 必须在 app.js 中注册,且不能注册多个。
2.不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
3.不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
4.通过 getApp() 获取实例之后,不要私自调用生命周期函数。
例子:
API文档中Object对象有一个参数:
其他    Any    开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
相当于ApplicationContext,在整个小程序上下文中都以使用,即服务整个小程序scope。
app.js程序主体逻辑层使用this访问,在页面.js逻辑层使用getApp().属性名称可以访问。

页面.js逻辑层访问
//index.js
//获取应用实例
const app = getApp()

页面.js逻辑层访问

app.js的App({自定义Any属性})

页面.js逻辑层访问

视图使用

IV.配置小程序项目

一个描述整体程序的 app 之app.json文件(配置小程序项目)
作用:对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
所有的选项配置pages、window、tabBar、networkTimeout、debug
app.json 配置项列表:
属性                           类型                   必填      描述
pages                         String Array     是          设置页面路径
window                     Object               否           设置默认页面的窗口表现
tabBar                       Object               否           设置底部 tab 的表现
networkTimeout     Object               否           设置网络超时时间
debug                        Boolean            否           设置是否开启 debug 模式
pages属性说明:
类型是String Array(字符串数组), 每一项都是字符串,来指定小程序由哪些页面组成。
每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。
小程序中新增/减少页面,都需要对 pages 数组进行修改。
文件名不需要后缀,框架自动匹配pages 数组路径下 .json, .js, .wxml, .wxss 4文件进行整合。
pages字符串数组的第一个字符串页面路径【路径+文件名】为小程序显示的首页。
如开发目录为:
pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss

pages/logs/logs.wxml
pages/logs/logs.js
则配如下(小程序中新增/减少页面,都需要对 pages 数组进行修改)
{
"pages": [
//这里的的第一个页面作为首页显示
"pages/index/index",
"pages/logs/logs"
]
}
其它详情参考API文档“配置”

V.注册页面

页面的js逻辑层(注册页面)
js文件为小程序的逻辑文件
第三节:一个描述整体程序的 app 之app.js文件(注册小程序项目),这是整个小程序的逻辑层
这里我们说到页面的逻辑层:
其主要功能就是“注册页面”
每个页面目录/页面名称.js
页面注册的使用:与app.js的注册小程序项目函数App(Object)类似使用
Page(Object)
Object参数对象{}表示,其指定页面的初始数据、生命周期函数、事件处理函数等。
具体详情参考API文档“逻辑层/注册页面”

页面逻辑层

object 参数内容在页面加载时会进行一次深拷贝,需考虑数据大小对页面加载的开销

VI.页面的json配置

页面的json配置(页面名称.json)
每一个页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键。
总结:每个页面.json(页面配置),其实就是对app.json的window配置项进行继承覆盖重写
应用:app.json中配置了启用上下拉刷新,但某些页面不需要,那么就可以在页面名.json中进行重写禁用了。又比如每个页的标题,也是需要重写的。
如:
{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"微信接口功能演示",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}
所有app.json中的window配置项在页面名.json中都是可以覆盖重写的,但页面名.json配置又有自己的特性是app.json小程序全局配置没有的
属性                      类型           默认值         描述
disableScroll      Boolean     false             设置为 true 则页面整体不能上下滚动;
只在 page.json 中有效,无法在 app.json 中设置该项

VII.页的视图层

主要有两块:wxml和wxss
具体使用参考API文档"视图层/WXML"和API文档“视图层/WXS”

视图层

VIII.概念提升(模块化)

       (一) 文件作用域

一个描述整体程序的 app 之app.js文件(注册小程序项目)和页面的js逻辑层(注册页面)之关联。
1.在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
2.通过全局函数 getApp()可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置。
// app.js
App({ globalData:1})
// a.js
var localValue ='a'
var app = getApp()
app.globalData++
// b.js
var localValue ='b'
console.log(getApp().globalData)

(二)模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。
模块只有通过 module.exports 或者 exports 才能对外暴露接口。
作用:公共代码不冗余,提高复用性
典型的应用:第二第4.一个共用程序逻辑库(util目录)
// common.js(如utils/util.js)
function sayHello(name) {
console.log('Hello ${name} !')
}
function sayGoodbye(name) {
console.log('Goodbye ${name} !')
}
//暴露方式一
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
//暴露方式二
module.exports={
sayHello : sayHello ,
sayGoodbye : sayGoodbye
}
//页面逻辑js使用,如pages/index/index.js
//require引用模块js(不支持绝对路径,只能使用相对路径)
var comUtil = require("../../utils/util.js")
Page({
helloMINA:function(){
comUtil.sayHello('MINA')
},
goodbyeMINA:function(){
comUtil.sayGoodbye('MINA')
}
})
注意:
1.exports 是 module.exports 的一个引用,
因此在模块里边随意更改 exports 的指向会造成未知的错误。
所推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者关系
2.require 暂时不支持绝对路径,只能使用相对路径。

   (三)框架图

架构图