微信小程序实战-第2章 微信小程序开发基础

微信小程序实战-第2章 微信小程序开发基础

2.1 【案例1】比较数字大小

2.1.1案例分析

比较数字大小实现效果：
实现步骤：

• 输入第1个数；
• 输入第2个数；
• 单击比较按钮；
  
  比较数值大小实现的技术知识点总结：

2.1.2创建项目

项目创建流程：

• 创建一个空白项目
• 创建app.json文件
• 新增一个index页面
  
  
  开发者工具会自动创建pages/index目录：

Index页面

{
  "pages":[
    "pages/index/index"
  ]
}

2.1.3页面组件

值得一提:

input组件type属性值为number：

2.1.4页面样式

不同设备的rpx与px换算关系：

rpx单位规定了任何手机屏幕的宽度都为750rpx（逻辑像素）。
目标： 为了方便开发人员适配各种手机屏幕

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

对比WXSS中的rpx运行效果展示：

view {margin: 50rpx;}
input {
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {margin: 50rpx;}

对比WXSS中的px运行效果展示：

view {margin: 50rpx;}
input {
/* 此处将原来的600rpx改为300px */
  width: 300px; margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {margin: 50rpx;}

全局样式和导入外部样式：

2.1.5配置文件

页面级文件配置导航栏标题为“数值比较”，颜色为蓝色：

开启了调试，运行程序后，就会在控制台中输出调试信息：

{
  "pages": ["pages/index/index"],
  "debug": true
}

2.1.6页面逻辑

onLoad、onReady、onShow函数为例进行演示：

onLoad: function (options) {
  console.log('页面加载')
},
onReady: function () {
  console.log('页面初次渲染完成')
},
onShow: function () {
  console.log('页面显示')
},

onLoad函数中的options参数传递流程:

onReady: function() {
  wx.navigateTo({
    url: '/pages/test/test?name1=value1&name2=value2'
  })
},

onLoad: function (options) {
  console.log(options)
},

pages/index/index.js中使用这3个页面处理函数：

onPullDownRefresh: function () {console.log('此时用户下拉触顶')},
onReachBottom: function () {console.log('此时用户上拉触底')},
onPageScroll: function (options) {
  console.log('此时用户正在滚动页面')
  console.log('滚动距离：' + options.scrollTop)
},

组件事件处理函数用于为组件绑定事件：

<button bindtap="compare">比较</button>
compare: function (e) {
  console.log('比较按钮被单击了')
  console.log(e)
},

2.1.7注册程序

在app.js文件中调用App()函数：

onLaunch: function(options) {console.log('onLaunch执行')},
onShow: function (options) {console.log('onShow执行')},
onHide: function() {console.log('onHide执行')},
onError: function(error) {console.log('onError执行')},
onPageNotFound: function (options) {console.log('onPageNotFound执行')}

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

App({
  num: 123,
  test: function() {console.log('test')}
})

onReady: function () {
  var app = getApp()
  console.log(app.num)
  app.test()
},

2.1.8实现比较功能

给两个input组件 绑定不同事件num1Change、num2Change：

事件绑定

<input type="number" bindchange="num1change“/>
<input type="number" bindchange="num2change" />

事件处理函数

num1change: function (e) {
  this.num1 = Number(e.detail.value)
},
num2change: function (e) {
  this.num2 = Number(e.detail.value)
},

比较功能：

事件处理函数

compare: function() {
  var str = '两数相等'
  if (this.num1 > this.num2) {
    str = '第1个数大'
  } else if (this.num1 < this.num2) {
    str = '第2个数大'
  }
  this.setData({result: str})
},

事件绑定

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

通过id和dataset获取元素：

通过id获取元素

<input id="num1" type="number" bindchange="change" />
<input id="num2" type="number" bindchange="change" />

通过dataset获取

<input data-id="num1" type="number" bindchange="change2" />
<input data-id="num2" type="number" bindchange="change2" />

在text组件上处理计算逻辑：

事件处理函数

change3: function (e) {
  var data = {}
  data[e.target.dataset.id] = Number(e.detail.value)
  this.setData(data)
},

页面数据比较

 <text>比较结果：
{{num1 > num2 ? '第1个数大' : 
   (num1 < num2 ? '第2个数大' :
 '两数相等')}}</text>

通过条件渲染的方式比较大小：

wx:if

 <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
  <text wx:if="{{num1 < num2}}">比较结果：第2个数大</text>
  <text wx:if="{{num1 == num2}}">比较结果：两数相等</text>

wx:if wx:else

 <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
  <text wx:elif="{{num1 < num2}}">比较结果：第2个数大</text>
  <text wx:else>比较结果：两数相等</text>

通过表单获取input组件的值，比较结果：

事件处理函数

formCompare: function(e) {
  var str = '两数相等'
  var num1 = Number(e.detail.value.num1)
  var num2 = Number(e.detail.value.num2)
  …
this.setData({result: str})
},

表单组件

<form bindsubmit="formCompare">
</form>

2.2 【案例2】调查问卷

2.2.1案例分析

2.2.2编写表单页面

2.2.3服务器数据交互

利用wx.request()向本地HTTP服务器发送POST请求：

submit: function(e) {
  wx.request({
    method: 'post',
    url: 'http://127.0.0.1:3000/',
    data: e.detail.value,
    success: function (res) {
      console.log(res)
    }
  })
},

2.2.4表单数据绑定

请求接口获取后台数据：
前台代码

onLoad: function(options) {
  wx.request({
    url: 'http://127.0.0.1:3000/',
    success: res => {
      this.setData(res.data)
    }
  })
},

后台接口

app.get('/', (req, res) => {
  res.json(data)
})

2.3 【案例3】计算器

2.3.1案例分析

2.3.2编辑计算器页面

计算器按钮样式：

btns {
  flex: 1; display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}
….

计算结果页面

.result {
  flex: 1;
  background: #f3f6fe;
  position: relative;
}
…

2.3.3实现计算逻辑功能

本章总结

本章主要围绕微信小程序的组件、样式、配置文件、数据绑定等内容进行讲解，通过案例将这些知识应用到小程序的开发中，帮助读者掌握小程序的开发基础，并对后面的学习做了铺垫。