微信小程序 - 新建页面以及 .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过大打包难题
3713 1
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
1893 12
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
397 4
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
639 2
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
1107 0
微信H5支付--微信JS-SDK支付--点金计划
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
592 3
|
XML JSON JavaScript
js的json格式
js的json格式
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。

热门文章

最新文章