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
示例代码:
2>.include 可以将目标文件除了 和
示例代码:
10.WXS 模块
WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内,一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现
.wxs文件可被其他的.wxs文件或 WXML 中的
引用的时候,要注意如下几点:
1>只能引用 .wxs 文件模块,且必须使用相对路径
2>wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs模块对象
3>如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行
11.
标签中只能使用定义该的WXML文件中定义的
12.WXSS样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
示例代码:@import "common.wxss";