uniapp 微信小程序 纯js文件中引入自定义modal组件(无需所有页面手动引入组件)

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序 纯js文件中引入自定义modal组件(无需所有页面手动引入组件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp 微信小程序 纯js文件中引入自定义modal组件(无需所有页面手动引入组件)

前言

工具:uniapp
开发端:微信小程序
其他:uview 2.0
场景:接口请求统一封装中需要对接口返回token失效的情况做modal显示,引导用户退出小程序,我的想法是将modal的默认confirm按钮替换成小程序自带的退出方法:

<navigator open-type="exit" target="miniProgram" class="item"></navigator>

这样用户点击确认按钮就能退出小程序,因此uni.showModel不满足需求,需要用uview的u-model实现,也就是要在js文件中显示自定义组件。

解决方法

1.自定义组件文件/components/logout-model.vue文章来源地址https://www.toymoban.com/news/detail-487816.html

<template>
	<view>
		<u-modal ref="modal" title="登录状态失效,请重新登录" :show="showLogout" :closeOnClickOverlay="false" @close="showLogout = false"
			showCancelButton>
			<view style="display: flex;align-items: center;justify-content: space-around;"
				slot="confirmButton">
				<navigator open-type="exit" target="miniProgram" 

到了这里,关于uniapp 微信小程序 纯js文件中引入自定义modal组件(无需所有页面手动引入组件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序引入第三方广告插件

      以Slime广告插件为例。 一、微信小程序后台申请相关插件   二、manifest.json文件 三、pages.json文件 四、要使用该插件的vue页面 引用插件后就可以使用插件的相关方法。 附:Slime插件文档 Slime | 小程序插件 | 微信公众平台

    2024年02月11日
    浏览(74)
  • 解决uniapp微信小程序canvas不能引入字体的问题

    这是微信小程序最近修复问题,里面有关于loadFontFace的修复 在使用前要先把调试基础库调整为 2.25.1 ,我调到这个版本就好其他的版本我也没试 下面是我画布导出的大概效果 姓名这里使用了字体,白色的轮廓是字体轮廓填充 首先要了解一个api名称:uni.loadfontface 这里source里

    2024年02月09日
    浏览(64)
  • 微信小程序如何引入使用ECharts(附带自定义定制流程)

    开发中有时候避免不了引入各种第三方库,以下是详细讲解了微信小程序如何引入ECharts图表 去echarts官网。下载echarts-for-weixin项目 官网地址 https://echarts.apache.org/zh/index.html 根据以下操作找到小程序需要下载的项目 点击使用手册找到应用篇 或者在搜索框搜索小程序也可以找到

    2024年02月08日
    浏览(48)
  • uniapp微信小程序安装uview库引入组件一直not undefined

    问题:按照uview官网一步步安装下载、配置,最后在页面引入简单u-button组件,却显示  按理说一步步照着操作不会存在这种问题,检查uview-ui文件确实是在node-modules下面 没毛病啊!!在网上翻阅很多文章, 发现是uview官网配置最后一步的问题 4. 配置easycom组件模式 此配置需要

    2024年01月22日
    浏览(75)
  • 原生微信小程序自定义tabbar引入Color UI样式

    Color UI 是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值,高度自定义的 Css 组件库。本文介绍了原生微信小程序如何自定义 tabbar 并使用 Color UI 样式 Color UI 的安装请自行参考官方文档,以下步骤以已安装Color UI为前提 重点:配置 tabbar.custom = true 在代码根目录下添加

    2024年02月03日
    浏览(56)
  • 微信小程序配置绝对路径引入文件

    微信小程序默认使用相对路径引入文件 在多层文件夹时需要很长前缀 const { ClueApi } = require(\\\'../../../../utils/api.js\\\') 配置方法 在app.json里面配置  \\\"resolveAlias\\\": {     \\\"@/*\\\": \\\"/*\\\"   } 在页面使用  const { ClueApi } = require(\\\"@/utils/api\\\");

    2024年02月12日
    浏览(55)
  • 微信小程序关于wxs语法、以及能否引入js中的方法(不能调用)

    页面中使用wxs 或者  参考:WXS | 微信开放文档 wxs能引入外部js文件吗 | 微信开放社区 微信小程序中的WXS语法 1、WXS 中不支持let和const,不支持箭头函数。 2、变量命名必须符合下面两个规则: 首字符必须是:字母(a-zA-Z),下划线(_) 剩余字符可以是:字母(a-zA-Z),下划

    2024年02月06日
    浏览(66)
  • 微信小程序(uniapp)自定义导航栏

    微信小程序原生页面导航栏,无法进行自定义交互,如想实现类似下图的效果,就得使用自定义导航栏 这里使用到uView的组件u-navbar 。 提示:以下是本篇文章正文内容,下面案例可供参考 导航栏样式分为两种 default/custom,custom即取消默认的原生导航,默认为default。 原生导航

    2024年04月27日
    浏览(37)
  • 解决在HBuilderX里用uniapp引入vant后在微信小程序里没反应的问题

    在HbuilderX里创建了个uniapp的项目,但是引入vant后,在微信小程序里运行没反应 这是App.vue文件 加了@import 巴拉巴拉那些 问题就出在pages.json文件里, 当我们用快捷输入的 usingComponenets 这个,就有问题了 如果你不是这个原因,那就关了这篇文章吧 如果对你有用,点个赞呗

    2024年02月12日
    浏览(60)
  • 微信小程序使用uniapp自定义tabbar

    第一步:在pages.json里定义自己tabbar路径,定义的时候只需要写上页面路径即可  第二步:自定义tabbar页面,为了实现点击动作的动态效果,需要用到watch监听父组件传来的值的改变  自定义tabbar页面全部代码 注:该页面可以直接用组件的方式来放,因为uniapp支持easycom模式,

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包