天天减肥网,内容丰富有趣,生活中的好帮手!
天天减肥网 > 微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用

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

时间:2019-11-14 08:32:16

相关推荐

微信小程序 - 新建页面以及 .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.jsonExpecting 'STRING','NUMBER','NULL','TRUE','FALSE','{','[', got EOF1 | at files://pages/dzm/dzm.json#0

这样修改既可:

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

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

Page is not constructed because it is not found.

这样修改即可:

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;}

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

如果觉得《微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。