此笔记根据作业案例学习知识点
【案例1】 比较数字大小(结果在另一页面显示)
一、 input组件的type属性值:number、text、digit、idcard
number:该属性值设置好后,点击该输入框时,页面会弹出一个数字输入键盘
idcard:~~页面会弹出身份证输入键盘
digit:~~页面会弹出带小数点的数字键盘
二、选择器(来自菜鸟教程)
三、尺寸单位:rpx,规定了任何手机屏幕的宽度为750rpx
逻辑像素:指CSS中使用的像素单位
物理像素:指屏幕上实际有多少个像素
手机上一个逻辑像素是使用2×2的物理像素的,能让手机显示更清晰
四、 样式导入
可使用@import ……形式进行导入外部样式
五、页面配置(来自菜鸟教程)
六、常用应用配置(来自菜鸟教程)
七、生命周期回调函数
onLoad函数中的options参数的作用是,用于页面间传递数据
八、页面事件处理函数
想要启用这些函数,还需要在.json页面或.wxml进行设置,例如:
onPullDownRefresh函数,除了设置.js中的提示信息,还要在.json中设置:"enablePullDownRefresh":true
onPageScroll函数,除了设置.js中的提示信息,还要在.wxml中设置元素的高度
九、组件事件处理函数
① 用于给组件绑定事件,形式:bind+事件类型(和H5给元素添加JavaScript方法一个道理,.wxml中一个方法名,就在.js中写一个方法)
② 对比e.target 和 e.currentTarget:
e.taget.id:只获取子元素的id,而e.currentTarget.id会获取父元素的id,例如:
<view bindtap="viewtap" id="outer"> outer <view id="inner">inner</view> </view>
1 viewtap:function(e){ 2 console.log(e.target.id+'+'+e.currentTarget.id) 3 }
结果:页面会显示一个outer和一个inner,
点击outer时,Console会显示出:outer+outer
点击inner时,Console会显示出:inner+outer
③冒泡事件
指当一个组件上的事件被触发后,事件会向父节点传递,非冒泡事件则不向父节点传递。
一些组件还拥有自己专门的事件
④第二种绑定事件的方式
形式:catch+事件类型
特点,会阻止冒泡事件向上冒泡(传给父节点),例如:
1 <view bindtap="outerTap"> 2 outer 3 <view catchtap="midleTap"> 4 middle 5 <view bindtap="innerTap">inner</view> 6 </view> 7 </view>
1 outerTap: function(e){ 2 console.log('outer') 3 } 4 middleTap: function(e){ 5 console.log('middle') 6 } 7 innerTap: function(e){ 8 console.log('inner') 9 }
结果:页面会显示一个outer,一个middle,一个inner,
点击inner时,Consle会显示inner和middle
点击middle时,Console会只显示middle
点击outer时,Console会只显示outer
十、注册程序
在app.js文件中调用App()函数,和其他.js文件的函数差不多
形式:App({ })
App()函数中还可以保存一些在所有页面中共享的数据:例如:
在app.js中:
1 App({ 2 num:123, 3 test:function(){ 4 console.log('test') 5 } 6 })
在test.js中
1 onReady:function(){ 2 var app = getApp() 3 console.log(app.num) 4 app.test() 5 }
十一、实现比较效果,且页面传值
方法1:在.wxml给两个input组件绑定不同事件(bindinput='one',bindinput='two')
然后在.js写方法获取数值且保存好用户输入的值,准备作比较大小,
this.setData({ })的作用是用于动态设置数值
再在.wxml给form绑定一个事件(formCompare)用于比较结果,在.js中写方法且把比较结果动态输出给result,(result在另一页面,用于输出比较结果)
在.wxml给button组件绑定一个事件(ck),在.js写ck事件方法用来实现传值
这里需要注意的是 navigateTo,该方法是用来跳转页面的
另一页面代码:
【案例2】调查问卷
一、表单组件
① <raideo-group>:单选框,里面包含多个radio,如果在里面的radio的外层包上<label>,实现的效果则是:点击该单选框相应的文字,也会选中该单选框
单选框的默认选中状态的设置则是在该单选框的radio中加入checked
② <checkbox-group>:复选框,里面包含多个checkbox,相关效果和<raideo-group>相同
③ <textarea>:文本域
④ (中国标准时间)事件警告:看看警告里报的是哪个事件名,然后在.js中写该事件名的方法即可
⑤表单中的提交按钮:表单中的提交按钮,不是通过在按钮绑定事件函数,而是在<form>组件中绑定事件函数bindsubmit="submit",然后再在提交按钮<button>写上form-type="submit",进行数据的提交。
(出处:菜鸟教程)
二、服务器数据交互
①编写服务器代码: