小程序相关配置——全局配置和页面配置 & 小程序开发框架概览——wxml（模板）、内置组件的用法和wxss（样式）-单位rpx

小程序相关配置——全局配置和页面配置 & 小程序开发框架概览——wxml（模板）、内置组件的用法和wxss（样式）-单位rpx

小程序相关配置

• 全局配置（app.json）
  • window 配置顶部导航栏相关信息
  • pages 用于配置小程序所有页面的路径
    • 第一个路径表示默认打开页面的路径
  • tabBar
    • list 配置页面底部菜单数据（2-5个菜单）
      • pagePath 页面的路径
      • text 菜单的名称
      • iconPath 默认图标的路径
      • selectedIconPath 选中图标的路径
    • color 默认图标文字颜色
    • selectedColor 选中图标文字颜色

在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
    • 进度条组件
• 容器组件
  • view 类似于HTML中的div，可以进行嵌套
• 导航组件
  • navigator
    • 如果要跳转到tab链接，需要指定属性open-type=“switchTab”
    • 如果要跳转到普通链接，不需要指定open-type,默认值为navigate
    • open-type的值redirect表示重定向，打开的页面没有回退按钮，可以在页面中手动添加一个按钮回退
    • 在微信中实现链接跳转不可以使用传统的a标签
• 媒体组件
  • image
    • mode裁切方式
  • swiper
    • 轮播图组件

<!-- 轮播图组件 -->
<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>测试页面 &nbsp; 测试内容</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;
}