前端【小程序】02-小程序基础篇【项目文件介绍】【WXML、WXSS】【宿主环境】【组件介绍】【项目配置【全局、页面】】【长度单位】

一、小程序

① 项目结构介绍

　　

② 页面组成部分 

　　

 

WXML与HTML

　　WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作 用类似于网页开发中的 HTML。

WXML 和 HTML 的区别

　　① 标签名称不同

　　　　HTML （div, span, img, a）

　　　　WXML（view, text, image, navigator）

　　② 属性节点不同

<a href="#"> 超链接</a>
<navigator url="/pages/home/home"></navigator> 

　　③ 提供了类似于 Vue 中的模板语法

　　　　数据绑定

　　　　列表渲染

　　　　条件渲染

WXSS与CSS

　　WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

WXSS 和 CSS 的区别

　　① 新增了 rpx 尺寸单位

　　　　CSS 中需要手动进行像素单位换算，例如 rem

　　　　WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

　　② 提供了全局的样式和局部样式

　　　　项目根目录中的 app.wxss 会作用于所有小程序页面

　　　　局部页面的 .wxss 样式仅对当前页面生效

　　③ WXSS 仅支持部分 CSS 选择器

　　　　.class 和 #id

　　　　element

　　　　并集选择器、后代选择器

　　　　::after 和 ::before 等伪类选择器

JS

　　一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：响应用户的 点击、获取用户的位置等等。

小程序中 .js 文件的分类 小程序中的 JS 文件分为三大类，分别是：

　　① app.js

　　　　是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

　　② 页面的 .js 文件

　　　　是页面的入口文件，通过调用 Page() 函数来创建并运行页面

　　③ 普通的 .js 文件

　　　　是普通的功能模块文件，用来封装公共的函数或属性供页面使用

 

Json配置文件的作用

　　

app.json文件介绍

　　

project.config.json文件介绍

　　 

sitemap.json文件介绍

　　

页面中的.json配置文件

　　

 

修改项目首页示例

　　

　　

 

③ 宿主环境

什么是宿主环境

　　宿主环境（host environment）指的是程序运行所必须的依赖环境。例如： Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以， Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

　　

小程序的宿主环境

　　

小程序宿主环境包含的内容

　　通信模型

　　运行机制

　　组件

　　API

 

通信的主体

　　

小程序的通信模型

　　

小程序启动过程

　　

页面渲染的过程

　　

 

④ 宿主环境-组件

小程序中组件的分类

　　

 

1、视图组件

　　

 

view组件基本使用

　　　　 

　　list.wxml文件

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

　　list.wxss文件

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1 {
  display: flex;
  /* 水平分散对齐 */
  justify-content: space-around;
}

 

scroll-view组件

　　

 list.wxml

/* pages/list/list.wxml */
<!-- scroll-x 表示开启横向滚动 -->
<!-- scroll-y 表示开启纵向滚动 -->
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

list.wxss

/* pages/list/list.wxss */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

 

swiper和swiper-item 组件的基本使用

　　

/* pages/list/list.wxss */
<swiper class="swiper-container">
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

/* pages/list/list.wxss */
.swiper-container {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}

swiper-item:nth-child(2) .item {
  background-color: lightblue;
}

swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

swiper常用属性

　　

/* pages/list/list.wxml */
<swiper class="swiper-container" 
  indicator-dots                 // 显示小圆点
  indicator-color="white"        // 未激活的小圆点颜色
  indicator-active-color="pink"  // 激活的小圆点颜色
  autoplay                       // 开启自动切换
  interval="3000"                // 自动切换时间间隔
  circular                       // 开启衔接滑动，三张图滑完回到第一张
  >
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

2、内容组件

　　

text 增加属性selectable 就可以达到长按选中

<view>
  手机号支持长按选中:
  <text selectable>13311266500</text>
</view>

rich-test组件的nodes属性节点，将HTML字符串渲染为对应的UI结构

　　

 

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

3、其他组件

　　

 

button

 

image

　　

　　

　　

4、小程序API

　　

⑤ 协同工作

　　

　　

　　

 

　　

⑥ 页面布局

　　小程序组件（标签）
　　　　view 定义块级区块，text 定义行内区块
　　样式选择器
　　　　类选择器、标签选择器、后代选择器
　　组成页面的4种文件类型
　　　　.wxml 页面结构和内容、.wxss 页面样式、.js 逻辑处理、.json 配置文件 (加载一个页面的时候，会自动加载这四个文件)

导航栏的示例：

index.wxml

<!- view块级区块(类似于html中的div)，text行内区块(类似与html中的span) ->
<view class="navs">
  <text class="active">精选</text>
  <text>手机</text>
  <text>食品</text>
  <text>内衣</text>
  <text>生鲜</text>
  <text>母婴</text>
</view>

index.wxss

.navs {
  display: flex;
  justify-content: space-evenly;
  align-item: center;
  height: 40px;
  font-size: 14px;
}

.active {
  color: #00b26a;
  border-bottom: 2px solid #00b26a;
}

⑦ 小程序的基本逻辑处理

　　注册页面：Page 函数
　　数据处理：
　　　　data 选项，初始化页面数据
　　　　this.setData 方法，更新页面数据
　　事件处理：bind:事件名称=事件回调

 

　　

index.wxml

<!-- 页面数据绑定 -->
<view> {{ msg }}</view>
<!-- bind:tap 绑定事件, tap就是点击事件, 注意小程序没有click -->
<button type="primary" bind:tap="changeMsg" size="mini">点我修改view中的内容</button>

index.js

// Page()函数，需要传入一个对象
Page({
  // data定义页面初始数据，data是一个对象并非函数
  data: {
    msg: 'Hello World'
  },
  // 与data同级定义事件处理函数
  changeMsg () {
    // 调用this.setData()函数，也需要传入一个对象
    this.setData({
      // 1、更新data的数据
      // 2、更新视图
      msg: '我是更新后的msg数据'
    })
  }
})

 

⑧ 小程序配置说明

　　关于配置的官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

页面配置文件的作用

　　小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置

页面配置和全局配置的关系

　　小程序中，app.json中的window节点，可以全局配置小程序中的每个页面的窗口表现

　　如果某些小程序页面想要拥有特殊的窗口表现，此时，"页面级别的.json配置文件"就可以实现这种需求

　　注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

当前页面配置

　　pages/index目录下的index.json，指的是当前页面的配置项

{ // 小程序特有的配置项
  "nacigationStyle": "default", // 默认为default, 值为custom, 则可以自定义导航栏样式
  "enablePullDownRefresh": true, // 是否允许下拉刷新, 默认为false
  "backgroundTextStyle": "dark", // 下拉刷新时, 拉出来的背景的文本颜色
  "backgroundColor": "#ffca28", // 下拉刷新时, 拉出来的背景的颜色
  "disableScroll": true, // 是否允许页面滚动, 默认为false, 全局配置中是不生效的, 只能配置到单页面
  "navigationBarTitleText": "首页", // 导航栏文字
  "navigationBarBackgroundColor": "#00b26a", // 导航栏背景色
  "navigationBarTextStyle": "white" // 导航文字颜色, 只支持(白色)white、(黑色)black
}

全局页面配置

　　

　　小程序窗口的组成部分

　　

　　项目根目录下的app.json，是全局的配置项，如果当前页面修改了属性则以页面为准，页面配置没有的以app.json中的为准

{
  "pages": [ // 页面路由，加载从上往下，第一个为首页路由，默认加载第一个，在此处添加路由，默认会在项目的pages目录下新增页面配置项，包含xx.wxml、xx.wxss、xx.js、xx.json
    "pages/index/index", // 第一个就是首页，默认加载的第一个页面
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black", // 导航文字颜色, 只支持  (白色)white  (黑色)black 
    "navigationBarTitleText": "Weixin", // 导航栏文字
    "navigationBarBackgroundColor": "#ffffff" // 导航栏颜色
  },
  "style": "v2", // 小程序组件库的版本
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json", // 搜索引擎的配置，配置中默认页面全部允许被微信搜索引擎抓取的
  "lazyCodeLoading": "requiredComponents"
}

使用entryPagePath指定启动页路径

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "entryPagePath": "pages/index/index", // 指定启动页面的路径
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

window节点常用的配置项

　　配置下拉刷新
　　　　• enablePullDownRefresh 是否启用下拉刷新
　　　　• backgroundTextStyle 下拉loading状态的样式
　　配置导航栏
　　　　• navigationBarTitleText 导航栏标题
　　　　• navigationBarTextStyle 导航栏标题文字颜色
　　　　• navigationBarBackgroundColor 导航标背景颜色
　　　　• navigationStyle 自定义导航栏

　　以navigation开头配置导航栏

　　以background开头配置背景

　　其他则控制页面效果

　　

　　在全局的app.json文件中的window属性中设置这些属性 

  "window": {
    // 设置title
    "navigationBarTitleText": "我的微信小程序",
    // 设置导航栏标题背景色,不支持文本类型颜色,只支持16进制颜色
    "navigationBarBackgroundColor": "#2b4b6b",
    // 设置导航栏标题颜色，只能是white或者black
    "navigationBarTextStyle": "white",
    // 开启全局的下拉刷新
    "enablePullDownRefresh": true,
    // 上拉触底的距离，页面上滑事件触发时距离底部距离，默认为50px
    // 页面存在滚动条的时候，当滑动到底部小于100的时候，会触发加载数据，就是这个字段控制的
    "onReachBottomDistance": 100,
    // 设置下拉刷新时窗口的背景色
    "backgroundColor": "#efefef",
    // 下拉刷新时的Loading样式,只能时dark或者light
    "backgroundTextStyle": "dark"
  }

 

tabBar（tab栏）

　　

 

tabBar的6个组成部分

　　

 

1、背景色

2、选中时的背景图片路径

3、未选中的背景图片路径

4、选中时的文字颜色

5、未选中时的文字颜色

6、tabBar上边框的颜色

　　全局配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
　　全局配置中的tabBar配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
　　如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
　　tabBar是全局配置，需要在app.json中配置

　　list：配置 tab 栏列表
　　　　• text： 配置 tab 的文字
　　　　• pagePath： 配置 tab的页面路径
　　　　• iconPath & selectedIconPath：配置 tab 对应的图标
　　color & selectedColor：配置 tab 文字的颜色
　　backgroundColor：配置 tab 栏的背景颜色
　　borderStyle：配置 tab 栏边框样式

　　

　　

 app.json文件

{
  "pages": [
    "pages/demo/demo",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "entryPagePath": "pages/demo/demo",
  "window": {
    "enablePullDownRefresh": false,
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#00B26A",
    "navigationBarTitleText": "生活小程序",
    "navigationBarTextStyle": "white",
    "navigationStyle": "default"
  },
  "tabBar": { // tabBar配置
    "color": "#333",
    "selectedColor": "#FF5222",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "/static/tabbar/home-default.png",
        "selectedIconPath": "/static/tabbar/home-active.png"
      },
      {
        "text": "日志",
        "pagePath": "pages/logs/logs",
        "iconPath": "/static/tabbar/logs-default.png",
        "selectedIconPath": "/static/tabbar/logs-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意事项，当定义了tabBar之后，在navigator中跳转到tabBar的时候，需要按照如下写

<!-- 当跳转的页面为tabBar时, navigator需要添加属性open-type="switchTab", 否则无法跳转 -->
<navigator open-type="switchTab" url="/pages/index/index"></navigator>

⑨ 页面跳转

　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

navigator 跳转页面（相当于 html 中的 a 标签）

　　index.wxml

<!-- navigator组件也是块级元素 -->
<!-- 页面跳转-url-相对路径, 以路由的方式写路径, 不要带后缀名, 加载对应页面的四个文件 -->
<navigator url="../logs/logs"></navigator>

<!-- 页面跳转-url-绝对路径, /开头直接定位到当前项目根 -->
<navigator url="/pages/logs/logs"></navigator>

小程序长度单位

wxss和css的关系

　　

什么是rpx尺寸单位

　　rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位

　　rpx的实现原理非常简单，鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕在宽度上为750份 (即当前的总宽度为750rpx)

　　- 在较小的设备上，1rpx所代表的宽度较小

　　- 在较大的设备上，1px所代表的宽度较大

　　小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

rpx与px之间的单位换算

　　

rpx

　　特点：
　　　　• 小程序的屏幕宽度均为 750rpx
　　　　• 根据屏幕宽度自动换算成 px 长度
　　应用实践：
　　　　• 建议设计稿宽度以 750px 做为基准
　　　　• 设计稿中元素的尺寸即为小程序代码中 rpx 的尺寸

　　在小程序中新增了特殊的长度单位 rpx，它的特点是能够自动的适配置不同尺寸的手机屏幕。
　　在实际使用中只需要将设计稿调整为 750px 宽，然后 1:1 的比例来写长度（单位使用 rpx）。
　　如：750px 宽的设计稿中某个区域（盒子）的大小为 180*90px ，写成小程序的尺寸为 180*90rpx，即可自动的适配置不同尺寸的手机屏幕。

　　当宽设置为750rpx的时候，会占满整个x轴

什么是样式导入

　　使用wxss提供的@import语法，可以导入外联的样式表，导入后的样式即可在当前页面进行使用