微信小程序使用

微信小程序中的标签

1.text标签
text标签相当于 html 中的 span标签 行内元素 不会换行
1.可以让用户长按复制 selectable 属性

2.只能嵌套 text
3.可以对空格回车进行编码 decode

   
 < //左括号
>
&
'
 
&emsp

2.view标签
view标签相当于 html 中的 div标签 块元素 会独占一行
3.checkbox
checkbox标签相当于 html 中的 复选框
4.image
src
mode

模板语法

数据绑定

把数据放到js文件的data对象中 使用插值表达式 {{}} 直接在wxml中使用
data中的数据不能直接通过赋值改变
正确的写法: this.setData({
num:newNum
})

Page({
      data:{
            num:1,
            msg:'hello,world',
            isShow:'false',
             person:{
                    age:20,
                    name:'张三'
              }
      }
  })

在wxml中使用

{{num}}
{{msg}}
{{isShow}}
{{person.age}}
//自定义标签属性

//使用bool类型充当属性时 字符串和花括号之间一定不能存在空格 不然会失效

//插值表达式中可以加入表达式 (数字的加减,字符串拼接,三元表达式)

列表渲染

wx:for-item='item'
wx:for-index='index'
wx:key='*this' 表示你的数组是一个普通数组 *this表示是 循环项

block标签

1.占位符标签
2.写代码的时候可以看到此标签
3.页面渲染 小程序会把他移除掉
业务场景 加入需要for循环并且排版简单时 可以使用block标签站位 执行for循环

条件渲染

wx:if='{{true}}'
wx:elif='{{false}}'
wx:else
直接在标签中写 hidden
此时是隐藏
此时是显示

事件绑定

绑定input事件

1.绑定 input 事件 bindinput=''
2.获取input中的值 e.detail.value
this.setData({
msg:e.detail.value
})

绑定点击事件

1.绑定点击事件 bindtap
2.无法在小程序事件中直接传参
3.通过自定义属性的方式来传参 data-i
e.currentTarget.dataset.i

样式　WXSS

尺寸单位　rpx

规定屏幕宽度为 750px
换算公式 假设元素宽100px
? px = 750rpx
1px = 750rpx/?
100px = 750px *100/?

在wxss样式中使用calc属性换算

width:calc(750rpx*100/375)

样式导入

使用 @import 语句导入外联样式 只支持相对路径

选择器

小程序中不支持通配符 *

小程序中的 less

原生小程序不支持less
如果要使用 在vscode中使用less插件 并且在全局json文件中 配置

"less.compile":{
  "outExt":".wxss"  
}