首页 > 技术文章 > 微信小程序开发 目录结构详情

ssen 2018-10-24 17:47 原文

最外面的app.js、app.json、app.wxss是全局脚本、全局样式或者全局配置项。
pages是用于页面文件夹,里面的文件夹一个就是一个页面,不需要引入一个css样式表啊或者脚本等等。
在pages的页面中,logs是日志,能记入一些操作的信息
只要在全局的app.json中配置页面的话,编辑器自动在pages的目录下生成页面目录及文件。
写公共的样式中,可以写入全局的app.wxss内。
全局的app.js只要App({})方法才可以调用页面的方法和属性。在页面的脚本中,是使用Page({})方法来调用

全局文件尝试
app.js
必须得使用APP({})方法来调用属性、方法和事件。只能写一个
//
App({
// 代码块,注意能使用es6的就使用吧。
})

属性 类型 描述 触发时机
onLaunch Function 生命周期函数–监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。默认参数接收的,可以看到加载页面的路径及scene场景值还有其他(从这里可以看出是有原型对象的。)
onShow Function 生命周期函数–监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide Function 生命周期函数–监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
onError Function 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
==根据上面onLaunch事件和onShow的接收参数,可以获取下面到东西==
字段 类型 说明
path String 打开小程序的路径
query Object 打开小程序的query
scene Number 打开小程序的场景值(可以看出是从什么地方打开小程序的)
shareTicket String shareTicket,详见 获取更多转发信息
referrerInfo Object 当场景为由另一个小程序打开时,返回此字段
referrerInfo.appId String 来源小程序的 appId
referrerInfo.extraData Object 来源小程序传过来的数据
onLaunch 初始化
当小程序初始化完成触发的事件, ==不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。==

App({
onLaunch:function (e) {
console.log(e,'我已经初始化了');
if(e.scene === 1011){
console.log('您是扫二维码进入的');
}else if (e.scene) {
console.log('您是长按图片识别二维码');
}else if (e.scene === 1013) {
console.log(手机相册选取二维码);
}else if (e.scene === 1029){
console.log('卡券详情页');
}
}
});

onShow 小程序启动或进入前台
进入小程序触发一次,然后只要是如果是切换到手机的桌面的话,再次进入小程序触发一次。==一个变量不能触发从新赋值==

App({
onShow:function () {
let i = 0; // 只要是在这里定义的变量都是无法重新赋值。
if (i == 0){
console.log(i+1); // 这里更够运算
i= 2+1; // 不能从新赋值
}else {
console.log(i); // 完全就是不走。
}
}
});

let j = 0; // 在这里申明变量的话,下面不管任何方法都是可以重新赋值。
App({
onShow:function () {
j++; // 可以重新赋值
if (j == 1){
console.log(j,'第一次小程序运行'); // 第一次小程序运行。
}else {
console.log(j,'你已经切换进入小程序了');
}
}
});

onHide 切换到手机桌面
App({
onHide:function () {
console.log('切换到手机桌面了');
}
});

onError 错误的脚本或者调用api(不支持)就会触发。
App({
onError:function () {
console.log('程序出错');
}
});

其他(自定义的一些属性方法)
全局app.json 配置
可以配选项卡、页面、设置入口页面、设置窗口的颜色、字、状态栏的颜色等等

{
"pages": [
"pages/index/index", // 创建index页面
"pages/logs/index" // 创建logs页面
],
"window": {
"navigationBarTitleText": "Demo", // 设置导航栏上面的标题。
"navigationBarBackgroundColor": "#000", // 导航栏的颜色
"navigationBarTextStyle" : "#fff",//导航栏标题颜色。
"backgroundColor":"#ffffff",// 窗口的颜色(下面有图片,可以说明)
"backgroundTextStyle":"light", // 下拉的图标及颜色,但是官方只提供两种,仅支持 dark/light
"enablePullDownRefresh": "ture", // 开启下拉(必须得开启,才能在页面中使用onPullDownRefresh事件进行页面下拉刷新)。
"onReachBottomDistance":"60" // 设置下拉刷新的距离。
},
// 创建选项卡,
"tabBar": {
"color": "#", // (必填)设置选项卡的颜色(只支持16位颜色值)。
"selectedColor": "", // (必填)选项卡上的文字选中时的颜色(只支持16位颜色值)
"backgroundColor": "", // (必填)选项卡的背景色(只支持16位颜色值)
"position":"top", // 可选,两个值top和bottom。默认设置bottom在下面,如果设置为top,图标就会去掉。
"borderStyle":"white", //可选,只有两个值black/white。将选项卡中的边框颜色更改为,提供两个值。
"list": [{ // (必填)必须至少2个,最多5个,都不能超过。list数组内必须得有两个值。数组顺序排序。
"pagePath": "pages/index/index", // 引入的页面
"text": "首页", // 选项卡的名字
"iconPath": "", // 设置icon图标的路径(icon不能40kb,建议尺寸81pxX81px),经过测试,不能请求网络图片,只能是本地。
"selectedIconPath": "image/location_selected.png" // 选中当前的图标,经过测试,不能请求网络图片,只能是本地。
}, {
"pagePath": "pages/logs/logs", // 引入的页面
"text": "日志"
}]
},
// 设置各种网络请求的超时时间,下面的都是默认为:60000,都是可选参数
"networkTimeout": {
"request": 10000, // 设置wx.request请求的时间,单位毫秒。
"downloadFile": 10000, // 设置wx.downloadFile的超时时间,单位毫秒。
"connectSocket": 1000, // wx.connectSocket的超时时间,单位毫秒
"uploadFile": 6000// wx.uploadFile的超时时间,单位毫秒,
},
"debug": true // 开启调试日志
}


页面page.json配置
优先级,先找到页面的配置page.json,如果没有找到,然后在外面配置的app.json中。

==比如,在index页面中,必须得是index.json。下面的颜色值,不能写出#000,必须写全#000000==

 

{
"navigationBarBackgroundColor":"#26c398", // 当前导航栏背景颜色(必须得16进制的颜色值),----不能写出#000,必须写全---
"navigationBarTextStyle":"#ffffff", // 当前导航栏标题颜色,仅支持 black/white
"navigationBarTitleText" : '我是当前页面的标题' , // 当前页面导航栏标题文字
"backgroundColor" : "#00ff00" , // 窗口的背景色
"backgroundTextStyle": "light", // 当前下拉背景字体、loading 图的样式,仅支持 dark/light
"enablePullDownRefresh": true, // 当前页面下拉开启(如果在全局的app.json中设置了,就可以不用设置,如果)。
"disableScroll": false, // 默认false,如果是一个页面,不能让用户上下滚动,设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
"onReachBottomDistance" : 120 // 当前页面上拉触底事件触发时距页面底部距离,单位为px
}

推荐阅读