前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序-比较数字大小

小程序-比较数字大小

作者头像
Vincent-yuan
发布2022-12-21 16:53:38
2.5K0
发布2022-12-21 16:53:38
举报
文章被收录于专栏:Vincent-yuan

这里通过比较数字大小的案例,来学习小程序的一些基础知识。

包括页面组件,页面样式,页面逻辑的编写,

了解配置文件中常见配置的含义,利用事件,数据绑定,条件渲染,表达等方式实现小程序的页面交互。

效果图如下:

 首先创建项目。

1.页面组件

小程序中使用WXML(WeiXin Markup Language)来实现页面的结构。

例如<view>标签用于定义视图容器,与HTML中的<div>标签作用类似。

常见的组件

官方组件文档

input组件的type属性

 <page>标签时最外层的标签,它是一个根节点,用户编写的所有结构代码都在根节点的下面。

2.页面样式

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。

WXSS具有CSS大部分特性,并在CSS基础上做了一些扩充和修改。

2.1 选择器

WXSS的选择器

 2.2 尺寸单位

微信小程序在WXSS中加入了新的尺寸单位rpx(responsive pixel, 响应式像素)。

移动端网页像素单位的换算难点在于它有物理像素和逻辑像素两种单位,

物理像素是指屏幕上实际有多少个像素,而逻辑像素是指CSS中使用的像素单位。

为了换算方便,rpx单位规定了任何手机屏幕的宽度都为750rpx(逻辑像素),由小程序内部负责将逻辑像素转换为当前手机中的物理像素。

2.3 样式导入

在WXSS中可以使用@import语句导入外联样式表,在@import后面写上需要导入的外联样式表的路径即可,用“;”表示语句结束。

示例:在index.wxss文件中导入test.wxss文件,如下

代码语言:javascript
复制
@import "test.wxss";
2.4 全局样式

如果多个页面中有些重复的相同的样式,可以在项目根目录下创建全局样式文件app.wxss,

将公共的样式写在全局样式文件中。

注意:当公共样式文件(app.wxss)和页面样式文件(pages/index/index.wxss)发生样式冲突时,页面样式的优先级高,会覆盖公共样式。

3 配置文件

小程序的每一个页面均可以使用json文件对页面的效果进行配置。

页面的配置分为页面级和应用级,在本项目中,pages/index/index.json时页面级配置文件,

而app.json是应用级配置文件。

3.1 页面级配置文件

在页面级配置文件中可以更改页面的导航栏样式,控制页面是否允许上下滚动。

常用的页面级配置

 若将enablePullDownRefresh设为true,页面可以下拉刷新,当下拉刷新操作执行时,就可以触发下拉刷新事件 onPullDownRefresh,在pages/index/index.js文件中可以找到该事件的处理函数。

onReachBottomDistance主要用于开发自动加载更多的功能,就是当页面中内容非常长的时候,为了加快加载速度,并不是一次性加载所有的数据,

而是先加载一部分数据将页面填满,直到出现滚动条,页面可以向上滚动。

当用户上拉时,如果快要到达底部,就立即加载后面的数据。因此,onReachBottomDistance的指越大,加载的时机越提前。

如果达到给定的值,就会触发上拉触底事件onReachBottom,在pages/index/index.js文件中可以找到该事件的处理函数。

3.2 应用级配置文件

 项目根目录下app.json就是应用级配置文件。

app.json文件

 window的值是一个对象,可以将上面页面级配置写在windows中,作为应用级配置使用功能,从而一次设置多个页面,

且优先级低于页面级配置;

debug开启后可以在控制台中输出调试信息,帮助开发者快速定位到一些常见的问题。

networkTimeout可以设置网络请求过程中的超时时间。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-10-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.页面组件
  • 2.页面样式
    • 2.1 选择器
      •  2.2 尺寸单位
        • 2.3 样式导入
          • 2.4 全局样式
          • 3 配置文件
            • 3.1 页面级配置文件
              • 3.2 应用级配置文件
              相关产品与服务
              云开发 CloudBase
              云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档