微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用

简介: 微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用

在小程序中,一个完整的页面是由 .js .json .wxml .wxss 四个文件组成:

  • .js 里面编写一些生命周期钩子,事件处理,全局数据…
  • .json 里面编写一些页面配置,页面的 .json 配置会覆盖 app.json 的配置…
  • .wxml 里面编写一些页面内容,UI标签,数据绑定…
  • .wxss 里面编写一些 .wxml 里面的 css 样式,它跟普通 css 文件又有点区别,.wxml 文件可以导入其他的 .wxml 文件进来使用…

新建页面方式一(相当于自动做了一遍方式二里面的所有操作):

直接新建一个文件夹,在当前文件夹上面右键 新建Page 编辑器会自动给你创建这4个文件,并且在 app.json 里面配置好路由,也就是相当于你只需要在页面上写内容就行了


新建页面方式二(也就是相当于手动做一遍方式一里面的操作):

  • 我们按着 index 文件里面新建一个新页面测试文件夹,创建4个空文件,这里就是一个完整的页面文件了:

  • 创建好了之后,我们需要在 app.json 里面添加上页面路由:

我这里将测试的新页面放到列表第一位,那么启动小程序默认就会打开第一个页面,所以以后需要注意什么页面需要放在第一个位置作为启动页面

"pages":[
  "pages/dzm/dzm", // 测试页面
  "pages/index/index",
  "pages/logs/logs"
],
....
  • 配置好 app.json 里面的路由之后,会报错:

这个错误是新页面的 .json 文件里面不能为空,如果你没有需要配置的,那么里面也得有个空 json 对象在里面

VM566:1 pages/dzm/dzm.json
Expecting 'STRING','NUMBER','NULL','TRUE','FALSE','{','[', got EOF
  1 | 
at files://pages/dzm/dzm.json#0

这样修改既可:

  • 修改好之后会发现,还会报错:

这个错误就是新页面的 .js 文件里面也不能为空,需要初始化一下 Page() 对象,Page() 对象就是一个新页面的构造函数,类似于 app.js 里面的 App() 构造函数一样,只是一个代表整个小程序,一个是代表小程序里面的一个页面。

Page is not constructed because it is not found.
• 1

这样修改即可:

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})
  • 这样调整之后,你会发现没有报错了,就是页面上一片空白,那么需要在 .wxml 文件里面加点显示内容:

  • 当然也可以在 .wxss 文件里面给这个 <view> 标签加点样式,写法跟 css 一样:

.wxml

<view class="dzm-view">1111</view>

.wxss

.dzm-view {
  color: red;
}


这样一个新的页面就可以展示使用了!!其他细节配置可以根据需求进行配置,或者查看官方文档!!!



相关文章
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2796 1
|
11月前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
1661 12
|
10月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
1925 5
|
小程序 开发者
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示,包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码,允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。