雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

记录一次使用 uniapp 结合微信原生 api 封装弹窗组件方法

2021-07-13 分类:前端之旅 阅读(1358) 评论(0)

产生原因:

一直以来, 使用 uniapp 封装组件, 然后通过使用 props 来给组件传参控制组件内容, 或者使用 slot , 但是比如页面有多个弹窗, 则需要修改数据然后再 更新显示隐藏, 如果是在某个流程里面, 比如 常见的 Confirm 类, 则需要设置组件的回调来接受事件, 其实是比较麻烦的, 今天经过一系列的分析, 终于想到了一个方案,

主要用到的 api 就是微信的 selectComponent()

大概思路就是,. 我正常弹窗, 然后在 弹窗 js 里设置回调, 这样我就不用 在组件里去接受用户的选择结果事件,

首先是弹窗的组件, 里面定义弹窗的一些事件和简单的界面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style scoped>
.page {
  margin: 50px;
}
</style>
<template>
  <div class="page" v-if="openPopup">
    <h1>{{content}}:{{test}}</h1>
    <button @click="okay">确定</button>
    <button @click="cancel">取消</button>
  </div>
</template>
 
<script>
/**
* Created by iyahe@qq.com
* Date: 2021/7/13
* Time: 3:53 下午
* Description:
*/
export default {
  name: "popup",
  mixins: [],
  props: {},
  data() {
    return {
      content: '我是组件',
      openPopup: false,
      onConfirm:function (){},
      onCancel: function (){},
      test: ''
    }
  },
  computed: {},
  watch: {},
  components: {},
  methods: {
    close () {
      // this.$set(this,'test', Math.random())
      this.$mp.component.setData({
        openPopup: false
      })
    },
    okay (e) {
      // 不知道什么原因, 这里直接给 onConfirm 赋值, 第一次会无法更新数据,所以才用原生方法用 setData 赋值
      const { onConfirm } = this.$mp.component.data
      this.close()
      onConfirm(e);
    },
    cancel(e){
      // 同上
      const { onCancel } = this.$mp.component.data
      this.close()
      onCancel(e);
    }
  },
  created() {},
  mounted() {}
}
</script>

然后是我们的弹窗处理类, 里面用来处理弹窗的赋值

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* Created by 天明
* Date: 2021/7/13
* Time: 4:06 下午
* Description:
*/
export default {
alert(message) {
const page = getCurrentPages();
// 如果有多个弹窗, 这个 #popup 可以当做参数传入进来,
const popup = page[0].selectComponent('#popup')
return new Promise((resolve, reject) => {
popup.setData({
'content': message,
'onConfirm': (e) => {
resolve(e)
},
'onCancel': (e) => {
reject(e)
},
'openPopup': true
});
})
}
};

 

最后使我们使用的页面里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style scoped>
.page {
  margin: 50px;
}
</style>
<template>
  <div class="page" v-if="openPopup">
    <h1>{{content}}:{{test}}</h1>
    <button @click="okay">确定</button>
    <button @click="cancel">取消</button>
  </div>
</template>
 
<script>
/**
* Created by iyahe@qq.com
* Date: 2021/7/13
* Time: 3:53 下午
* Description:
*/
export default {
  name: "popup",
  mixins: [],
  props: {},
  data() {
    return {
      content: '我是组件',
      openPopup: false,
      onConfirm:function (){},
      onCancel: function (){},
      test: ''
    }
  },
  computed: {},
  watch: {},
  components: {},
  methods: {
    close () {
      this.$set(this,'test', Math.random())
      this.$mp.component.setData({
        openPopup: false
      })
    },
    okay (e) {
      // 不知道什么原因, 这里直接给 onConfirm 赋值, 第一次会无法更新数据,所以才用原生方法用 setData 赋值
      const { onConfirm } = this.$mp.component.data
      this.close()
      onConfirm(e);
    },
    cancel(e){
      // 同上
      const { onCancel } = this.$mp.component.data
      this.close()
      onCancel(e);
    }
  },
  created() {},
  mounted() {}
}
</script>

 

经过简单的扩展后, 就可以愉快的使用了,

再也不用 比如用户点了确认, 然后 this.$emit(‘okay’,xxx), 父组件 接收 okay 的回调,再去处理业务逻辑了,

现在直接可以

1
2
3
4
5
message.alert('你好呀, 我是传入的内容').then(_=>{
  // 点了确认后的业务逻辑
}).catch(_=>{
  // 点了取消后的业务逻辑
})

 

分享到:更多 ()

相关推荐

  • 教你在npm上发布自己的vue组件
  • 关于对逐帧动画的一次研究
  • 关于如何获取浏览器的设备指纹的调研
  • 关于对fluent-ffmpeg的一次简单尝试
  • 记录一个比较好用的 nodejs 压缩与解压包
  • Git忽略规则(.gitignore配置)不生效原因和解决
  • 微信小程序插件入门教程
  • javascript中new URL()属性,轻松解析url地址

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • call_user_func_array 这个函数什么时候用-雅荷心语博客call_user_func_array 这个函数什么时候用2016-09-02评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
2022年7月
一 二 三 四 五 六 日
« 六    
 123
45678910
11121314151617
18192021222324
25262728293031

最新评论

  • 前端小武 5年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 5年前 (2017-03-03)说:
  • Dawn 6年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 6年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 6年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2022 雅荷心语博客   网站地图

emlogdux_heademlogdux_footer