微信小程序基础（2）

1.小程序事件绑定

⼩程序中绑定事件，通过bind关键字来实现,bindtap,bindinput``bindchange等; 1-1.wxml

<input type="text"  bindinput='handelInput'/>

​ 1-2.js

Page({
   
    data:{
   
        num:0
    },
    handelInput(e){
   
        this.setData{
   
            num:e.detail.value
        }
    }
})

1-3.注意

​ 1.绑定事件时不能带参数不能带括号以下为错误写法

<input bindinput="handleInput(100)" />

​ 2.2.事件传值通过标签⾃定义属性的⽅式和value

<input bindinput="handleInput" data-item="100" />

​ 2.3事件触发时获取数据

handelInput(e){
   
     console.log(e.currentTarget.dataset)
       console.log(e.detail.value)  
    }

2.样式wxss

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

`WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。

​ 与 CSS 相⽐，WXSS 扩展的特性有：

​ 响应式⻓度单位 rpx

​ 样式导⼊

​ 2-1: 尺寸单位

​ rpx :可以根据屏幕宽度进行自适应,规定屏幕的宽度为750rpx;

​ 1rpx=0.5px=1物理像素

建议:开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。

使⽤步骤：

1. 确定设计稿宽度 pageWidth

2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。

3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

转换rpx的公式:

1px =750rpx/设计稿宽