2.1小程序代码结构
目录结构
1.小程序的目录
pages:小程序的页面 页面路径
一个小程序页面由四个文件组成,分别是:
xxx.js xxx.wxml xxx.json xxx.wxss
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名
如果使用其他的文件:比如 图片文件 和pages文件同级创建文件夹
2.utils 自带的一个js文件 处理日期格式的 在日志页面使用js文件
3.app.js 全局的逻辑
4.app.json 全局的配置 窗口样式
5.app.wxss 全局的样式
6.project.config.json 配置文件 文件的资源介绍 引用的文件 以及窗口样式
7.sitemap.json 开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引
2.2 全局app.json-pages页面
文档位置:指南—目录结构----app.json 小程序公共配置
功能:小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
app.json :不能有注释
2.2.1 pages页面路径
属性:pages用于指定小程序由哪些页面组成,每一项都对应一个页面的路径(含文件名)
1.pages属性里面 第一个页面路径就是进入小程序首页
2.pages里面 写的页面的路径名字不写后缀
3.pages文件的最后一个页面路径结束后 不能加, 逗号
4.创建文件 在pages文件上 右键先创建文件名字,继续右键Page 会生成4个文件 wxml js json wxss,同时app.json里面pages属性自动配置页面路径。
2.2.2 window窗口配置
属性:window用于设置小程序的状态栏、导航条、标题、窗口背景色
{
“backgroundTextStyle”: “dark”,//loading图标颜色
“navigationBarBackgroundColor”: “#000”,//导航背景颜色
“navigationBarTextStyle”:“white”,//导航标题颜色
“navigationBarTitleText”: “我的小程序”,//导航标题内容
“backgroundColor”:“#999”,//窗口背景颜色 --下拉才可以看到
“enablePullDownRefresh”:true//允许窗口下拉
}
2.2.3 页面json配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项
2.3 标签栏配置-app.json
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面
"tabBar":{
"color":"#666",//tab文字默认颜色
"selectedColor":"#000",//tab文字选中高亮颜色
"backgroundColor":"#eee",//tab背景颜色
"borderStyle":"black",//tabber的边框颜色
"position":"bottom",//tab位置
"list":[//tab的内容 最少2个 最多是5个内容
{
"pagePath":"pages/index/index",//路径 路径在pages里面存在
"text":"首页",//tab文字
"iconPath":"images/tab1.png",//默认iicon
"selectedIconPath":"images/tab2.png"//选中的icon高亮
},
{
"pagePath": "pages/news/news",
"text": "新闻",
"iconPath": "images/tab3.png",
"selectedIconPath": "images/tab4.png"
},
{
"pagePath": "pages/about/about",
"text": "我的",
"iconPath": "images/tab5.png",
"selectedIconPath": "images/tab6.png"
}
]
}
三、样式
位置:指南—目录结构—app.wxss (page.wxss)’ 小程序公共样式表
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
①尺寸单位
②样式导入
3.1 尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准
3.2 样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:
/** common.wxss 文件**/
.small-p {//外部的wxss样式
padding:5px;
}
/** app.wxss 文件**/
@import “common.wxss”;//引入外部的wxss
.middle-p {//自己当前的wxss样式
padding:15px;
}
路径效果图:创建外部的base.wxss
app.wxss调用:
页面的pages的页面调用外部样式路径
四、组件
4.1 视图容器
view容器
swiper滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为
轮播:
图片:
4.2 基础内容
4.3 表单
4.4 导航
<navigator url='../details/details' open-type="navigate">新闻详情页面</navigator>
url:跳转的页面路径 相对路径地址
open-type 的合法值 跳转的方式
navigate:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
redirect:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
reLaunch:关闭所有页面,打开到应用内的某个页面
navigateBack:关闭当前页面,返回上一页面或多级页面
exit:退出小程序,target="miniProgram"时生效 (真机测试)