微信小程序page组成部分分析与创建page方法演示

上文 简单讲解并梳理微信小程序默认几个文件和文件夹结构及其作用 我们简述了整个小程序创建之初 几个模块与文件的作用

其中 我们说过 pages 就是放我们所有page界面的

它所有page模块 都是分为四个文件

其中

js 其中包括 页面逻辑 响应式数据 函数

json 文件,界面的逻辑 展示 窗口等配置信息

wxml 页面文件 写页面标签和整个树形dom结构体

wxss 样式文件 写界面元素和全局的css样式

我们小程序运行时 这四个文件 最终会被编译成一个 page界面

所以 我们小程序 每个页面都是这四部分组成的

你想新建一个界面 就可以在想建的文件夹上 去右键 选择新建一个page

取个名字 然后按回车

这样 它就直接把这四个文件创出来了

但这显然不是我们想要的效果

我们应该先右键目录 创建一个文件夹

输入名称按回车

然后 我们再在这个文件夹下重复刚才创建page的操作

这样就OK了

相关推荐
WangHappy2 小时前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
小时前端7 小时前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker1 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker1 天前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
大米饭消灭者4 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
FliPPeDround5 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround5 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
吴声子夜歌5 天前
小程序——布局示例
小程序
码云数智-大飞5 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序
luffy54595 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序