初学微信小程序

最新推荐文章于 2025-12-02 22:10:11 发布

原创最新推荐文章于 2025-12-02 22:10:11 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

本文详细解析了微信小程序的目录结构，包括pages、utils、app.js等关键组件的作用，以及wxml、wxss、js、json文件的用途。通过实例演示了页面间的数据传递与自定义属性传值的方法，展示了如何在js中通过e.currentTarget.dataset接收并处理数据。

微信小程序笔记

- 首先是对微信小程序目录文件理解
- 今天dotolist练习

首先是对微信小程序目录文件理解

pages:项目开发目录
pages里面每一个文件夹都是一个完整的小程序页面，
其中内含四个部分
分别有
xxx.wxml:模板页面
wxss:页面样式相当于css
xxx.js
xxx.json:页面的配置
utils:存放工具函数方法
app.js:小程序的入口文件
app.json:小程序的全局配置
app.wxss:小程序的全局样式

今天dotolist练习

在wxml文件里

//页面之间的传值
//自定义属性传值 data-index ="{{ index }}"
<view wx:for="{{list}}" wx:key="index">
		<text>{{ index+1 }}----{{ item.txt }}</text>
    <button size="mini" bindtap="del" data-index="{{ index}}" >删除</button>
</view>

在js文件里

//使用e.currentTarget.dataset接收数据
del(e){
    let { index } = e.currentTarget.dataset
    console.log(e.currentTarget)
          this.data.list.splice(index,1)
          this.setData({
            list:this.data.list
          })
  },