专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2018-08-02 作者:秩名
在授权基本信息或者手机号码时就需要小程序前置授权组件,那么需要如何开发呢。
因业务上的需求,需要在某些点击区域上增加这样一层逻辑:如果该用户没有授权基本信息 / 手机号,在点击该区域时,先弹出微信的授权弹窗,授权成功后再进行下一步的业务操作。
因为授权基本信息 / 手机号 必须使用小程序原生的的button,然后指定 open-type 后通过回调才能拿到相关信息( wx.getUserInfo() 已经不能弹窗啦,必须通过button弹窗),但是需要前置授权的点击区域样式又不一定是button的样式,所以决定使用一个透明的原生button 覆盖在点击区域之上,在视觉上实现无差别授权。通过是否授权字段来决定该按钮是否显示。
因为小程序中可能有多个需要相同授权的点击区域,所以决定用观察者模式来实现,即其中一个组件授权后,更新所有相同授权的组件,隐藏授权button。
因为需要让授权button完全覆盖在点击区域之上,所以需要让slot里面的内容撑开父级定位元素,然后授权button绝对定位在该父元素内,宽高都设为100%即可。也可以通过小程序组件的 externalClasses 从组件外部指定样式。代码如下:
.wrapper { position: relative; width: 100%; height: 100%; .auth { position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; z-index: 10; } } 复制代码
<view class="wrapper m-class"> <view bind:tap="handleTap"> <slot></slot> </view> <block wx:if="{{!authorized}}"> <button class="auth" open-type="{{openType}}" bindgetphonenumber="getPhoneNumber" bindgetuserinfo="getUserInfo"> </button> </block> </view> 复制代码
需要在组件外部绑定点击区域本身的点击事件,在已经授权的情况下会触发点击回调。
<authorization-block bind:action="callBack" m-class="xxx"> <view class="u-m"> xxxxxxx </view> </authorization-block> 复制代码
详细代码:
import event from '../../utils/event' Component({ externalClasses: ['m-class'], properties: { openType: { type: String, value: 'getUserInfo' } }, data: { authorized: false }, methods: { getPhoneNumber ({detail}) { const vm = this if (detail.errMsg === 'getPhoneNumber:ok') { /* * 获取到用户手机号后的业务代码 * */ vm._triggerEvent(detail) } }, getUserInfo ({detail: {userInfo: {avatarUrl, nickName}, errMsg}}) { const vm = this if (errMsg === 'getUserInfo:ok') { /* * 获取到用户信息后的业务代码 * */ vm._triggerEvent() } }, _triggerEvent (arg) { const vm = this /* * 触发监听器后,再触发点击区域本身的点击回调 * */ event.triggerEvent([vm.data.config.eventName], true) vm.triggerEvent('action', arg) }, handleTap () { const vm = this vm.triggerEvent('action') } }, attached () { const vm = this let config switch (vm.data.openType) { case 'getUserInfo': config = { eventName: 'userInfo' } break case 'getPhoneNumber': config = { eventName: 'phoneNumber' } break } if (getApp().globalData[config.eventName]) { vm.setData({ authorized: true }) } else { event.addEventListener([config.eventName], vm, (authorized) => { if (authorized) { vm.setData({ authorized: true }) } }) } vm.setData({ config }) }, detached () { const vm = this event.removeEventListener([vm.data.config.eventName], vm) } }) 复制代码
Hishop小程序工具开发公司长沙海商,是一家有着十年技术前沿的公司,我们以先进技术提供并解决各行业小程序开发,操作简单,支持多种社群营销活动,提供一套综合性的营销系统。以及可视化模板操作,大大减少人力物力成本。
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
分销裂变是什么 分销裂变模式是一种基于社交关系网络的营销模式,借助互联网社交工具,实现商品或服务的推广与销售增...
分销系统小程序需包含哪些核心模块? 分销系统小程序是借助社交关系链实现产品推广与销售的工具,其核心模块的设计直接...
小程序商城vs微商城,功能、体验的对比 在数字化商业浪潮中,微商城和小程序商城已成为商家开拓线上业务的热门选择。二...
如何从0到1做分销?90%品牌在用的裂变模式 分销,简单说就是品牌或商家通过发展分销者,让他们利用自身资源推广产品,达...
5种常见的小程序类型,看看你适合做哪种 小程序类型商城是一种基于小程序平台的在线购物系统,它让商家能通过小程序为...
分销小程序的6大主流模式推荐 分销小程序,是基于微信小程序开发的电商解决方案,借助微信庞大用户基础,商家将商品推...