小程序-比较数字大小

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

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

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

效果图如下：

 首先创建项目。

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文件，如下

@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可以设置网络请求过程中的超时时间。

 

 

 以wx.开始的是小程序中的API，如wx.request()用于发送网络请求。

4. 页面逻辑

在项目中，pages/index/index.js文件用于编写页面逻辑。

Page()函数用来注册一个页面，该函数的参数是一个对象，通过该对象可以指定页面的初始数据、生命周期函数、事件处理函数等。

Page()函数参数对象的属性

 

 接下来将针对生命周期函数、页面事件处理函数、组件事件处理函数的使用分别讲解。

4.1 生命周期回调函数

这里以 onLoad 页面加载、onReady 页面初次渲染、onShow 页面显示 函数为例。

这3个函数的执行顺序是 onLoad -> onShow -> onReady。

  • onLoad:页面加载时触发，一个页面只会调用一次。通过参数options可以获取打开当前页面路径中的参数。
  • onReady: 页面初次渲染完成的时候调用。一个页面只会调用一次，代表页面已经准备妥当，此时可以与视图层进行交互。
  • onShow: 当页面显示时触发。例如，从后台切入前台时触发。
  • onHide 当页面隐藏时触发。从前台切入后台时触发。
  • onUnload: 页面卸载时触发。例如，使用路由API中的wx.redirectTo()或wx.navigateBack()跳转其他页面时触发。

提示：在小程序的导航栏中，页面标题的右边有两个按钮，即。

 

单击会在底部弹出一个菜单，在菜单中有一项转发，单击转发就会触发onShareAppMessage事件。

 

单击可以在前台，后台之间切换，通过此按钮可以测试 onShow 和 onHide 事件。

 

在 onLoad函数中，有一个参数 options,表示打开当前页面路径中的参数，它可以在当前页面被其他页面打开的情况下接受一些参数。

注意：

页面跳转时，当在index页面的onReady跳转时，目录结构如下

 

index.js中的代码如下，

  onReady() {
    console.log("页面初次渲染完成")
    wx.navigateTo({
      url: '/pages/test/test?name1=value1&name2=value2',
    })
  },

需要在app.json下的pages中注册路径，否则会报找不到路径的错误，如下

4.2 页面事件处理函数

 下面以 onPullDownRefresh、onReachBottom、onPageScroll函数为例。

onPullDownRefresh需要在配置文件中将enablePullDownRefresh设为true才会有效，

onReachBottom需要在配置文件中将onReachBottomDistance设为true才会有效，

由于开发者工具没有自动生成 onPageScroll函数，因此需要手动添加该函数，并且为了使该函数触发，还需要确保页面的内容高度超过了显示区域，使页面中出现滚动条。

4.3 组件事件处理函数

 组件事件处理函数用于为组件绑定事件。例如给button组件绑定tap事件，事件处理函数为compare。

<button bindtap="compare">比较</button>

bindtap表示绑定tap事件。

在触摸屏手机中，tap事件在用户的手指触摸组件时触发，而在微信开发者工具的模拟器中，tap事件在鼠标单击组件时触发。

在index.js中增加compare函数

  compare:function(e){
    console.log("比较按钮被单击了")
    console.log(e)
  },

函数中的参数e表示事件对象，通过它可以获取事件发生时的一些相关信息。

通过事件对象e，可以获取type（事件类型）、timestamp（事件生成时的时间戳）、target（触发事件的组件的一些属性值集合）、currentTarget（当前组件的一些属性值集合）、datail（额外的信息）等信息。

 常用事件

前面使用的tap事件是视图层中的事件之一，通过这类事件可以实现视图层到逻辑层的通信。

在视图层中，组件可以绑定多种事件。

常用的冒泡事件

 冒泡事件是指当一个组件上的事件被触发后，事件会向父节点传递，而非冒泡事件不会向父节点传递。

除了上面列举的事件之外，一些组件还有一些专门的事件，如form组件的submit事件、input组件的input事件等。

事件绑定和冒泡

在为组件绑定事件时，有两种方式，分别是 bind事件类型 和 catch事件类型（以下简称bind和catch）。

bind方式在前面已经用过，如bindtap,它的特点是不会阻止冒泡事件向上冒泡，而catch可以阻止冒泡事件向上冒泡。

5.注册程序

若要在小程序启动、显示、隐藏时执行某些操作，可以通过App()函数来实现。App()函数用于注册小程序，它接收一个对象参数，

通过参数指定小程序的生命周期回调等。App()函数必须在app.js中调用，且只能调用一次。

利用App()函数还可以保存一些在所有页面中共享的数据。

app.js中如下

 

 然后再pages/index/index.js的onReady函数中编写代码，如下

 

 getApp()函数用于获取小程序App实例，获取后即可访问app.js中定义的num属性和test()方法。

6.实现比较功能

 方式一：为两个input组件绑定不同事件处理函数

input组件提供了change事件，会在输入框中的内容发生改变后触发，通过该事件可以获取用户输入的数字。

其中，e.detail.value用于获取用户输入的值，Number() 用于将字符串转换为数字类型。this.num1和this.num2用于保存获取到的数字。

当用户单击比较按钮时，对this.num1和this.num2进行比较即可。

为比较按钮添加tap事件，然后在比较结果的显示位置绑定一个名称为result的变量。

index.wxml如下：

<page>
  <view>
    <text>请输入第一个数字：</text>
    <input type="number" bindchange="num1change" />
  </view> 
  <view>
    <text>请输入第二个数字：</text>
    <input type="number" bindchange="num2change" />
  </view>
  <button bindtap="compare">比较</button>
  <view>
    <text>比较结果：{{result}}</text>
    <!-- 97 应用级配置文件 TODO:app.json -->
  </view>
</page>

在pages/index/index.js文件中，找到页面的初始数据data,在data中添加result属性，属性值为空字符串，表示当前未进行比较；

然后继续在该文件中编写compare函数，并将比较结果通过this.setData()显示在页面上。

index.js如下：

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data:{
    result:''
  },
  num1:0,
  num2:0,
  num1change:function(e){
    this.num1 = Number(e.detail.value)
    console.log('第一个数字为'+this.num1)
  },
  num2change:function(e){
    this.num2 = Number(e.detail.value)
    console.log('第二个数字为'+this.num2)
  },
  compare:function(){
    console.log("比较按钮被单击了")
    var str = '两数相等'
    console.log('num1:'+this.num1)
    console.log('num2:'+this.num2)
    if(this.num1>this.num2){
      str = '第一个数大'
    }else if(this.num1<this.num2){
      str = '第二个数大'
    }
    this.setData({result:str})
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("页面加载")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("页面初次渲染完成")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("页面显示")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

注意：

在WXML中使用双大括号“{{}}”可以实现数据绑定，这种语法又称为Mustache语法。双大括号中可以写一个变量名，如{{result}},

在页面打开后，就会到Page({data:{result:''},...})中读取result的值，显示在页面中。

需要注意的是，当页面打开后，如果想要改变页面中的{{result}}的值，不能通过直接赋值的方式来实现。例如，在compare函数中，

使用this.data.result = str 这种方式无法改变页面中的{{result}}的值，而需要通过 this.setData()方法来实现，

该方法的参数是一个对象，传入{result:str}就表示将页面中{{result}}的值改为变量str的值。

效果如下：

 方式二：为两个input组件绑定相同事件处理函数

对于页面中只有两个input组件的情况，为它们绑定不同事件处理函数的方式非常简单，但不适合页面有有大量input组件的情况。

因此可以为多个input组件绑定相同事件处理函数，然后再为不同input组件设置不同的id或dataset即可。

1.通过id区分元素

index.wxml 代码如下：

 1 <!--pages/index/index.wxml-->
 2 <page>
 3   <view>
 4     <text>请输入第一个数字：</text>
 5     <input id="num1" type="number" bindchange="change" />
 6   </view> 
 7   <view>
 8     <text>请输入第二个数字：</text>
 9     <input id="num2" type="number" bindchange="change" />
10   </view>
11   <button bindtap="compare">比较</button>
12   <view>
13     <text>比较结果：{{result}}</text>
14     <!-- 97 应用级配置文件 TODO:app.json -->
15   </view>
16 </page>

index.js代码如下：

e.currentTarget.id的值为触发当前事件的input组件的id属性值，可能是num1或num2,然后通过 this[] 语法设置this.num1 或this.num2 的值。e.detail.value用于获取用户输入的数字。

  change:function(e){
    this[e.currentTarget.id]=Number(e.detail.value)
  },
 1 // pages/index/index.js
 2 Page({
 3   /**
 4    * 页面的初始数据
 5    */
 6   data:{
 7     result:''
 8   },
 9   num1:0,
10   num2:0,
11 
12   change:function(e){
13     this[e.currentTarget.id]=Number(e.detail.value)
14   },
15   compare:function(){
16     console.log("比较按钮被单击了")
17     var str = '两数相等'
18     console.log('num1:'+this.num1)
19     console.log('num2:'+this.num2)
20     if(this.num1>this.num2){
21       str = '第一个数大'
22     }else if(this.num1<this.num2){
23       str = '第二个数大'
24     }
25     this.setData({result:str})
26   },
27   /**
28    * 生命周期函数--监听页面加载
29    */
30   onLoad(options) {
31     console.log("页面加载")
32   },
33 
34   /**
35    * 生命周期函数--监听页面初次渲染完成
36    */
37   onReady() {
38     console.log("页面初次渲染完成")
39   },
40 
41   /**
42    * 生命周期函数--监听页面显示
43    */
44   onShow() {
45     console.log("页面显示")
46   },
47 
48   /**
49    * 生命周期函数--监听页面隐藏
50    */
51   onHide() {
52 
53   },
54 
55   /**
56    * 生命周期函数--监听页面卸载
57    */
58   onUnload() {
59 
60   },
61 
62   /**
63    * 页面相关事件处理函数--监听用户下拉动作
64    */
65   onPullDownRefresh() {
66 
67   },
68 
69   /**
70    * 页面上拉触底事件的处理函数
71    */
72   onReachBottom() {
73 
74   },
75 
76   /**
77    * 用户点击右上角分享
78    */
79   onShareAppMessage() {
80 
81   }
82 })
View Code

2.通过dataset区分元素

index.wxml代码如下：

删除了原来的id属性，然后增加了data-id属性。

<!--pages/index/index.wxml-->
<page>
  <view>
    <text>请输入第一个数字：</text>
    <input type="number" bindchange="change2" data-id="num1" />
  </view> 
  <view>
    <text>请输入第二个数字：</text>
    <input type="number" bindchange="change2" data-id="num2" />
  </view>
  <button bindtap="compare">比较</button>
  <view>
    <text>比较结果：{{result}}</text>
    <!-- 97 应用级配置文件 TODO:app.json -->
  </view>
</page>

index.js代码如下：

e.target.dataset.id表示触发当前事件的input组件的data-id属性值。

通过e.target.dataset.名称 的方式即可获取 data-名称 的值。

  change2:function(e){
    this[e.target.dataset.id]=Number(e.detail.value)
  },
 1 // pages/index/index.js
 2 Page({
 3   /**
 4    * 页面的初始数据
 5    */
 6   data:{
 7     result:''
 8   },
 9   num1:0,
10   num2:0,
11   change2:function(e){
12     this[e.target.dataset.id]=Number(e.detail.value)
13   },
14   compare:function(){
15     console.log("比较按钮被单击了")
16     var str = '两数相等'
17     console.log('num1:'+this.num1)
18     console.log('num2:'+this.num2)
19     if(this.num1>this.num2){
20       str = '第一个数大'
21     }else if(this.num1<this.num2){
22       str = '第二个数大'
23     }
24     this.setData({result:str})
25   },
26   /**
27    * 生命周期函数--监听页面加载
28    */
29   onLoad(options) {
30     console.log("页面加载")
31   },
32 
33   /**
34    * 生命周期函数--监听页面初次渲染完成
35    */
36   onReady() {
37     console.log("页面初次渲染完成")
38   },
39 
40   /**
41    * 生命周期函数--监听页面显示
42    */
43   onShow() {
44     console.log("页面显示")
45   },
46 
47   /**
48    * 生命周期函数--监听页面隐藏
49    */
50   onHide() {
51 
52   },
53 
54   /**
55    * 生命周期函数--监听页面卸载
56    */
57   onUnload() {
58 
59   },
60 
61   /**
62    * 页面相关事件处理函数--监听用户下拉动作
63    */
64   onPullDownRefresh() {
65 
66   },
67 
68   /**
69    * 页面上拉触底事件的处理函数
70    */
71   onReachBottom() {
72 
73   },
74 
75   /**
76    * 用户点击右上角分享
77    */
78   onShareAppMessage() {
79 
80   }
81 })
View Code

 方式三：在页面中直接比较

 前面两种方式都是在按下比较按钮后，在事件处理函数中进行比较，实际上，使用WXML中的 “{{}}”语法可以直接比较两个变量的大小。

 index.wxml代码如下：

<!--pages/index/index.wxml-->
<page>
  <view>
    <text>请输入第一个数字：</text>
    <input type="number" bindchange="change3" data-id="num1" />
  </view> 
  <view>
    <text>请输入第二个数字：</text>
    <input type="number" bindchange="change3" data-id="num2" />
  </view>
  <button bindtap="compare">比较</button>
  <view>
    <!-- <text>比较结果：{{result}}</text> -->
    <text>比较结果：{{num1 > num2?'第一个数大':(num1 < num2?'第二个数大':'两数相等')}}</text>
    <!-- 97 应用级配置文件 TODO:app.json -->
  </view>
</page>

上面在{{}}中使用了三元运算符比较num1和num2的大小，显示比较结果。

index.js中代码如下：

this.setData用于设置页面中的num1和num2的值。

运行程序测试，在页面打开时，num1和num2的值都是0，因此比较结果为 两数相等。

输入数字后，单击其他位置触发change事件，就会显示比较结果。

由此可见，当执行this.setData() 时，页面中绑定的变量就会发生改变，如果 “{{}}”中有运算符，则会进行运算，并显示运算结果。

另外，在 “{{}}”中不仅可以使用三元运算符，还可以使用算数运算符、逻辑运算符等各种常见的运算符。

注意：下面标亮部分，如果仍然是this[e.target.dataset.id]=Number(e.detail.value),会发现结果一直是 “两数相等” 。？

 1   data:{
 2     num1:0,
 3     num2:0,
 4     result:''
 5   },
 6 
 7   change3:function(e){
 8     var data= {}
 9     data[e.target.dataset.id]=Number(e.detail.value)
10     this.setData(data)
11   },
 1 // pages/index/index.js
 2 Page({
 3   /**
 4    * 页面的初始数据
 5    */
 6   data:{
 7     num1:0,
 8     num2:0,
 9     result:''
10   },
11 
12   change3:function(e){
13     var data= {}
14     data[e.target.dataset.id]=Number(e.detail.value)
15     this.setData(data)
16   },
17   compare:function(){
18     console.log("比较按钮被单击了")
19     var str = '两数相等'
20     console.log('num1:'+this.num1)
21     console.log('num2:'+this.num2)
22     if(this.num1>this.num2){
23       str = '第一个数大'
24     }else if(this.num1<this.num2){
25       str = '第二个数大'
26     }
27     this.setData({result:str})
28   },
29   /**
30    * 生命周期函数--监听页面加载
31    */
32   onLoad(options) {
33     console.log("页面加载")
34   },
35 
36   /**
37    * 生命周期函数--监听页面初次渲染完成
38    */
39   onReady() {
40     console.log("页面初次渲染完成")
41   },
42 
43   /**
44    * 生命周期函数--监听页面显示
45    */
46   onShow() {
47     console.log("页面显示")
48   },
49 
50   /**
51    * 生命周期函数--监听页面隐藏
52    */
53   onHide() {
54 
55   },
56 
57   /**
58    * 生命周期函数--监听页面卸载
59    */
60   onUnload() {
61 
62   },
63 
64   /**
65    * 页面相关事件处理函数--监听用户下拉动作
66    */
67   onPullDownRefresh() {
68 
69   },
70 
71   /**
72    * 页面上拉触底事件的处理函数
73    */
74   onReachBottom() {
75 
76   },
77 
78   /**
79    * 用户点击右上角分享
80    */
81   onShareAppMessage() {
82 
83   }
84 })
View Code

方式四：通过条件渲染显示不同结果

在"{{}}"中使用三元运算符判断虽然方便，但是不够灵活，如果希望根据判断结果显示不同的镖旗，则可以使用条件渲染来实现。

 index.wxml代码如下：

 1 <!--pages/index/index.wxml-->
 2 <page>
 3   <view>
 4     <text>请输入第一个数字：</text>
 5     <input type="number" bindchange="change3" data-id="num1" />
 6   </view> 
 7   <view>
 8     <text>请输入第二个数字：</text>
 9     <input type="number" bindchange="change3" data-id="num2" />
10   </view>
11   <button bindtap="compare">比较</button>
12   <view>
13     <text wx:if="{{num1>num2}}">比较结果：第一个数大</text>
14     <text wx:if="{{num1<num2}}">比较结果：第二个数大</text>
15     <text wx:if="{{num1 == num2}}">比较结果：两数相等</text>
16     <!-- 97 应用级配置文件 TODO:app.json -->
17   </view>
18 </page>

通过wx:if属性判断哪一个标签会在WXML结构中出现(而不是利用样式控制标签的显示或隐藏)，如果“{{}}”中的运算结果为true则出现，运算结果为false则不会出现。

此外，条件渲染还支持类似于 if...else...或 if...else if ...else结构的语法。wx:if ... wx:elif ...wx:else

以上两种方式在控制某一个标签时比较方便，但如果希望控制一块区域是否出现，则使用<block>标签会更方便。<block wx:if="{{}}"></block>

需要注意的是，<block>标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

index.js代码如下：

 1 // pages/index/index.js
 2 Page({
 3   /**
 4    * 页面的初始数据
 5    */
 6   data:{
 7     num1:0,
 8     num2:0,
 9     result:''
10   },
11 
12   change3:function(e){
13     var data= {}
14     data[e.target.dataset.id]=Number(e.detail.value)
15     this.setData(data)
16   },
17   compare:function(){
18     console.log("比较按钮被单击了")
19     var str = '两数相等'
20     console.log('num1:'+this.num1)
21     console.log('num2:'+this.num2)
22     if(this.num1>this.num2){
23       str = '第一个数大'
24     }else if(this.num1<this.num2){
25       str = '第二个数大'
26     }
27     this.setData({result:str})
28   },
29   /**
30    * 生命周期函数--监听页面加载
31    */
32   onLoad(options) {
33     console.log("页面加载")
34   },
35 
36   /**
37    * 生命周期函数--监听页面初次渲染完成
38    */
39   onReady() {
40     console.log("页面初次渲染完成")
41   },
42 
43   /**
44    * 生命周期函数--监听页面显示
45    */
46   onShow() {
47     console.log("页面显示")
48   },
49 
50   /**
51    * 生命周期函数--监听页面隐藏
52    */
53   onHide() {
54 
55   },
56 
57   /**
58    * 生命周期函数--监听页面卸载
59    */
60   onUnload() {
61 
62   },
63 
64   /**
65    * 页面相关事件处理函数--监听用户下拉动作
66    */
67   onPullDownRefresh() {
68 
69   },
70 
71   /**
72    * 页面上拉触底事件的处理函数
73    */
74   onReachBottom() {
75 
76   },
77 
78   /**
79    * 用户点击右上角分享
80    */
81   onShareAppMessage() {
82 
83   }
84 })
View Code

方式五：通过表单获取input组件的值

 在小程序中也提供了类似的form组件，通过它可以方便的获取各种表单组件的值。

index.wxml代码如下：

 1 <!--pages/index/index.wxml-->
 2 <page>
 3 <form bindsubmit="formCompare">
 4   <view>
 5     <text>请输入第一个数字：</text>
 6     <input type="number" name="num1" />
 7   </view> 
 8   <view>
 9     <text>请输入第二个数字：</text>
10     <input type="number" name="num2" />
11   </view>
12   <button  form-type="submit">比较</button>
13 </form>
14   <view>
15     <text>比较结果：{{result}}</text>
16     <!-- 97 应用级配置文件 TODO:app.json -->
17   </view>
18 </page>

在上述代码中，form组件的bindsubmit属性用于绑定表单提交事件。

在表单中，为两个input组件加上了name属性，表单提交时就会自动收集带有name属性的组件的值。

代码中还为比较按钮添加了form-type属性，值为submit表示该按钮用于提交表单，此外，还可以设为reset表示重置表单。

index.js代码如下：

通过e.detail.value获取表单中的值。

 1   formCompare:function(e){
 2     var str = '两数相等'
 3     var num1 = Number(e.detail.value.num1)
 4     var num2 = Number(e.detail.value.num2)
 5     console.log('num1:'+num1)
 6     console.log('num2:'+num2)
 7     if(num1>num2){
 8       str = "第一个数大"
 9     }else if(num1<num2){
10       str = "第二个数大"
11     }
12     this.setData({result:str})
13   },
 1 // pages/index/index.js
 2 Page({
 3   /**
 4    * 页面的初始数据
 5    */
 6   data:{
 7     result:''
 8   },
 9 
10   formCompare:function(e){
11     var str = '两数相等'
12     var num1 = Number(e.detail.value.num1)
13     var num2 = Number(e.detail.value.num2)
14     console.log('num1:'+num1)
15     console.log('num2:'+num2)
16     if(num1>num2){
17       str = "第一个数大"
18     }else if(num1<num2){
19       str = "第二个数大"
20     }
21     this.setData({result:str})
22   },
23   /**
24    * 生命周期函数--监听页面加载
25    */
26   onLoad(options) {
27     console.log("页面加载")
28   },
29 
30   /**
31    * 生命周期函数--监听页面初次渲染完成
32    */
33   onReady() {
34     console.log("页面初次渲染完成")
35   },
36 
37   /**
38    * 生命周期函数--监听页面显示
39    */
40   onShow() {
41     console.log("页面显示")
42   },
43 
44   /**
45    * 生命周期函数--监听页面隐藏
46    */
47   onHide() {
48 
49   },
50 
51   /**
52    * 生命周期函数--监听页面卸载
53    */
54   onUnload() {
55 
56   },
57 
58   /**
59    * 页面相关事件处理函数--监听用户下拉动作
60    */
61   onPullDownRefresh() {
62 
63   },
64 
65   /**
66    * 页面上拉触底事件的处理函数
67    */
68   onReachBottom() {
69 
70   },
71 
72   /**
73    * 用户点击右上角分享
74    */
75   onShareAppMessage() {
76 
77   }
78 })
View Code

 

补充：

代码结构如下：

其他代码如下

app.js
// app.js
App({
  num:123,
  test:function(){
    console.log('test')
  },
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
View Code

app.json

 1 {
 2   "pages":[
 3     "pages/index/index",
 4     "pages/test/test"
 5   ],
 6   "window":{
 7     "backgroundTextStyle":"light",
 8     "navigationBarBackgroundColor": "#fff",
 9     "navigationBarTitleText": "Weixin",
10     "navigationBarTextStyle":"black"
11   },
12   "style": "v2",
13   "sitemapLocation": "sitemap.json",
14   "debug": true
15 }
View Code

app.wxss

 1 /**app.wxss**/
 2 .container {
 3   height: 100%;
 4   display: flex;
 5   flex-direction: column;
 6   align-items: center;
 7   justify-content: space-between;
 8   padding: 200rpx 0;
 9   box-sizing: border-box;
10 } 
11 button{
12   letter-spacing: 12rpx;
13 }
View Code

index.json

1 {
2   "navigationBarTitleText": "数值比较",
3   "navigationBarBackgroundColor": "#369"
4 }
View Code

index.wxss

 1 @import "test.wxss";
 2 view {
 3   margin: 20px;
 4 }
 5 /* view::after{
 6   content: "测试";
 7 } */
 8 input {
 9   width: 600rpx;
10   margin-top: 20rpx;
11   border-bottom: 2rpx solid #ccc;
12 }
13 button{
14   margin: 50rpx;
15 }
View Code

test.wxss

1 button{
2   color: #fff;
3   background: #369;
4 }
View Code
posted @ 2022-10-13 23:24  Vincent-yuan  阅读(1479)  评论(0)  编辑  收藏  举报