开端
选择的是B站上的黑马程序员的课程
使用平台是微信开发者工具,下载地址是微信开发者下载
很多基本信息都可以在这个网站上学习到
基础知识
MINA指的就是原生框架
WXML 写标签
WXSS 写样式
JavaScript 写逻辑
全局配置文件
接下来依次介绍app.json中的三个字段
page字段
可以在app.json的pages处直接添加字段并保存,将会自动生成相应的文件夹,
注意这个必须要在微信开发者工具中进行这个操作,在其他软件(如vscode)中直接添加字段是不会自动帮你新建相应文件夹的
在pages数组中的第一个则是默认的起始页
window字段
定义小程序所有界面的顶部背景颜色,文字颜色定义等
配置文件在微信开发者工具中写
自己的标签样式逻辑在Vscode中写
tabbar字段
底部导航栏,list中的每一个元素就是底部导航栏的一个界面
"tabBar": {
"list": [{
"pagePath": "pagePath",//跳转路径
"text": "text",//名称(ex:购物车、我的)
"iconPath": "iconPath",//未被选中时的图标
"selectedIconPath": "selectedIconPath"//被选中时的图标
}]
}
注意此处用到的icon文件需放置在与pages同层地址处,图标可以在阿里图标上找
tabbar的属性:
注意这些属性都是同一级别的,比如说要为添加color,是要在list同一级别添加的
app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/img/img",
"pages/mine/mine",
"pages/search/search",
"pages/demo01/demo01"
],
"window": {
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true,
"backgroundColor": "#1158FF",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "我的应用",
"navigationBarTextStyle": "white"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/_home.png",
"selectedIconPath": "icon/home.png"
},
{
"pagePath": "pages/img/img",
"text": "图片",
"iconPath": "icon/_img.png",
"selectedIconPath": "icon/img.png"
},
{
"pagePath": "pages/mine/mine",
"text": "个人中心",
"iconPath": "icon/_my.png",
"selectedIconPath": "icon/my.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "icon/_search.png",
"selectedIconPath": "icon/search.png"
}
],
"color": "#AA00FF",
"selectedColor": "#00FFFF",
"backgroundColor": "#0000FF",
"position": "top"
},
"sitemapLocation": "sitemap62.json"
}
效果
页面配置
指的是通过修改单个页面的json文件定义单个页面的样式,
属性与全局配置中的window差不多,具体的可以参考官网上的详细介绍:页面配置
sitemap配置
sitemap配置
用于配置小程序及其页面是否允许被微信索引的文件