微信小程序知识点笔记(持续更)

此笔记根据作业案例学习知识点

【案例1】 比较数字大小(结果在另一页面显示)

一、 input组件的type属性值:number、text、digit、idcard

  number:该属性值设置好后,点击该输入框时,页面会弹出一个数字输入键盘

  idcard:~~页面会弹出身份证输入键盘

  digit:~~页面会弹出带小数点的数字键盘

二、选择器(来自菜鸟教程)

三、尺寸单位:rpx,规定了任何手机屏幕的宽度为750rpx

 逻辑像素:指CSS中使用的像素单位

扫描二维码关注公众号,回复: 10557137 查看本文章

 物理像素:指屏幕上实际有多少个像素

 手机上一个逻辑像素是使用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",进行数据的提交。

(出处:菜鸟教程)

二、服务器数据交互

①编写服务器代码:

猜你喜欢

转载自www.cnblogs.com/Raite/p/12637014.html