微信小程序笔记（一）

小徐今天学习了吗
228 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章vite介绍（一）中，我们学习了vite的相关知识点。在本篇文章中，我们将学习到微信小程序的相关知识点，包括wxml、wxss、全局配置——设置页面路径、全局配置——设置顶部导航栏、全局配置——设置底部标签栏、全局配置——下拉刷新和上拉加载、页面配置——针对某个页面的个性化配置等相关知识点。

wxml

WXML 是小程序的标签语言 ，作用和 HTML 一样。

常用的标签（也称组件）如下：

  • 容器类组件 <view> => 相当于HTML的 div
  • 内容类组件 <text> => 相当于HTML的 span
  • 媒体类组件 <image> => 相当于HTML的 img
  • 导航类组件<navigator> => 相当于HTML的 a
  • 表单类组件 <input> 、<button>
  • 轮播图组件 <swiper>

wxss

WXSS 是小程序的样式语言 ，它的功能和语法都和 CSS 非常类似。

主要区别是：

  1. WXSS 比 CSS 支持的选择器较少。
  2. WXSS 比 CSS 多了一个长度单位 rpx。

全局配置——设置页面路径

在 app.json 中可以配置小程序中可以被访问的页面的路径。操作步骤：

  1. 在 app.json 中使用 pages 配置项，添加一个页面的路径
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/test1/test1"
  ]
}
  1. pages 数组中的第一个路径，作为小程序的启动页。
{
  "pages": [
	  "pages/test1/test1",
    "pages/index/index",
    "pages/logs/logs"
  ]
}

全局配置——设置顶部导航栏

通过配置，改变小程序顶部导航栏的外观。具体方法是在 app.json 中的 window 配置项下设置顶部导航栏的：背景色、标题文字、标题颜色(black,white)。

{
  "window": {
     "navigationBarBackgroundColor": "#262626",
     "navigationBarTitleText": "游乐园",
     "navigationBarTextStyle": "white"
  }
}

全局配置——设置底部标签栏

创建小程序底部的标签式导航栏步骤：

  1. 创建三个新页面：首页、卡券、我的
{
	"pages": [
		"pages/index/index",
		"pages/cards/cards",
		"pages/center/center"
	]
}
  1. 配置 app.json 的 tabBar 实现包含3个按钮的标签式导航栏
  "tabBar": {
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "assets/icons/home-default.png",
        "selectedIconPath": "assets/icons/home-active.png"
      },
      {
        "text": "卡券",
        "pagePath": "pages/cards/cards",
        "iconPath": "assets/icons/ticket-default.png",
        "selectedIconPath": "assets/icons/ticket-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/center/center",
        "iconPath": "assets/icons/face-default.png",
        "selectedIconPath": "assets/icons/face-active.png"
      }
    ]
  }
  1. 通过 app.json 中的 tabBar 下的其他配置改变标签式导航栏的按钮文字颜色、背景色等外观
  "tabBar": {
    "color": "#D78B09",
    "selectedColor": "#FFF",
    "backgroundColor": "#FECA49",
    "borderStyle": "white",
    
    "list": [
      ...
    ] 
  }

全局配置——下拉刷新和上拉加载

在小程序中，我们通常需要实现下拉刷新和上拉加载功能。

实现下拉刷新步骤：

  1. 在 app.json 的 window 下配置 "enablePullDownRefresh": true
  2. 在页面 JS 代码中，添加监听函数 onPullDownRefresh()
onPullDownRefresh: function () {
  console.log('我被下拉了...,我要获取数据重新渲染页面了');
},

实现上拉加载步骤：

  1. 在 app.json 的 window 下配置 "onReachBottomDistance": 200 设置触底的距离
  2. 在页面 JS 代码中，添加监听函数 onReachBottom()
onReachBottom: function () {
  console.log('我离底部只有200距离啦,我要加载新内容啦');
},

页面配置——针对某个页面的个性化配置

上面我们讲到了针对全局的配置，那么如果我只想对某个页面单独进行个性化配置，该如何做呢？例如，将之前示例中 “我的” 标签页的顶部导航栏，个性化配置成如下图所示的样子。

image.png 在 “我的” 页面的 json 配置文件中进行设置。

{
  "navigationBarBackgroundColor": "#FECA49",
  "navigationBarTitleText": "我的",
  "navigationBarTextStyle": "white",
}
avatar
文章
阅读
粉丝