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

模块化

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"})
    } 
  },
相关推荐
破无差7 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张9 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬10 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063210 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI11 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206912 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld12 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄14 小时前
mobx-miniprogram小程序的数据传输
小程序
说私域16 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源
!win !18 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序