1.什么是小程序
触手可及、用完即走
2.小程序的种类
微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序
3.小程序的发展史
2016.9.21 微信小程序内测
2016.11 微信小程序公测
2017.1 微信小程序上线
2017.9 支付宝小程序公测
2018.7 百度小程序上线
2018.9 头条小程序上线
2019.6 QQ小程序上线
4.小程序的优势
对于用户来说,节省了时间成本和手机内存空间
对于开发者来说,节省了开发成本和推广成本
5.如何调试小程序
点击编译模式
6.创建项目
用邮箱账号创建微信小程序账号,使用appid
7.全局配置
全局配置是在小程序的根目录的app.json中进行的,可以用来设置页面的文件路径、窗口表现、设置网络超时时间等等
属性 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
pages | string[] | 是 | 页面路径列表 | |
window | Object | 否 | 全局的默认窗口表现 | |
tabBar | Object | 否 | 底部 tab 栏的表现 | |
networkTimeout | Object | 否 | 网络超时时间 | |
debug | boolean | 否 | 是否开启 debug 模式,默认关闭 | |
functionalPages | boolean | 否 | 是否启用插件功能页,默认关闭 | 2.1.0 |
subpackages | Object[] | 否 | 分包结构配置 | 1.7.3 |
workers | string | 否 | Worker 代码放置的目录 | 1.9.90 |
requiredBackgroundModes | string[] | 否 | 需要在后台使用的能力,如「音乐播放」 | |
plugins | Object | 否 | 使用到的插件 | 1.9.6 |
preloadRule | Object | 否 | 分包预下载规则 | 2.3.0 |
resizable | boolean | 否 | iPad 小程序是否支持屏幕旋转,默认关闭 | 2.3.0 |
navigateToMiniProgramAppIdList | string[] | 否 | 需要跳转的小程序列表,详见 wx.navigateToMiniProgram | 2.4.0 |
usingComponents | Object | 否 | 全局自定义组件配置 | 开发者工具 1.02.1810190 |
permission | Object | 否 | 小程序接口权限相关设置 | 微信客户端 7.0.0 |
sitemapLocation | string | 是 | 指明 sitemap.json 的位置 | |
style | string | 否 | 指定使用升级后的weui样式 | 2.8.0 |
useExtendedLib | Object | 否 | 指定需要引用的扩展库 | 2.2.1 |
entranceDeclare | Object | 否 | 微信消息用小程序打开 | 微信客户端7.0.9 |
- pages
"pages": [
"pages/index/index",
"pages/logs/index"
]
- window
"window": {
"navigationBarBackgroundColor": "#f66",
"navigationBarTitleText": "WeChat",
"navigationStyle":"default",
"navigationBarTextStyle": "white",
"backgroundColor":"#efefef",
"enablePullDownRefresh":true,
"backgroundTextStyle":"dark",
"backgroundColorTop":"#eeeeee",
"onReachBottomDistance":50,
"pageOrientation":"portrait"
},
- tabBar
"tabBar":{
"color":"#333333",
"selectedColor":"#f66",
"backgroundColor":"efefef",
"borderStyle":"white",
"position":"bottom",
"custom":false,
"list":[
{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"resources/home.png",
"selectedIconPath":"resources/home_active.png"
},
{
"pagePath": "pages/kind/kind",
"text": "分类",
"iconPath": "resources/kind.png",
"selectedIconPath": "resources/kind_active.png"
},
{
"pagePath": "pages/carts/carts",
"text": "购物车",
"iconPath": "resources/cart.png",
"selectedIconPath": "resources/cart_active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "resources/user.png",
"selectedIconPath": "resources/user_active.png"
}
]
}
- networkTimeout
"networkTimeout":{
"request":6000,
"connectSocket":5000,
"uploadFile":4000,
"downloadFile":4000
}
- permission
"permission":{
"scope.userLocation":{
"desc":"您的位置信息将用于小程序位置信息展示"
}
}
- navigateToMiniProgramAppIdList
"navigateToMiniProgramAppIdList": [
"appId"
]
- sitemapLocation
"sitemapLocation": "sitemap.json"
8.页面配置
在小程序的每个单独页面会有.json文件,可以通过配置该文件来实现对于页面窗口的表现,并且在该页面配置与全局配置有冲突时,会覆盖之前全局配置的window中的相同配置项
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 | |
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white | |
navigationBarTitleText | string | 导航栏标题文字内容 | ||
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮 | 微信客户端 7.0.0 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light | |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh | |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom | |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 | 2.4.0 (auto) / 2.5.0 (landscape) |
disableScroll | boolean | false | 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置 | |
usingComponents | Object | 否 | 页面自定义组件配置 | 1.6.3 |
示例:
{
"navigationBarBackgroundColor":"#FFB6C1",
"navigationBarTextStyle":"white",
"navigationBarTitleText":"⭐ Lucia ⭐",
"backgroundColorTop": "#FFC0CB",
"onReachBottomDistance":50,
"disableScroll":false,
"enablePullDownRefresh":true,
"usingComponents": {
"prolist":"/components/prolist/prolist"
}
}
效果如下
相关小程序的使用要多看官网API文档(微信官方文档),疫情期间,少出门,多学习,逆战不停!