1.开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018313
2.项目所有格式文件
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
3.app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.
包含所有配置的app.json文件:
{
//设置页面路径,每一项代表对应页面的【路径+文件名】信息,数组第一项代表程序的初始页面
"pages": [
"pages/index/index",
"pages/logs/index"
],
//设置默认页面的窗口表现
"window": {
"navigationBarTitleText":"Demo"
},
//设置底部 tab 的表现
"tabBar": {
"list": [
{"pagePath":"pages/index/index","text":"首页"}, {"pagePath":"pages/logs/logs","text":"日志"}
]
},
//设置网络超时时间
"networkTimeout": {
"request":10000,"downloadFile":10000
},
//设置是否开启 debug 模式
"debug":true
}
4.app.json文件window节点配置说明
navigationBarBackgroundColor:导航栏背景颜色，默认"#000000"
navigationBarTextStyle:导航栏标题颜色(默认white)，仅支持 black/white
navigationBarTitleText:导航栏标题文字内容
navigationStyle:导航栏样式，仅支持default/custom(默认default)。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮,只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用） 可方便切到旧视觉
backgroundColor:窗口的背景色,默认#ffffff
backgroundTextStyle:下拉背景字体、loading 图的样式(默认 dark), 仅支持 dark/light
backgroundColorTop:顶部窗口的背景色(默认 #ffffff)，仅 iOS 支持
backgroundColorBottom:底部窗口的背景色(默认 #ffffff)，仅 iOS 支持
enablePullDownRefresh:是否开启下拉刷新,默认false
onReachBottomDistance:页面上拉触底事件触发时距页面底部距离，单位为px,默认50px
5.app.json文件中tabBar配置说明:
color:tab 上的文字默认颜色,必填项
selectedColor:tab 上的文字选中时的颜色,必填
backgroundColor:tab的背景色,必填
borderStyle:tabbar上边框的颜色， 仅支持 black/white,非必填,默认 black
list:tab 的列表，最少2个、最多5个 tab,必填,数组中的每个项都是一个对象，其属性值如下：
pagePath:页面路径，必须在 pages 中先定义
text:tab上字体
iconPath:图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath:选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
position:可选值 bottom、top,非必填,默认bottom
6.app.json文件中networkTimeout节点配置说明
可以设置各种网络请求的超时时间
request:wx.request的超时时间，单位毫秒，默认为：60000
connectSocket:wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile:wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile:wx.downloadFile的超时时间，单位毫秒，默认为：60000
7.page.json文件对本页面的窗口表现进行配置,且只能配置window相关的配置项,因此page.json文件中无需写window这个键
8.模块化的公共js文件只有通过 module.exports 或者 exports 才能对外暴露接口,更推荐采用 module.exports 来暴露模块接口
例如:
// common.js
function sayHello(name){
console.log(`Hello${name}!`)
}
function sayGoodbye(name){
console.log(`Goodbye${name}!`)
}
//推荐采用 module.exports 来暴露模块接口
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要使用这些模块的js文件中，使用 require(path) 将公共代码引入(require 暂时不支持绝对路径)
例如:
//other.js
//将公共代码引入
var common = require('common.js')
Page({
helloMINA:function(){
common.sayHello('MINA')
},
goodbyeMINA:function(){
common.sayGoodbye('MINA')
}
})
9.WXML的引用
WXML 提供两种文件引用方式import和include
import和include的区别:
1>.import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template,如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template
示例代码:<import src="item.wxml"/>
2>.include 可以将目标文件除了 <template/>和<wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
示例代码:<include src="item.wxml"/>
10.WXS 模块
WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内,一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现
.wxs文件可被其他的.wxs文件或 WXML 中的 <wxs>标签引用,.wxs模块中引用其他 .wxs 文件模块，可以使用 require 函数 (同src引用特点一样)
引用的时候，要注意如下几点：
1>只能引用 .wxs 文件模块，且必须使用相对路径
2>wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs模块对象
3>如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行
11.<wxs>注意
<wxs>模块只能在定义模块的 WXML 文件中被访问到。使用 <include>或<import> 时， 模块不会被引入到对应的 WXML 文件中.
<template>标签中只能使用定义该<template>的WXML文件中定义的<wxs>模块
12.WXSS样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
示例代码:@import "common.wxss";
网友评论