第2章微信小程序开发基础【案例1】比较数值大小【案例3】计算器【案例2】调查问卷学习目标掌握小程序项目的基本结构及配置文件的编写掌握WXM
L、WXSS和条件渲染、列表渲染的基本语法掌握Page()、App()函数和常用组件的使用掌握掌握小程序与服务器交互的实现掌握12
34掌握目录2.12.32.2【案例1】比较数字大小【案例3】计算器?点击查看本节相关知识点【案例2】调查问卷?点击查看本节相关知
识点?点击查看本节相关知识点知识架构2.1【案例1】比较数字大小1案例分析2创建项目3页面组件4页面样式5配置文件6页面逻辑知识
架构2.1【案例1】比较数值大小1注册程序2实现比较功能知识架构2.2【案例2】调查问卷1案例分析2编写表单页面3服务器数据交互
4表单数据绑定知识架构2.3【案例3】计算器1案例分析2编写计算器页面3实现计算逻辑功能2.1【案例1】比较数字大小1案例分
析比较数字大小实现效果：实现步骤：输入第1个数；输入第2个数；单击比较按钮；2.1【案例1】比较数字大小1案例分析比较数值大小
实现的技术知识点总结：2.1【案例1】比较数字大小2创建项目项目创建流程：创建一个空白项目创建app.json文件新增一个
index页面2.1【案例1】比较数字大小2创建项目开发者工具会自动创建pages/index目录：Index页面{"p
ages":["pages/index/index"]}2.1【案例1】比较数字大小3页面组件页面组件及功能：标签功能
标签功能视图容器图标文件文本域复选框compare:function(e){console.log(''比较按钮
被单击了'')console.log(e)},2.1【案例1】比较数字大小6页面逻辑对比e.target和e.currentT
arget：outer
innerviewtap:function(e){console.log(e.target.id
+''-''+e.currentTarget.id)},子元素id父元素id2.1【案例1】比较数字大小6页面逻辑常用的冒
泡事件：属性类型touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来
电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开。如果指定了
事件回调函数并触发了这个事件，tap事件将不被触发2.1【案例1】比较数字大小6页面逻辑值得一提冒泡事件是指当一个组件上的事件
被触发后，事件会向父节点传递，而非冒泡事件不会向父节点传递。一些组件还拥有一些专门的事件，如form组件的submit事件、inp
ut组件的input事件等2.1【案例1】比较数字大小6页面逻辑事件冒泡和绑定：单击outer触发outer单击inner触发
middle、inner单击middle触发middle2.1【案例1】比较数字大小7注册程序在app.js文件中调用App(
)函数：onLaunch:function(options){console.log(''onLaunch执行'')},onSho
w:function(options){console.log(''onShow执行'')},onHide:function(
){console.log(''onHide执行'')},onError:function(error){console.log
(''onError执行'')},onPageNotFound:function(options){console.log(''o
nPageNotFound执行'')}2.1【案例1】比较数值大小7注册程序在app.js文件中调用App()函数：2.1【案
例1】比较数字大小7注册程序onLaunch()和onShow()函数触发后返回的字段：path：打开小程序的路径。query：
打开小程序的query。scene：打开小程序的场景值。shareTicket：获取到shareTicket。referrerIn
fo：获取来源于小程序、公众号的AppId等。2.1【案例1】比较数字大小7注册程序App()函数中还可以保存一些在所有页面中
共享的数据：注册数据打印数据onReady:function(){varapp=getApp()console.l
og(app.num)app.test()},App({num:123,test:function(){console
.log(''test'')}})2.1【案例1】比较数字大小8实现比较功能给两个input组件绑定不同事件num1Change
、num2Change：事件绑定事件处理函数num1change:function(e){this.num1=Numb
er(e.detail.value)},num2change:function(e){this.num2=Number
(e.detail.value)},<
inputtype="number"bindchange="num2change"/>2.1【案例1】比较数字大小8实现
比较功能比较功能：事件绑定事件处理函数比较compare:
function(){varstr=''两数相等''if(this.num1>this.num2){str=
''第1个数大''}elseif(this.num1setData({result:str})},2.1【案例1】比较数字大小8实现比较功能通过id和dataset获取元素：通
过id获取元素通过dataset获取"change2"/>e2"/>id="num2"type="number"bindchange="change"/>2.1【案例1】比较数字大小8实
现比较功能在text组件上处理计算逻辑：事件处理函数页面数据比较比较结果：{{num1>num2?''第1个数
大'':(num1change3:function
(e){vardata={}data[e.target.dataset.id]=Number(e.detail.v
alue)this.setData(data)},2.1【案例1】比较数字大小8实现比较功能通过条件渲染的方式比较大小：wx
:ifnum2}}">比较结果：第1个数大="{{num1比较结果：第2个数大比较结果：两数相等t>num2}}">比较结果：第1个数大{num1比较结果：第2个数大
比较结果：两数相等wx:ifwx:else2.1【案例1】比较数字大小8实现比较功能通过表单获取input组件
的值，比较结果：事件处理函数表单组件formCompare:function(e){varstr=''两数相等''var
num1=Number(e.detail.value.num1)varnum2=Number(e.detail.va
lue.num2)…this.setData({result:str})},pare">2.2【案例2】调查问卷1案例分析调查问卷效果展示：实现步骤：填写表单数据；提交发送到服务器；后
台数据渲染到页面；2.2【案例2】调查问卷2编写表单页面页面代码结构：
............>提交2.2【案例2】调查问卷3服务器数
据交互Express安装和使用流程：初始化项目安装Express框架安装nodemon监控文件修改创建服务；启动服务；serv
erclient2.2【案例2】调查问卷3服务器数据交互用代码创建服务：创建服务；监听端口；constapp=exp
ress()app.use(bodyParser.json())//处理POST请求app.post(''/'',(req,re
s)=>{console.log(req.body)res.json(req.body)})//监听3000端口app.
listen(3000,()=>{console.log(''serverrunningathttp://127.0.
0.1:3000'')})2.2【案例2】调查问卷3服务器数据交互利用wx.request()向本地HTTP服务器发送POS
T请求：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【案例2】调查问卷3服务器数据交互利用wx.request()
向本地HTTP服务器发送POST请求：2.2【案例2】调查问卷4表单数据绑定请求接口获取后台数据：前台代码后台接口app.
get(''/'',(req,res)=>{res.json(data)})onLoad:function(options
){wx.request({url:''http://127.0.0.1:3000/'',success:res=>{
this.setData(res.data)}})},2.2【案例2】调查问卷4表单数据绑定值得一提值得一提的是，由
于wx.request()参数中的method属性的默认值为GET，因此在发送GET请求时可以省略method属性。2.3【案例
3】计算器1案例分析计算器功能介绍：加（+）减（-）乘（×）除（÷）取余（%）Delete删除C全部清空2.3【案例3】计
算器2编辑计算器页面计算器页面的整体布局：...?ss="btns">...page{display:flex;height:100%flex-direction:column;}.result{flex:1;background:#f3f6fe;}.btns{flex:1;}2.3【案例3】计算器2编辑计算器页面计算器按钮样式：btns{flex:1;display:flex;flex-direction:column;font-size:17pt;border-top:1rpxsolid#ccc;border-left:1rpxsolid#ccc;}….2.3【案例3】计算器2编辑计算器页面计算结果页面：计算结果展示区.result{flex:1;background:#f3f6fe;position:relative;}…计算按钮区2.3【案例3】计算器3实现计算逻辑功能编写按钮的事件处理函数：?result:null,?isClear:false,resetBtn:function(){}?delBtn:function(){},?numBtn:function(e){},??opBtn:function(e){},?dotBtn:function(){},?本章总结本章主要围绕微信小程序的组件、样式、配置文件、数据绑定等内容进行讲解，通过案例将这些知识应用到小程序的开发中，帮助读者掌握小程序的开发基础，并对后面的学习做了铺垫。 |
|
