微信小程序:如何创建一个小程序页面?

要在微信小程序上开发一个功能模块,通常需要先创建一个新的页面,方法很简单,示例如下:

例如,需要新建一个名称为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 等。


一个拥有网页开发基础的学者只要明白了如何定义一个小程序的页面,再对其页面组成的使用加以熟悉,很快就可以上手小程序的开发。

还在等什么?赶紧试试吧!

后续我会陆续分享一些小程序的学习心得给大家,欢迎多多关注~~~


  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值