小程序开发系列------四、添加页面

心已赠人 2022-10-29 06:27 139阅读 0赞

上一篇文章[小程序开发系列------三、项目分析][------]中我们学习到小程序项目中，所有页面都在app.json文件的pages节点中罗列出来，那么新添加页面也是在这里进行操作。  
例如我们新建一个test页面，就是在app.json文件的pages节点添加如下代码：

"pages/test/test"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]

上面那行代码添加后，按下Ctrl+S的瞬间，项目的pages目录中就会多出一个test目录，如上图所示，点开目录，依然是以wxml、js、wxss和json结尾的四个文件，上一篇文中我们也说了，为了方便理解，大家就把这四个文件看成一个整体，这就是一个页面。

测试：  
打开test.wxml页面添加一行代码，如下图：

<text>添加页面测试</text>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]  
修改index页面的js事件（写在index.js文件中）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]  
把原来点击头像跳转到logs页面的事件改为点击头像跳转到新建的test页面，如上图所示，然后待编译完毕点击头像，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]  
到此，添加页面已经完成，并且生效，我们也通过点击事件跳转到了这个页面。

下篇文章：[小程序开发系列------五、组件学习（顺手写个简易版的计算器）][------ 1]我们来学习小程序的组件

[------]: https://blog.csdn.net/sun_luming/article/details/113626395
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: /images/20221024/b1b5add1cfaa4a618f87087322e571f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]: /images/20221024/fe325ba0a4c741308985ab0843136eca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]: /images/20221024/cc174073b9b6468c8f302951c1b54b83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]: /images/20221024/7e978aa3eb7a447ea9f3a9571b4d8350.png
[------ 1]: https://blog.csdn.net/sun_luming/article/details/113766340