微信小程序初探笔记(2)

最新推荐文章于 2024-09-14 23:36:55 发布

原创最新推荐文章于 2024-09-14 23:36:55 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

4 篇文章

订阅专栏

该博客围绕小程序开发展开，介绍了template模版绑定数据，类似Android的组合自定义View；阐述了wxss主要属性，如排列、对齐方式及内外边距；讲解了小程序中let、var、const的区别；还提及function (e)自定义事件，以及e.currentTarget和e.target在父子view上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.template模版绑定数据

<!--定制item模版-->
<template name="msgItem">
  <view class="bg_con">
    <text class="bg_item">{{index}}: {{msg}}</text>
    <text> Time: {{time}}</text>
  </view>
</template>

<import src="item.wxml" />
<block wx:for="{{itemData}}">
  <template is="msgItem" data="{{...item}}" />
</block>

data: {
    itemData: [{
      index: 0,
      msg: 'haohao come in',
      time: '2019-05-29'
    },
    {
      index: 1,
      msg: 'come in',
      time: '2019-05-29'
    },{
      index: 2,
      msg: 'haohao',
      time: '2019-05-29'
    }],

定制模版就相当与Android内的组合自定义View

2.wxss主要属性

flex-direction row：横向排列 column：纵向排列
justify-content 主轴的对齐方式；如果flex-direction为row则主轴就是水平方向；可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）；可选属性 (‘flex-start’, ‘flex-end’, ‘center’）
margin 外边距
padding 内边距

3.小程序中 let、var、const

let 声明块级变量，即局部变量。example：在for循环中声明的，跳出for循环就不能使用
var 声明全局变量。example：在for循环中声明的，跳出for循环依然可以使用
const 声明常量/块级变量。如果在for循环中声明的，跳出不能使用

4.function (e) 关于e自定义事件

<view  bindtap='test' data-type="0" data-sssq="haohao">

test: function (e) {
var type = e.currentTarget.dataset.type;
var sssq = e.currentTarget.dataset.sssq;
}

5.e.currentTarget和e.target

currentTarget ：在view上绑定的bindtap的组件
target ：响应事件的组件

一般出现在父子view上，如果俩个共同用一般用于处理各自不同的逻辑

需要多嵌套一层才能设置距离成功

<view style='width:100%;display:flex;margin-top:140rpx'>
    <view class='blue_bg row_container row_center' wx:if="{{sToday}}" style='margin:30rpx'>
      <text style='color:white;font-size:100rpx'>120</text>

    </view>