微信小程序

微信小程序

微信小程序对比一些市面上流行的前端框架多一个自己的json配置文件

  • app.json：小程序全局配置文件，配置小程序的一些全局属性和页面路由
  • 页面.json：小程序页面配置文件，也称局部配置文件，配置当前页面的窗口样式、页面标题等
  • project.config.json：小程序项目配置文件，用于保存项目的一些配置信息和开发者的个人设置
  • sitemap.json：配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎中搜索到的概率

微信小程序配置文件

app.json

pages字段

用来指定小程序由哪些页面组成，用于让小程序知道哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的路由信息

  • 页面路由不需要写后缀名，框架会自动寻找对应的四个文件进行处理
  • 小程序中新增，减少页面，都需要修改pages数组，也可以通过这个字段来添加页面
  • 未指定entryPagePath是，数组的第一项为小程序的首页

window字段

用于设置小程序的状态栏、导航条、标题、窗口背景色

tabbar字段

通过tabBar配置项指定tab栏的表现，以及tab切换时显示得到对应页面

tab按数组的顺序排序，list配置最少2个，最多5个

  • text：分类
  • pagePath：路由跳转
  • iconPath：未选中图标
  • selectedIconPath：已选中图标

页面配置

页面配置的属性和全局配置基本相同，但相同的配置项会覆盖掉全局配置

项目配置文件

project.config.json和project.private.config.json

project.config.json是项目共有配置，常用来进行配置的公共配置

project.private.config.json是项目私有配置，常用来配置个人的配置

注：个人配置需要写到.gitignore文件中避免上传到仓库

1
"useCompilerPlugins": ["sass"], // 开启sass支持

sitemap.json

配置小程序及其页面是否允许被微信索引，提高小程序在微信内部被用户搜索到的概率

  • 没有sitemaap.json则默认所有页面都能被索引
  • {“action”:”allow”,”page”:”*”}

这个文件一般不需要配置，默认即可

样式和组件

WXML提供了view、text、image、navigator等表现构建页面结构，只不过在小程序中将标签识别为组件

WXSS对CSS扩充和修改，新增了尺寸单位rpx、提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分选择器

rpx

随着收集发展，收集设备的宽度多元化，为了解决屏幕适配的问题，微信小程序推出了rpx单位

小程序规定，任何宽度的收集屏幕的rpx参数都是750

iphone6作为视觉稿的标准，iphone6设备宽度为375px，在这种情况下，px和rpx的换算标准为1rpx=0.5px

全局样式

app.wxss是全局样式，局部样式可以替换掉全局样式

常用组件

view组件

小程序提供的容器组件，可以直接当成div使用

swiper和swiper-item组件

通过这两个组件来实现轮播图

1
2
3
4
5
6
7
8
<swiper
  autoplay          <!-- 是否自动播放。如果设置为 true，轮播图会自动切换到下一张。 -->
  circular          <!-- 是否采用衔接滑动。如果设置为 true，当滑到最后一张时，会无缝切换回第一张，形成无限循环。 -->
  indicator-dots    <!-- 是否显示面板指示点。这些小点通常显示在轮播图底部，用于指示当前是第几张以及总共有多少张。 -->
  interval="2000"   <!-- 自动播放间隔时间，单位为毫秒 (ms)。这里设置为 2000ms，即每 2 秒切换一次。 -->
  indicator-color="#fff" <!-- 指示点的颜色。这里设置为白色 (#fff)，表示未选中状态的指示点颜色。 -->
  indicator-active-color="#000" <!-- 当前选中指示点的颜色。这里设置为黑色 (#000)，表示当前显示页面的指示点颜色。 -->
>

image组件

  • src属性：图片资源地址
  • mode属性：图片裁剪、缩放的模式
    • top、left这种方位会裁切图片
    • aspectFill以短边裁切
    • aspectFit以长边裁切
  • show-menu-by-long-press属性：长安图片显示菜单
  • lazy-load属性：图片懒加载

注：在微信小程序中，image组件具有默认的宽和高，宽320px，高240px

text组件

  • user-select：文本是否可选，用于长按选择文本
  • space：显示连续空格

除了文本组件之外的其他组件都无法长按选中文本，且text组件内仅支持text嵌套

navigator组件

在小程序中如果想要完成跳转连接，需要使用navigator插件

  • url：当前小程序的跳转连接
  • open-type：跳转方式
    • navigate：保留当前页面，跳转到应用内的某个页面，但不能跳转到tabbar页面
    • redirect：关闭当前页面，跳转到应用内的某个页面，但不能跳转到tabbar页面
    • switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面
    • reLaunch：关闭所有页面，打开到应用内的某个页面
    • navigateBack：关闭当前页面，返回上一页面或多级页面

路径后可以带有参数，在onLoad(options)生命周期函数中获取传递的参数，但open-type=”switchTab”时不支持传参

scroll-view组件

可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果

  • scroll-x：横向滚动
  • scroll-y：纵向滚动

字体图标

在小程序中，我们推荐项目中不使用本地svg图标，而是从阿里的图标库中获取，导入样式文件之后在线引用

微信小程序的背景图不可以使用本地文件，可以使用网络格式或base64格式

JAVAWEB > 微信小程序
微信小程序
http://blog.170827.xyz/2025/07/01/微信小程序/
作者
XIAOBAI
发布于
2025年7月1日
许可协议