微信小程序学习_第二天

微信小程序学习_第二天

模板语法

条件渲染

wx:if

条件渲染
(1)wx:if=”{{true/false}}”
①if, else, if else
wx:if
wx:elif
wx:else

 <view>条件渲染</view>
<!-- -->
<view wx:if="{{true}}">展示</view>
<view wx:if="{{false}}">隐藏</view>
<!--
if elif else 
if==true elif、else不执行
if==false 执行elif
elif==true 不执行else
elif==false 执行else
-->
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else="{{true}}">3</view>

%title插图%num

 

hidden

(2)hidden
①在标签上直接加入属性 hidden
②hidden=”{{true/false}}”
(3)什么场景下用哪个
①当标签不是频繁切换显示、隐藏的时候,优先使用 wx:if
直接把标签从页面结构中移除掉
②当标签频繁切换隐藏、显示的时候,优先使用 hidden
通过添加样式的方式来切换显示,hidden属性不要和样式display一起使用

 <view>---------</view>
<view>hidden</view>
<view hidden="{{true}}">hidden true</view>
<view hidden="{{false}}">hidden false</view>
<view>---------</view>
<view wx:if="{{false}}">wx:if</view>
<view hidden>hidden</view>

%title插图%num

小程序事件的绑定

⼩程序中绑定事件,通过bind关键字来实现。如bindtap bindinput bindchange等。

wxml:

<input type="number" bindinput="handleInput"/>

js:

 Page({
handleInput:function(e){
console.log(e);
}
})

注意:

 

1 需要给input标签绑定 input事件
    绑定关键字 bindinput
    2 如何获取 输入框的值:通过事件源对象来获取
    e.detail.value
    3 把输入框的值赋值到data中
    this.setData({
        num:e.detail.value
    })
    4 需要加入一个点击事件
        (1)bintap
        (2)无法在小程序中的事件中直接传参
            <button bindtap=”hanleTap(1)”>+</button>    这个是不正确的,在小程序中会把hanleTap(1)整体看为一个函数名
        (3)通过自定义属性的方式来传递参数
        (4)事件源中获取自定义属性
//demo4.wxml
<input type="number" bindinput="handleInput"/>
<button bindtap="handleTap" data-operation="{{1}}">+</button> 
<button bindtap="handleTap" data-operation="{{-1}}">-</button> 
<view>num is {{num}}</view>
 //demo4.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0
},
//输入框input事件的执行逻辑
handleInput(e){
// console.log(e.detail.value);
this.setData({
num:e.detail.value
})
},
//加减按钮事件
handleTap(e){
// 1 获取自定义属性 operation,也就是1和-1
const operation = e.currentTarget.dataset.operation;
//赋值操作
this.setData({
num:this.data.num + operation
})
}
})

%title插图%num
%title插图%num

样式wxss

wxss相当于css,用于描述wxml的组件样式,与css相比,wxss扩展了两个属性:

  1. 响应式长度单位:rpx
  2. 样式导入

尺寸单位

1 需要把页面中某些元素的单位 由 px改为rpx
(1)设计稿 750px
750px=750rpx
1px=1rpx
(2)把屏幕宽度改为 375px
375px=750rpx
1px=2rpx
1rpx=0.5px
2 存在一个设计稿 宽度414px或者未知 page
(1)设计稿page 存在一个元素 宽度100px
(2)拿以上需求 去实现 不同宽度的页面适配
page px = 750rpx
1px=750rpx / page
100px = 750rpx * 100 / page
3 利用一个属性 calc 属性

 //demo5.wxml
view{
width: 100rpx;
height: 100rpx; 
background-color: skyblue;
width:calc(750rpx * 100/375);
}

样式导入

wxss中可以直接使用样式,不需要像css中使用link引入。但wxss同样也有可以导入

直接使用:在wxml同级目录文件中的wxss文件中直接写样式即可。

%title插图%num

外部引入:

语法:

 //demo6.wxss
@import “路径”

其中路径只能为绝对路径

例如:

 @import "../../style/commom.wxss";

%title插图%num

选择器

与css中的选择器基本相同,但是小程序中不支持通配符*,所以

 *{
margin:0;
padding:0;
}

是无效的。

部分选择器如下,基本在前端中已经学习过了。

%title插图%num

小程序使用less

一个vscode插件,本人比较垃圾,还未涉猎,后续再说。

常用组件

view

代替html中的div,其中的属性感觉比较简单,可以参照官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/view.html

text

  1. 文本标签
  2. 可以嵌套text
  3. 长按文字可复制,小程序中只有text标签具有这个功能,可用selectable属性实现
  4. 可以对空格、回车等进行编码,用到decode属性
 <text selectable decode>text&nbsp;123</text>

%title插图%num

image

图片标签,类似于html中的img,但是和html中的img还是存在很大不同。

  1. image组件存在默认宽高,宽320px,高240px。
  2. 支持懒加载

虽然image组件与前端中的有所不同,但还算简单,使用时参照官方文档即可,https://developers.weixin.qq.com/miniprogram/dev/component/image.html

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇