微信小程序第六次课(模块化和绑定事件)

模块化

1.首先 我们在utils里面创建一个新的js文件
2.新的js文件里面写我们要实现的函数功能  
3.把新的函数功能  通过 module.export.对外公开文件名 =新文件名  的方式把之前的函数公开到其他他模块                             (类似于public  让别的模块可以访问到新的函数)
function sayHello(name ){// console.log("hello liming")//根据不同的信息 输出信息  console.log("hello "+ name)//可以使用对象类型 来传递多个信息
}//定义好功能了  把函数开放出去 使用以下代码
//右边为当前函数名   左边的是开放出去的文件名
module.exports.Hello =sayHello
4.打开要实现功能的wxml文件 添加一个按钮 绑定任意函数名
<button bind:tap="welcome">Hello</button>
5.打开对应的js文件 把微信wxml文件里面的新函数 定义在js文件
6.调用 util里面的新函数 先申请一下使用权限  在require方法里面写文件路径
     var com = require("../../utils/tool")  最后使用 com 调用tool里面的函数
 //调用 util里面的Hello 先申请一下使用权限  在require方法里面写文件路径welcome(){//申请var com = require("../../utils/tool")//调用com.Hello("Gao");},

绑定事件

例题一  点击按钮修改文字颜色 

1. 在对应的wxss文件中  设置文字的样式

.color1{color: aqua;font-size: larger;
}
.color2{color: blueviolet;font-size: xx-large;}

2.在wxml文件中  绑定文字样式  通过{{变量值}}

<button bind:tap="colorchange">修改颜色</button>
<view class="{{color}}}"> 修改文字的颜色</view>

3.在js文件中的 data里面 声明color变量 设置一个默认值

//4. 定义一个函数 点击按钮  color1->color2  color2->color1
colorchange(){if(this.data.color === "color1")this.setData({color:"color2"})else{this.setData({color:"color1"})} },

例题二  点击按钮 隐藏文字 的两种方式

1.在wxml文件中  绑定文字样式  通过{{变量值}}

<!-- 因为是字符串类型 空串才会错误  所以必须加上大括号 -->
<view wx:if="{{show}}">文字的显示和隐藏</view>
<button bind:tap="fontChange">显示/隐藏</button><!-- 通过 hidden来隐藏  -->
<view hidden="{{show?false:true}}">通过hidden来显示或隐藏</view>

2.在js文件中 data中声明变量 show 

3.在js文件中写一个函数绑定 view

  colorchange(){if(this.data.color === "color1")this.setData({color:"color2"})else{this.setData({color:"color1"})} },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803937.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

https的配置和使用(以腾讯云为例)

1、注册域名 2、获取证书 3、下载证书 下载下来的证书所有格式 4、在服务器上下载nginx并配置 nginx的配置文件 如下 server {listen 80;listen 443 ssl;server_name delegate.letspiu.net.cn;ssl on; #开启ssl#指定证书位置ssl_certificate /etc/ss…

JRT判断数据是否存在优化

有一种业务情况类似下图&#xff0c;质控能做的项目是仪器关联的项目。这时候维护质控物时候开通项目时候要求加载仪器项目里面的项目&#xff08;没有开通的子业务数据的部分&#xff09;。对右边已经开通的部分要求加载仪器项目里面的项目&#xff08;有开通业务子数据的部分…

Python从0到100(十二):函数的定义及模块

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

DockerFile定制镜像

dockerfile 简介 Dockerfile 是⼀个⽤来构建镜像的⽂本⽂件&#xff0c;⽂本内容包含了⼀条条构建镜像所需的指令和 说明&#xff0c;每条指令构建⼀层&#xff0c;最终构建出⼀个新的镜像。 docker镜像的本质是⼀个分层的⽂件系统 centos的iso镜像⽂件是包含bootfs和rootfs…

SQL注入sqli_libs靶场第一题

第一题 联合查询 1&#xff09;思路&#xff1a; 有回显值 1.判断有无注入点 2.猜解列名数量 3.判断回显点 4.利用注入点进行信息收集 爆用户权限&#xff0c;爆库&#xff0c;爆版本号 爆表&#xff0c;爆列&#xff0c;爆账号密码 2&#xff09;解题过程&#xff1…

GitHub 仓库 (repository) Pulse - Contributors - Network

GitHub 仓库 [repository] Pulse - Contributors - Network 1. Pulse2. Contributors3. NetworkReferences 1. Pulse 显示该仓库最近的活动信息。该仓库中的软件是无人问津&#xff0c;还是在火热地开发之中&#xff0c;从这里可以一目了然。 2. Contributors 显示对该仓库进…

easyExcel - 动态复杂表头的编写

目录 前言一、情景介绍二、问题分析三、代码实现方式一&#xff1a;head 设置方式二&#xff1a;模板导出方式三&#xff1a;自定义工具类 前言 Java-easyExcel入门教程&#xff1a;https://blog.csdn.net/xhmico/article/details/134714025 之前有介绍过如何使用 easyExcel&…

Jmeter02-2:参数化组件其他方式

0、Jmeter组件&#xff1a;参数化概述 0.1 是什么&#xff1f; 参数化是动态的获取并设置数据 0.2 为什么&#xff1f; 比如执行批量操作时&#xff0c;批量插入或批量删除&#xff0c;之前数据都是手写的&#xff0c;每执行完都要修改一次&#xff0c;效率太低 而参数化就是…

使用影刀采集大众点评数据:打造自动化数据采集工具

在本教程中&#xff0c;我将向大家介绍如何使用影刀&#xff08;YinDao&#xff09;来采集大众点评的数据。影刀是一款强大的自动化流程处理工具&#xff0c;可以帮助我们自动执行网页操作、数据提取等任务&#xff0c;极大地提高了数据采集的效率和准确性。通过本教程&#xf…

代码随想录刷题随记17-二叉树6

代码随想录刷题随记17-二叉树6 654.最大二叉树 leetcode链接 递归解题思路和之前使用中序后序构建树的思路是一样的 class Solution { public:TreeNode * sub(vector<int>& nums,int start,int end){int indexstart;//int maxnums[start];for(int istart;i<end…

C++操作Word 使用Microsoft Office提供的COM接口

使用Office Automation&#xff0c;开发者可以利用编程语言&#xff08;如Visual Basic for Applications&#xff08;VBA&#xff09;、C#、Python等&#xff09;来与Office应用程序进行交互。这些编程语言提供了丰富的API&#xff08;应用程序编程接口&#xff09;&#xff0…

Python代码识别minist手写数字【附pdf】

一、概述 对于人类而言&#xff0c;要识别图片中的数字是一件很容易的事情&#xff0c;但是&#xff0c;如何让机器学会理解图片上的数字&#xff0c;这似乎并不容易。那么&#xff0c;能否找出一个函数&#xff08;模型&#xff09;&#xff0c;通过输入相关的信息&#xff0…

CentOS7.9.2009设置elasticsearch7.11.1开机自启动

前提:root用户登录CentOS服务器 1.进入/etc/systemd/system目录 命令: cd /etc/systemd/system [root@elasticsearch ~]# cd /etc/systemd/system [root@elasticsearch system]# pwd /etc/systemd/system [root@elasticsearch system]# 2.创建elasticsearch启动文件。E.g…

网络基础三——IP协议补充和Mac帧协议

全球网络及网段划分的理解 ​ 根据国家组织地区人口综合评估进行IP地址范围的划分&#xff1b; ​ 假设前8位用来区分不同的国家&#xff0c;国际路由器负责全球数据传输&#xff0c;子网掩码为IP/8&#xff1b;次6位区分不同的省份&#xff0c;国内路由器负责全国数据的传输…

jvm调优案例分析-window通过jstack查找死锁的进程

我们经常会遇到java程序遇死锁的问题&#xff0c;也会经常遇到。 案例 以下是案例代码&#xff1a; package com.dzend.mall.order;public class JstackLockDemo {public static final int initData 666;public static User user new User();public int compute(){int a1;i…

汽车传感器介绍

汽车中有各种类型的传感器&#xff0c;它们用于监测和控制车辆的各个方面。以下是一些常见的汽车传感器及其功能介绍&#xff1a; 车速传感器&#xff1a;车速传感器用于监测车辆的速度。它们可以采用不同的技术&#xff0c;如磁性传感器或光学传感器&#xff0c;以测量车轮的转…

对CryptoDriver里密钥格式定义的探索(2)

目录 1.概述 2.开始分析 2.1 公钥的PEM解析 2.2 私钥的PEM解析 3 小结 1.概述 我们简单描述了PEM格式,但是引出了ASN,1的问题,所以下片文章,我继续分析,并将pem格式解析出来 什么是AS

Git汇总

目录 1&#xff0c;查看分支 &#xff08;1&#xff09;查看本地分支 &#xff08;2&#xff09;查看远程分支 (3&#xff09;查看所有分支 1&#xff0c;查看分支 &#xff08;1&#xff09;查看本地分支 git branch&#xff08;2&#xff09;查看远程分支 git branch -r…

java中可变参数和简单游戏

可变参数&#xff1a; 就是一种特殊形参&#xff0c;定义在方法&#xff0c;构造器的形参列表中&#xff0c;格式是&#xff1a;数据类型...参数名称 可变参数的好处&#xff1a; 灵活的接收数据 特点&#xff1a;可以不传数据给它&#xff0c;可以传一个数据或者多个数据给它…

Explain SQL 诊断和性能分析策略等问题

EXPLAIN SQL诊断和性能分析策略 问题1&#xff1a;请解释EXPLAIN命令在MySQL中的作用&#xff0c;并列举其主要输出列的含义。 答案1&#xff1a;EXPLAIN命令用于分析MySQL如何执行SQL查询语句&#xff0c;帮助开发者理解查询的执行计划&#xff0c;从而进行性能优化。其主要…