小程序相关配置——全局配置和页面配置 & 小程序开发框架概览——wxml(模板)、内置组件的用法和wxss(样式)-单位rpx
小程序相关配置
- 全局配置(app.json)
- window 配置顶部导航栏相关信息
- pages 用于配置小程序所有页面的路径
- 第一个路径表示默认打开页面的路径
- tabBar
- list 配置页面底部菜单数据(2-5个菜单)
- pagePath 页面的路径
- text 菜单的名称
- iconPath 默认图标的路径
- selectedIconPath 选中图标的路径
- color 默认图标文字颜色
- selectedColor 选中图标文字颜色
- list 配置页面底部菜单数据(2-5个菜单)
在app.json中的"tabBar":{}
设置项中
"tabBar": {
//文字默认颜色
"color": "#000",
//文字选中颜色
"selectedColor": "#d81e06",
//底部菜单配置
"list": [
{
//图片路径
"iconPath": "imgs/logo-black.png",
//选中时图标路径
"selectedIconPath": "imgs/logo-red.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"iconPath": "imgs/logo-black.png",
"selectedIconPath": "imgs/logo-red.png",
"pagePath": "pages/logs/logs",
"text": "日志"
},
{
"iconPath": "imgs/logo-black.png",
"selectedIconPath": "imgs/logo-red.png",
"pagePath": "pages/demo/index",
"text": "测试"
}
]
}
- 页面配置
- 配置信息仅仅影响当前页面
在app.json中的“window”:{}
设置项里面:
{
//小程序下拉效果--三个点,浅色-light;深色(默认)-dark
"backgroundTextStyle":"light",
"usingComponents": {},
//小程序头部背景颜色
"navigationBarBackgroundColor": "#DD4F42",
//小程序头部题目
"navigationBarTitleText": "测试页面",
//下拉刷新效果,默认false
"enablePullDownRefresh": true
}
注:
全局配置在utils下面的app.json文件的window里面,
页面配置在demo根页面下的index.json里面
小程序开发框架概览
网页编程采用的是HTML+CSS+JS这样的组合,其中HTML是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS通常是用来处理这个页面和用户的交互。
在小程序中也有类似的处理方式,只是语法不同而已,相应的小程序中提供了WXML+WXSS+JS(WXS)的方式。
- wxml(模板)
- wxss(样式)
- js(交互逻辑)
- wxs(微信脚本语言)
WXML
微信小程序模板语法是特有的规则,提供了一些内置组件,也支持自定义组件
- WXML与HTML不同的地方
- 标签名字不一样
- 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
- 事件处理方式不同
内置组件的用法
- 基础组件
- text
- text标签不可以嵌套别的组件,但是可以嵌套自己
- 如果需要长按选中文本的话,必须使用text标签包裹
- icon
- 图标组件
- progress
- 进度条组件
- text
- 容器组件
- view 类似于HTML中的div,可以进行嵌套
- 导航组件
- navigator
- 如果要跳转到tab链接,需要指定属性open-type=“switchTab”
- 如果要跳转到普通链接,不需要指定open-type,默认值为navigate
- open-type的值redirect表示重定向,打开的页面没有回退按钮,可以在页面中手动添加一个按钮回退
- 在微信中实现链接跳转不可以使用传统的a标签
- navigator
- 媒体组件
- image
- mode裁切方式
- swiper
- 轮播图组件
- image
<!-- 轮播图组件 -->
<swiper indicator-dots='true' autoplay='true' interval='2000'>
<swiper-item>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
</swiper-item>
<swiper-item>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
</swiper-item>
<swiper-item>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
</swiper-item>
</swiper>
WXSS
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。
-
WXSS与CSS的不同之处
-
分为全局样式和局部样式
全局样式:在utils下的app.wxss
局部样式:在对应文件下的demo.wxss
-
内联样式 style class
-
新增了尺寸单位rpx(px,em、rem、vh、vw)
- 整个屏幕宽度是750rpx
-
WXSS仅支持部分CSS选择器
-
-
rpx 相对单位
- 整个屏幕的宽度是750rpx(本质上和Rem原理类似),根据屏幕宽度进行自适应
实例源码
<!-- 模板注释 -->
<!-- 纯文本显示 -->
<!-- decode用于解析特殊的编码 -->
<!-- selectable控制文本的长按选中 -->
<!-- <text decode selectable>测试页面 测试内容</text> -->
<!-- 图标组件 -->
<!-- <icon type='success' color='red' size='30'/> -->
<!-- 进度条 -->
<!-- <progress percent='80' show-info/> -->
<!-- 容器组件view -->
<!-- <view class="columns">
<view class="item">Hello</view>
<view class="item">Nihao</view>
<view class="item">coniqiwa</view>
</view>
<view>Tom</view>
<view>Jerry</view> -->
<!-- 导航组件navigator -->
<!-- 默认只能跳转到非tab页面,open-type默认值是navigate -->
<!-- <navigator open-type="navigate" url='/pages/test/index'>跳转</navigator> -->
<!-- 如果需要跳转到tab页面需要指定一个属性open-type=“switchTab” -->
<!-- <navigator open-type="switchTab" url='/pages/logs/logs'>跳转</navigator> -->
<!-- 重定向跳转页面没有返回按钮 -->
<!-- <navigator open-type="redirect" url="/pages/test/index">跳转</navigator> -->
<!-- 图片组件 -->
<!-- <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/> -->
<!-- mode属性决定了图片的裁剪方式 -->
<!-- <image class="myimg" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
<image class="myimg" mode='top left' src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/> -->
<!-- 轮播图组件 -->
<!-- <swiper indicator-dots='true' autoplay='true' interval='2000'>
<swiper-item>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
</swiper-item>
<swiper-item>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
</swiper-item>
<swiper-item>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
</swiper-item>
</swiper> -->
<!-- 样式操作 -->
<!-- <view class="active" style="color: orange;">测试样式</view> -->
<!-- rpx用法 -->
<image style="width: 375rpx" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>
注:页面样式层级高于
全局样式
页面样式
/* pages/demo/index.wxss */
.columns {
display: flex;
}
.columns .item {
flex: 1;
height: 100px;
background: #eee;
border: 1px solid blue;
text-align: center;
}
.myimg {
width: 150px;
height: 150px;
background-color: #eee;
}
.active {
color: blue;
}
全局样式
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.active {
color: red;
}