小程序建立页面 及 模板文件

新建页面

新建页面page
(1)手动创建
①右键单击 [pages] 文件夹,在弹出的菜单中选择“新建目录”
②右键单击新建的目录,在弹出的菜单中选择“新建Page”

(2)自动创建
直接在app.json文件的pages选项中将新页面的路径写好,系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件

删除页面page
手动删除
鼠标右键单击需要删除的页面文件夹,在弹出的菜单中选择“删除”

配置文件

配置文件
后缀:.json,文件格式遵循JSON语法规范
作用:对微信小程序进行全局配置,设置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 切换页等
分类:小程序全局配置文件app.json和页面配置文件page.json

接下来分别介绍下小程序配置文件app.json与页面配置文件page.json

小程序配置文件app.json

小程序配置文件
在这里插入图片描述

小程序/全局配置文件
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置
文件内容本质就是一个 JSON 对象。
在这里插入图片描述

小程序/全局配置文件------>pages属性
作用:用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
注意:数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都会对 pages 数组自动进行修改。

小程序/全局配置文件------>pages属性
例如开发目录为:
在这里插入图片描述
小程序/全局配置文件------>window属性
作用:用于设置小程序的状态栏、导航条、标题、窗口背景色
在这里插入图片描述

小程序/全局配置文件------>window属性~下拉刷新

(1)新建一个空白页,例如home页,建好后会发现home.js文件中已经写好各个阶段钩子函数。
观察后发现onPullDownRefresh下拉函数,这里添加验证代码,输出验证。
在这里插入图片描述

(2)下拉无效
然而下拉后发现触发不了js回调,因为下拉功能需要配置,才可以支持下拉功能,即enablePullDownRefresh设置为true
在这里插入图片描述
注意:
①如果是在小程序配置文件app.json中设置该字段,则小程序下的所有页面都可以下拉
②如果在页面配置文件page.json设置该字段,则只能在当前设置过字段的页面执行下拉操作
③开发建议:只在需要执行下拉操作的页面设置该字段即可,例如本例中的home页面。

(3)下拉 loading 的样式
通过前面已经知道,可以在app.json中进行全局配置,使所有页面都带有下拉刷新功能;也可以在需要下拉刷新功能的page对应的json中配置。
还有一点点不完美的地方,别人的小程序,下拉刷新时,可以看到顶部有三个点闪烁的动画,而此时小程序顶部一片空白。
在这里插入图片描述
观察app.json后发现window属性中已经将backgroundTextStyle即下拉loading样式设置为light。

小程序/全局配置文件------>window属性~下拉刷新
(4)窗口背景色
因为背景是白色的,由于颜色的缘故,三个点闪烁的动画看不到,因此背景需要进行以下配置:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值