一、小程序概述
微信小程序简称小程序(Mini Program),它是存在于微信内部的轻量级的应用程序。
特点:无需下载与安装,用完即走,随时可用
功能:小程序页、对话分享、搜索查找、公众号关联、线下扫码、小程序切换、消息通知、历史列表等。
创建流程:
- 注册:微信公众平台注册网址:https://mp.weixin.qq.com/
- 信息完善:完善名称、头像、介绍、服务类目等信息
- 开发:开发资料参见微信官方网址:https://developers.weixin.qq.com/miniprogram/dev/
- 提交审核与发布
二、第一个微信小程序
双击微信开发者工具,输入小程序管理项目,依次填写项目目录、AppID(微信公众平台注册的小程序ID)。
AppID位置:微信公众平台https://mp.weixin.qq.com/登录,左侧菜单【开发】->【开发设置】->【开发者ID】
目录结构
目录结构 |
文件 |
说明 |
项目配置文件 |
project.config.json |
定义小程序的项目名称,AppID等内容。新建项目时自动生成,位于根目录下 |
主体文件 |
app.json |
公共配置文件,包含所有页面路径、导航栏样式等 |
app.js |
全局逻辑文件, |
|
app.wxss |
全局样式文件 |
|
页面文件 |
pages文件夹 |
保存所有页面文件 |
其他文件 |
utils文件夹 |
存放公共JS文件 |
images文件夹 |
存放图片,自己创建 |
第一个微信小程序界面:
全局配置文件app.json中的属性
属性 |
类型 |
说明 |
pages |
String Array |
必填属性,用于记录所有页面的地址,第一个默认为初始页面 |
window |
Object |
可选属性,用于设置页面的窗口表现,如导航栏背景色 |
tabBar |
Object |
可选属性,用于设置页面底部的tab工具条的表现 |
networkTimeout |
Object |
可选属性,用于设置各种网络请求的超时时间 |
debug |
Boolean |
可选属性,用于设置是否开启调试模式【"debug":true/false】 |
window属性
属性 |
类型 |
默认值 |
描述 |
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色 |
navigationBarTitleText |
String |
|
导航栏标题文字内容 |
navigationBarTextStyle |
String |
white |
导航栏标题颜色 |
navigationStyle |
String |
default |
导航栏样式,只支持default和custom |
backgroundColor |
HexColor |
#ffffff |
窗口背景色 |
backgroundTextStyle |
String |
dark |
下拉加载的样式,只能是dark或light |
backgroundColorTop |
String |
#ffffff |
顶部窗口背景色(仅支持ios) |
backgroundColorBottom |
String |
#ffffff |
底部窗口背景色(仅支持ios) |
enablePullDownRefresh |
Boolean |
false |
是否开启下拉刷新功能 |
onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距离页面底部的距离,单位px |
备注:HexColor,仅支持十六进制颜色表示方式
tabBar属性
属性 |
类型 |
默认值 |
描述 |
color |
HexColor |
|
必填,文字默认颜色 |
selectedColor |
HexColor |
|
必填,文字选中时的颜色 |
backgroundColor |
HexColor |
|
必填,背景色 |
borderStyle |
String |
black |
边框颜色,仅支持black、white |
list |
Array |
|
必填,tab的列表 pagePath:页面路径 text:按钮文字 iconPath:图标路径 selectedIconPath:选中时的图标路径 |
position |
String |
bottom |
位置,仅支持bottom、top |
networkTimeout属性
属性 |
类型 |
默认值 |
描述 |
request |
Number |
60000 |
wx.request()的超时时间,单位毫秒 |
connectSocket |
Number |
60000 |
wx.connectSocket()的超时时间,单位毫秒 |
uploadFile |
Number |
60000 |
uploadFile()的超时时间,单位毫秒 |
downloadFile |
Number |
60000 |
downloadFile()的超时时间,单位毫秒 |