要在微信小程序上开发一个功能模块,通常需要先创建一个新的页面,方法很简单,示例如下:
例如,需要新建一个名称为one的页面,只需要在项目的根目录下的app.json文件下的pages数组中新建一行:"pages/one/one"。
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/canvas/canvas",
"pages/one/one"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
重新运行程序代码后,即可在pages目录下发现一个名为one的文件夹,里面会自动生成一个小程序页面所需要的四个文件。
文件类型 | 必填 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
把小程序页面比作一个人的话,那么组成它的各个文件的作用可比喻如下:
one.js管的是这个页面的“大脑”,它是用JavaScript编写的,负责将数据进行处理后发送给视图层,同时接受视图层的事件反馈。例如:获取数据、更新数据、页面的跳转等;
one.wxml管的是这个页面的“”长相“”,即用户看到的是什么样子的页面是由它决定的。例如:定义页面的整体布局以及页面内容的显示效果文本框、按钮、视图、照片等;
one.wxss管的是这个页面的“化妆品”,它决定了小程序页面平时如何见人?例如:页面的长宽高、组件边距、颜色边框、鼠标经过的效果等;
one.json管的是这个页面“性格”,它负责对本页面的窗口表现进行配置,例如:页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
一个拥有网页开发基础的学者只要明白了如何定义一个小程序的页面,再对其页面组成的使用加以熟悉,很快就可以上手小程序的开发。
还在等什么?赶紧试试吧!
后续我会陆续分享一些小程序的学习心得给大家,欢迎多多关注~~~