(一)小程序的基本目录结构
1.在微信小程序开发基础中,小程序的基本目录结构有:app.js, app.json, app.wxss, project.config.json
如下图:
pages目录中有2个子目录,分别是index和logs,每个子目录中保存着一个页面的相关文件。
2.页面文件
小程序通常是由多个页面组成的,每个页面包含4个文件,同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时,小程序会根据app.json 设置的路径找到相对应的资源进行数据绑定。
(1) .js文件页面逻辑文件,在该文件中编写JavaScript代码控制页面的逻辑。该文件
在每个小程序的页面中不可缺少。
(2) .wxml 文件页面结构文件,用于设计页面的布局、数据绑定等,类似HTML页面中的.html文 件。该文件在页面中不可缺少。
(3) .wxss文件页面样式表文件,用于定义本页面中用到的各类样式表。当页面中有样式表文件 时,文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则,直接使用 app.wxss 中指定的样 式规则。该文件在页面中不可缺少。
(4) .json 文件页面配置文件。该文件在页面中不可缺少
3.主体文件
微信小程序的主体部分由3个文件组成,这3个文件必须放在项目的主目录中,负责小程序的整体配置,它们的名称是固定的。
(1)app,js小程序逻辑文件,主要用来注册小程序全局实例。在编译时,app.js文件会和其他页 面的逻辑文件打包成一个 JavaScript 文件。该文件在项目中不可缺少。
(2)app,json小程序公共设置文件,配置小程序全局设置。该文件在项目中不可缺少。
(3)app wass小程序主样式表文件,类似HTML 的.css文件。在主样式表文件中设置的样式在其 他页面文件中同样有效。该文件在项目中不是必需的。
(二)小程序的开发框架
微信团队为小程序的开发提供了MINA框架。如下图:
(三)配置文件
1.全局配置文件如图:
2.Windows配置项及其描述:
在app.js中设置如下window配置项
"window": {
"navigationBarBack groundColor": "#fff",
"navigationBarText Style": "black",
"navigationBarTitl eText":"小程序window功能演示",
"backgroundColor" "#ccc",
"backgroundTextSty le": "light"
}
3.tabBar配置项及其描述以及tabBar中list选项
在app.json文件中设置如下tabBar配置:
"tabBar":{
"color": "#666666",
"selectedColor":"#ff0000",
"borderStyle": "black",
"backgroundColor":"#ffffff",
"list":[
{
"pagePath": "pages /index/index",
"iconPath"; "images/index1.png",
"selectedIconPath": "images/index2.png",
"text":"首页"
},
{
"pagePath": "pages /news /news",
"iconPath": "images /news1.png",
"selectedIconPath": "images/news2.png",
"text":"新闻"
}
]
}
}
4.networkTimeout配置项
(四)逻辑层文件
1.项目逻辑文件配置项
我们在Demo的app.js代码如下:
App({
//当小程序初始化完成时,会触发onLaunch(全局只触发一次
onLaunch: function () {
console.log(“小程序初始化完成......”)
},
//当小程序启动(或从后台进入前台显示),时会触发onShow
onShow; function (options){
console.log("小程序显示”);
console.log( this.data);
console.log(this.fun())
},
//当小程序从前台进入后台,会触发onHide
onHide: function (){
console.1og("小程序进入后台”)
},
// 当小程序发生脚本错误,或者API调用失败时,会触发onError并带上错误信息
onError; function (msg){
},
//自定义方法
fun; function (){
console.log("在app,js中定义的方法");
},
//自定义属性
data:‘在app.js中定义的属性’
})
2.页面逻辑文件配置项
(五)页面样式文件
WXSS常用属性