【微信小程序 事件绑定】

事件绑定

条件渲染
1. block包裹性容器:条件成立渲染

<block wx:if="{{ true }}"><block wx:if="{{true}}"><view>view1</view><view>view2</view>
</block>

2. wx:if:动态创建移除元素控制展示与隐藏

wx:if 搭配 wx:elif || wx:else

<view wx:if="{{type === 1}}"></view>
<view wx:elif="{{type === 2}}"></view>
<view wx:else="{{type === 0}}">保密</view>值:data:   type:2

3. hidden:控制展示与隐藏

<view hidden="{{flag}}">true隐藏,false显示</view>

4. wx:if 和 hidden对比

a. wx:if 动态创建和移除元素,控制元素展示 / 隐藏 场景:控制条件复杂时使用
b. hidden 切换样式控制展示与隐藏,节点一直存在场景:频繁切换

列表渲染

1. wx:for 指定数组,进行循环渲染
2. wx:for-index 手动指定索引名
3. wx:for-item 手动指定当前项名
4. wx:key="id" 提高渲染效率

data: {  arr1: ['苹果','华为','小米']  }
<view wx:for="{{ arr1 }}"  wx:key="id">索引是 {{ index }} 当前项是: {{ item }}
</view><view wx:for="{{arr}}" wx:for-index="i" wx:for-item="m">索引是 {{ i }} 当前项是: {{ m }}
</view>

模板样式:rpx

  • 布局使用 flex 布局,尺寸单位使用 rpx
    ( responsive pixel )是微信小程序独有的,用来解决屏适配的尺寸单位。

  • 实现原理:不同设备屏幕的大小不同,实现屏幕的自动适配, rpx 把所有设备的屏幕,在宽度上等分为 750 份, 1份就是1 rpx 。较小(大)的设备上,1 rpx 所代表的宽度较小(大)。

全局配置文件 app.json 及常用的配置项

名称作用
pages当前小程序所有页面存放路径,如: “pages/index/index”
window窗口外观

导航栏、背景区、页面主体区:
style:是否启用新版组件样式
局部样式:当前页面配置json文件,会覆盖全局的配置

属性作用
“navigationBarTitleText”:“微信小程序”导航栏显示的标题
“navigationBarBackgroundColor”: “#fff”导航栏背景色:一定要使用16进制颜色表示法
“backgroundTextStyle”:“light”下拉loading的样式 dark/light
“navigationBarTextStyle”:“black”导航栏标题颜色: black/white (只有黑白两种颜色)
“backgroundColor”: “#efefef”下拉窗口的背景色
“enablePullDownRefresh”: true开启下拉刷新
“onReachBottomDistance”: 50上拉触底的距离,获取下页数据

tabBar:底部效果

  1. backgroundColor : tabBar背景色
  2. borderStyle:上边框的颜色
  3. selectedColor:选中时文字的颜色
  4. color:未选中颜色
"tabBar":{  // 与window同级"list":[{"pagePath":"页面路径","text":"底部文字","iconPath":"未激活图标地址","selectedIconPath":"激活图标地址"
},{},....]},

网络数据请求

  • 配置request合法域名(只支持https;不能ip或本地;必须ICP备案)
    小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改 request 域名

1. 发起GET请求:wx.request()

2. 发起POST请求 :wx.request() ------------ method: 'POST ',

onTapGet () {wx.request({url: 'https://... .../api/get',   // 在request合法域名已配置method: 'GET',data: {  name: 'zs', age: 22  },  // 请求参数success: (res) => {                  // 请求成功的回调console.log(res)
}})

页面刚加载时请求数据:onLoad

// 生命周期函数-->监听页面加载-->初始化页面的数据onLoad: function (options) {this.onTapGet()  // 通过 this 调用上述方法this.onTapPost()},

跨域 和 Ajax 的说明

  • 跨域问题是基于浏览器的 Web 开发。小程序的宿主环境是微信客户端,所以不存在跨域的问题。
  • Ajax 技术的核心是依赖于浏览器中的XMLHttpRequest 对象,由于小程序环境是微信,不能叫做“发起 Ajax 请求”,而是叫“发起网络数据请求”。

页面导航

声明式导航:

  1. 导航tabBar页面:switchTab
  2. 非 tabBar 页面:navigate
导航tabBar页面:<navigator url="/页面路径" open-type="switchTab">链接文字</navigator>非 tabBar 页面:<navigator url="/页面路径" (open-type="navigate")>链接文字</navigator>

后退导航:navigateBack

<navigator open-type="navigateBack" (delta="1")>返回上一页</navigator>

编程式导航

  • wx.switchTab() 方法:跳转到 tabBar 的页面
  • wx.navigateTo() 方法:跳转到非 tabBar 的页面
  • wx.navigateBack() 方法:返回上一页面或多级页面
 <button bindtap="goto">链接文字</button>goto () {wx.switchTab({     // wx.navigateTo({     // wx.navigateBack()url: '/ 跳转到页面路径',})},

判断跳转 路径为 – /pages/info/info?name=zs&age=20

	<navigator url="/pages/info/info?name=zs&age=20">跳至info页面</navigator>url: '/pages/info/info?name=李&gender=男',------------------------------------------------------------------------------	定义 data:{ query: {} }   onLoad 事件中获取参:this.setData({ query: options })

页面事件

下拉刷新事件

① 全局开启:app.json 的 window 中
② 局部开启:在页面的app.json 配置文件 "enablePullDownRefresh": true

-window"backgroundColor": "#ccc",
"backgroundTextStyle": "dark/light"onPullDownRefresh() 函数监听刷新
wx.stopPullDownRefresh() 关闭加载状态onPullDownRefresh: function () {this.setData({count: 0})wx.stopPullDownRefresh()
},

上拉触底事件

  1. onReachBottom() 函数监听页面的上拉触底事件
  2. onReachBottomDistance 配置上拉触底的距离

节流

  • data 定义一节流阀 请求方法中修改节流阀的值
    在complete中修改值,成功失败都关闭 onReachBottom 判断节流阀的值
	loading: falsethis.setData({  loading: true  })this.setData({isloading: false})if(this.data.isloading) return

生命周期

应用生命周期写在index.js

  1. onLaunch:小程序启动,渲染完成时触发时 (全局只触发一次)
  2. onShow:小程序启动 或 从后台进入前台时 (可触发多次)
  3. onHide:小程序隐藏起来 或 从前台进入后台时 (可触发多次)
  4. onError:出现异常时触发

页面生命周期

onload():监听页面加载。一个页面调一次,可获取当前页面路径中的参数; 
onShow():监听页面显示 / 切入前台;
onReady():监听页面初次渲染完成。一个页面调一次,页面可以和视图层进行交互;
onHide():监听页面隐藏 / 切入后台。 顶部或底部 tab 切到其他页面;
onUnload(): 监听页面卸载。如 redirectTo 或 navigateBack 到其他页面时;一次

详细生命周期 vue生命周期-小程序生命周期-react生命周期

WXS脚本

   13.1 wxs和JavaScript的关系
wxs数据类型:number/string/boolean/object /function/array/date/regexp 
不支持es6及以上的语法:支持 var/function 函数等 ES5 语法
遵循ComminJS规范:module 对象、require() 函数、module.exports 对象13.2 基础语法1.内嵌 wxs 脚本:通过模块名调用向外暴露的脚本方法
<view>{{ m1.toUpper(username) }}</view>
<wxs module="m1">module.exports.toUpper = function(str) {return str.toUpperCase()  }
</wxs>2. 外联的 wxs 脚本:
//   1. 新建文件,定义方法,暴露成员  utils/tools.wxsfunction toLower(str) {  return str.toLowerCase()  }module.exports = { toLower: toLower  }
//   2. 使用外联式引入外部的wxs文件
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
//   3. 调用 m2 模块的方法
<view>{{ m2.toLower(country) }}</view>13.3 WXS 的特点
场景:过滤器<view>{{ m2.toLower(country) }}</view>
隔离性:不能调用 js 定义的函数和小程序的 API
性能好:iOS 设备上WXS 比 JavaScript 代码快 2 ~ 20 倍,Android 设备上无差异
十四、自定义组件14.1 创建和引用根目录中 -> 创建components -> test 文件夹 -> 新建 Component -> 回车局部引用:页面的 .json 文件中引用组件
全局引用:app.json 全局配置文件中引用组件
"usingComponents": {"my-test": "/components/test/test"}
my-test 就是组件使用时的标签名:<my-test></my-test>14.2 组件和页面的区别
组件的.json 中需要声明 "component": true,
组件的.js调用函数Component,页面是Page
组件事件处理函数需定义在methods,页面在Page下14.3 组件样式隔离
每个组件和页面样式之间不会影响,全局样式对组件无效,只有 class 选择器会有样式隔离效果修改组件的样式隔离选项:
Component({options: { styleIsolation: 'isolated'}
})isolated启用隔离不会影响;
apply-shared页面样式可改变组件;
shared相互影响;14.4 属性
properties:对外属性,接收外界传递到组件的数据
properties: {max: { type: Number, value: 10 },  // 完整写法min: Number   // 简化
},data 和 properties 区别?  都可读可写
data 是组件私有数据,properties是外界传入的数据14.5 数据监听器:observers
Components({observers: {'字段A, 字段B': function(A的新值, B的新值) {}
})监听个别属性
'rgb.r, rgb.g, rgb.b': function (r, g, b){this.setData({fullColor: `${r}, ${g}, ${b}`  })
}通配符监听对象的所有属性
'rgb.**': function (obj){this.setData({fullColor: `${obj.r}, ${obj.g}, ${obj.b}`  })
}14.6 纯数据字段
不用于页面渲染的data字段,用于业务逻辑,有助于提升页面更新的性能使用:
Component 构造器的 options 节点中,指定 pureDataPattern 为一个 正则表达式
Component({options: {  pureDataPattern: /^_/  },data: {   _b: true // 纯数据字段  }
})14.7 生命周期函数
组件生命周期定义,在lifetimes 字段内:
lifetimes: { created(){ },attached() { }
}组件所在页面生命周期,定义在 pageLifetimes 节点:
Component({pageLifetimes: {show:  function () {  },       // 页面被展示hide:  function () {  },       // 页面被隐藏resize:  function (size) {  }  // 页面尺寸变化
}})created: 监听组件实例被创建;(用于给组件的 this 添加自定义的属性)
attached:监听组件初始化完毕 / 进入页面节点树;(发请求获取初始数据)
ready:监听组件在视图层布局完成;(可操作页面)
moved:监听组件实例被移动到节点树另个位置;
detached:监听组件实例从页面节点树被移除;(清除定时器)
error:监听组件方法抛出错误;14.8 插槽1. 单个插槽
<!-- 组件的封装者 -->
<view><view>这里是组件的内部结构</view><!-- 封装组件的时候,使用slot进行占位 --><slot></slot>
</view><!-- 组件的使用者 -->
<my-test4><!-- 使用组件的时候,这部分被放在slot中 --><view>通过插槽填充的内容</view>
</my-test4>2. 多个插槽
启用 多个插槽
Component({options: {multipleSolts: true}
})定义 多个插槽:
<view class="wrapper"><slot name="before"></slot><slot name="after"></slot>
</view><my-test4><view slot="before">1111</view><view slot="after">2222</view>
</my-test4>14.9 组件通讯1. 属性绑定:只能传递数据,不能传递方法
父组件:定义->传出data: {count: 0}<my-test5 count="{{count}}">111</my-test5>
子组件接收:properties: {count: Number}2. 事件绑定:子组件向父组件传递任意数据
父组件js中定义函数,通过父组件wxml自定义事件传给子组件
子组件js中,通过this.triggerEvent('自定义事件名',{ /*参数对象*/})
将数据发送到父组件,父组件js中通过e.detail获取子组件传的数据syncCount(){}<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>this.triggerEvent('sync',{value:this.properties.count+1})syncCount(e){this.setData({count: e.detail.value
})}3. 获取组件实例
父组件通过 this.selectComponent() 获取子组件实例对象,访问子组件的数据和方法;
给子组件添加类或id -> 父组件绑定事件获取实例<my-test5 class="customA" ... ... ></my-test5><button bindtap="getChild">获取组件实例</button>getChild() {const child = this.selectComponent('.customA')
}
十五、基础加强15.1 behaviors
用于实现组件间代码共享:类似于mixins
每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中创建:创建behaviors文件夹 -> 新建my-behavior.js文件
导入:const myBehavior = required("../../behaviors/my-behavior")Component({  myBehavior: [myBehavior],  )}
使用:<view>在组件中共享的behavior是: {{username}}</view>module.exports = Behavior({properties: {},data: { username: 'zs' },methods: {},behaviors{}// 其他节点/生命周期函数...
})15.2 vant-weapp组件库
有赞前端团队开源的一套小程序 UI 组件库,官方文档地址 https://youzan.github.io/vant-weapp安装、app.json引入、wxml使用:
1. 初始化 package.json ,项目根目录执行 npm init -y
2. npm i @vant/weapp@1.3.3 -S --production
3. 工具 -> 构建npm
4. 将 app.json 中的 "style": "v2" 去除
5. 在 app.json 的 "usingComponents": {} 中引入需要的组件
6. 在wxml 中使用定制全局主题样式:page {}节点定义
<van-button type="danger">危险按钮</van-button>
page { --button-danger-background-color: #c00000;
}15.3 API Promise 化官方提供的异步 API 都是基于回调函数实现,容易造成回调地狱,可读性、维护性差.1. 安装 npm i --save miniprogram-api-promise@1.0.4
2. 先删除原有的miniprogram_npm,重新构建npm包
3. app.js入口文件  导入并执行代码
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp) // 参数wx顶级对象,wxp指向一个空对象15.4 MobX全局数据共享1. 使用 mobx-miniprogram创建 Store 实例对象配合 mobx-miniprogram-bindings把 Store 中的共享数据或方法绑定到组件或页面中,实现全局数据共享。npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
MobX 安装完毕,删除 miniprogram_npm 目录,重新构建 npm
创建MobX的Store实例:根目录下新建store文件夹,并新建 store.js 文件
在引用store的页面或组件的js文件内:绑定store里的成员
在页面中使用Store 中的成员
1. store 导入安装的插件
import { observable } from 'mobx-miniprogram'
export const store = observable({numA: 1,     //  2. 定义数据字段numB: 2,get sum() {     //  3. get 定义计算属性return this.numA + this.numB},//  4. 定义 actions 方法,用来修改 store 中的数据 updateNum1: action(function (step) {this.numA += store}),
})2. 引用 store 的页面的 .js文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'onLoad: function (options) {this.storeBindings = createStoreBindings(this, {store,   // 数据源//  5. 绑定计算属性和字段数据fields: ['numA', 'numB', 'sum'],actions: ['updateNum1']    // 映射方法})},btnHandler1(e) {this.updateNum1(e.target.dataset.step)},15.5 分包1. 解释:把一个完整的小程序项目,按需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载;可以首次启动时间,共同开发时可以更好的解耦协作。2. 体积限制:整个小程序的主包+分包不超过16M,单个包不超过2M;3. 引用原则:主包、普通分包、独立分包之间私有资源不能相互引用;1. 分包的使用:
pages 是主包的所有页面
在 app.json 中, 新增 subpackages 的节点, 将放到分包的页面写入 subpackages 数组元素中."subPackages": [{"root": "pagA",  // 分包根目录"name": "p1",    // 分包的别名"pages": ["pages/cat/cat","pages/dog/dog"]}
], 
2. 独立分包:
不打开主包而进入分包也可以启动小程序。本质也是分包,独立于主包和其他分包单独运行"independent": true
3. 分包预下载
在 app.json 中,使用 preloadRule 规则,全加起来限额2M
"preloadRule": {             // 规则"page/contact/conyact": {  // 页面路径"network": "all",        // 指定网络模式"packages": ["p1"]        // 下载哪些分包},
}

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

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

相关文章

农情监测系统的工作原理

TH-Q3农情监测系统是指利用现代信息技术手段&#xff0c;对农田环境进行实时监测、数据采集、传输和处理&#xff0c;以实现对农田环境的全面感知和智能管理[1]。该系统通过安装各种传感器和监测设备&#xff0c;能够实时监测农田的气象、土壤、植被和其他相关数据&#xff0c;…

VXLAN技术揭秘:实现大规模网络隔离与虚拟机无缝迁移

VXLAN简介 定义 VXLAN&#xff08;Virtual eXtensible Local Area Network&#xff0c;虚拟扩展局域网&#xff09;是由RFC定义的一种VLAN扩展方案。VXLAN采用MAC in UDP&#xff08;User Datagram Protocol&#xff09;封装方式&#xff0c;是NVO3&#xff08;Network Virtu…

KOL营销策略:危机公关中的品牌修复与形象重塑

在当今数字化时代&#xff0c;品牌声誉的管理和维护愈发重要。危机公关作为品牌管理的重要一环&#xff0c;对于企业的长期生存和发展具有至关重要的影响。而KOL作为具有强大影响力和号召力的个体&#xff0c;在危机公关中扮演着不可或缺的角色。本文Nox聚星将和大家探讨KOL在危…

男士内裤哪个牌子质量好又舒服?2024男士内裤舒适度排行

男士内裤&#xff0c;不仅仅是一件简单的衣物&#xff0c;更是健康与舒适的关键守护者。作为每位男士的私密伙伴&#xff0c;它承载着每一天的舒适体验与健康保障。因此&#xff0c;选择一款合适的内裤&#xff0c;对男士们来说&#xff0c;显得尤为重要。 我们为您精心总结了…

国标GB28181安防视频监控EasyCVR平台级联时上级平台不显示通道是什么原因?

国标GB28181安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台部署轻快&#xff0c;可支持的主流标准协议有GA/T 1400、国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。 有用户反馈&#xff…

Linux 基本指令1

ls指令 ls【-选项】【目录或文件】当不指定目录或文件时指令能列出当前目录下所有文件除隐藏文件 选项&#xff1a; -a 列出所有包括隐藏的文件-隐藏文件以.开头。 -d 将目录如文件般显示-一般用ls显示目录是显示其目录中所有文件&#xff0c;加-d则显示目录的信息 -r 以反…

22 CRT工具安装流程

22 CRT工具安装流程 SecureCRT 9.5 说明书 SecureCRT 9.5是一款由VanDyke Software开发的终端仿真程序。它为Windows、Mac和Linux操作系统提供了强大的SSH&#xff08;Secure Shell&#xff09;客户端功能。SecureCRT 9.5提供了对Telnet、RLogin、Serial和X.509等协议的支持&…

【安卓设备】通过adb批量安装apk

1、adb链接设备 H:\tv\apk>adb connect 127.0.0.1:21503 2、批量安装apk 如果地址不一致需要将 H:\tv\apk\ 改成自己的路径地址&#xff0c;同时注意该命令只能安装文件名为英文的不支持中文名称&#xff0c;如果有需要先更改文件名称。 H:\tv\apk>for %f in (H:\tv\a…

技术速递|介绍 .NET API 文档的源代码链接

作者&#xff1a;Min Huang&#xff0c;Matt Trilby-Bassett 排版&#xff1a;Alan Wang 开发人员在阅读 API 参考文档时&#xff0c;有时会需要或希望查看相应的源代码。直到不久之前&#xff0c;.NET API 参考文档还没有提供指向源代码的链接&#xff0c;这引起社区添加这一功…

借助ChatGPT撰写学术论文,如何设定有效的角色提示词指

大家好&#xff0c;感谢关注。这个给大家提供关于论文写作方面专业的讲解&#xff0c;以及借助ChatGPT等AI工具如何有效辅助的攻略技巧。有兴趣的朋友可以添加我&#xff08;yida985&#xff09;交流学术写作或ChatGPT等AI领域相关问题&#xff0c;多多交流&#xff0c;相互成就…

12. Django 第三方功能应用

12. 第三方功能应用 因为Django具有很强的可扩展性, 所以延伸了第三方功能应用. 通过本章的学习, 读者能够在网站开发过程中快速实现API接口开发, 验证码生成与使用, 站内搜索引擎, 第三方网站实现用户注册, 异步任务和定时任务, 即时通信等功能.12.1 Django Rest Framework框…

【区块链】记账的千年演化:从泥板到区块链

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 记账的千年演化&#xff1a;从泥板到区块链引言一、古代记账&#xff1a;泥板与…

2024 年勒索软件将比以往更加残酷

如今&#xff0c;世界各地的人们去学校、去医院或去药店时&#xff0c;都会被告知&#xff1a;“抱歉&#xff0c;我们的计算机系统瘫痪了。” 罪魁祸首往往是在世界另一端活动的网络犯罪团伙&#xff0c;他们会要求人们支付系统访问费用或安全归还被盗数据。 尽管警方加大打…

[vue2]深入理解vuex

本节内容 概述初始化仓库定义数据访问数据修改数据处理异步派生数据模块拆分案例-购物车 概述 vuex是一个vue的状态管理工具, 状态就是数据 场景 某个状态在很多个组件使用 (个人信息)多个组件 共同维护 一份数据 (购物车) 优势 数据集中式管理数据响应式变化 初始化仓库 …

Vue36-组件化编程的概念

一、组件化编程VS传统编程 1-1、传统方式的编写应用 存在的问题&#xff1a; 1-2、组件方式的编写应用 注意&#xff1a;是引入&#xff0c;不是复制&#xff01; 体现了封装的概念&#xff01; 二、模块化、组件化

chatgpt: int t[] int *t 区别

在C语言中&#xff0c;int t[]和int *t虽然在某些情况下可以相互替换&#xff0c;但它们有一些关键的区别。这些区别主要体现在声明的语义、内存分配方式和使用场景上。以下是详细的解释&#xff1a; ### 1. int t[] #### 语义: - int t[]声明了一个数组&#xff0c;t是一个数…

Java18新特性总结

Java 18作为Java编程语言的一个重要更新&#xff0c;引入了一系列新特性和改进&#xff0c;旨在提高开发者的生产力和程序的性能。以下是Java 18的主要新特性概述&#xff1a; 元编程功能&#xff1a; Java 18引入了元注释和元类型声明的功能&#xff0c;允许开发人员在编译时…

SonarQube安全扫描常见问题

目录 一、SonarQube质量报告 二、SonarQube扫描常见问题和修复方法 三、SonarQube质量配置 最近小编在使用SonarQube工具进行代码扫描&#xff0c;检查代码异味&#xff0c;系统漏洞等&#xff0c;实际过程中也遇到了不少问题&#xff0c;这篇文章主要列举我遇到的常见问题和…

Android Jetpack Compose 实现一个电视剧选集界面

文章目录 需求概述效果展示实现思路代码实现总结 需求概述 我们经常能看到爱奇艺或者腾讯视频这类的视频APP在看电视剧的时候都会有一个选集的功能。如下图所示 这个功能其实很简单&#xff0c;就是绘制一些方块&#xff0c;在上面绘制上数字&#xff0c;还有标签啥的。当用户…