网站建设资讯

续:给小程序加上人性化的「添加到我的小程序」提示的N种方案

行业新闻 2020-06-19 14:42:19 | 阅读:0


上次写了一篇给《给小程序加上人性化的「添加到我的小程序」提示》,收到了很多用户的喜欢,也收到了很多反馈。

需求都是各种各样的。


有的不想要有引导,有的不需要长时间提示,有的只要一次性。

所以今天为大家介绍其他的方案,满足各位的需求。


方案1:纯代码模式

在index.wxml文件,加入以下代码

<cover-view class = "guideBackground" wx:if = "{{isTiptrue}}">  	       
  <cover-view class = "guideInfo">    
    <cover-view class = "guideText"> 点击右上角 </cover-view>    
    <cover-view class = "curcleL"></cover-view>    
    <cover-view class = "curcleM"></cover-view>    
    <cover-view class = "curcleL"></cover-view>    
    <cover-view class = "guideText"> 添加到我的小程序 </cover-view>
  </cover-view>
  
  <cover-view class = "guideClose" bindtap = "closeGuide">    
    <cover-view class = "closeText"> × </cover-view>  
  </cover-view>
</cover-view>


在index.wxss文件,加入以下代码

.guideBackground {  
  width: 80%;  
  height: 70rpx;  
  z-index: 99999;  
  position: fixed;  
  top: 0;  
  border-radius:35rpx;  
  margin-top: 20rpx;  
  margin-left: 10%;  
  margin-right: 10%;  
  background-color: rgba(22, 23, 24, 0.5);  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;
}

.guideInfo {  
  width: 90%;  
  height: 100%;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;
}
.guideClose {  
  width: 10%;  
  height: 100%;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;
}
.closeText {  
  font-size: 100%;  
  color: white;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;  
  width: 100%;
}
.guideText {  
  font-size: 80%;  
  color: white;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;  
  margin-left: 20rpx; 
  margin-right: 20rpx;
}
.curcleL {  
  height: 8rpx;  
  width: 8rpx;  
  border-radius: 4rpx;  
  background-color:white;
}
.curcleM {  
  height: 12rpx;  
  width: 12rpx;  
  margin-left: 8rpx;  
  margin-right: 8rpx;  
  border-radius: 6rpx;  
  background-color:white;
}

在index.js文件,加入以下代码

Page({
  data: {    
    // data中添加变量
    isTiptrue: true
  },

  onLoad: function () {
  // onLoad中添加以下代码
  let firstOpen = wx.getStorageSync("loadOpen")    
  if (firstOpen == undefined || firstOpen == '') { // 根据缓存周期决定是否显示新手引导      
    this.setData({ isTiptrue: true })    
  } 
  else {      
    this.setData({ isTiptrue: false })    
  },

  // Page中添加关闭引导
  closeGuide: function (e) {    
    wx.setStorage({      
      key: 'loadOpen',      
      data: 'OpenTwo'    
    })    
    this.setData({ isTiptrue: false }) 
  },
  
})

方案2:mini-add-tips

1:下载组建

GitHub链接下载:https://github.com/MakerGYT/mini-add-tips

git

git clone https://github.com/MakerGYT/mini-add-tips.git

将项目中components/add-tips文件夹拷贝到组件路径下

2:引入组建

在使用该组件的页面对应json文件中添加:

{  "usingComponents": {    "add-tips":"/components/add-tips/index" 
  }
}

3:使用组建

<!-- index.wxml -->

<add-tips name="示例"/>

属性列表

属性类型默认值必填说明
nameString测试小程序名称
logoString小程序Logo
durationNumber10持续显示时间(s)
customBooleanfalse当前页面是否{"navigationStyle": "custom"}

开发说明

鉴于目前微信基础库的设计:

  1. 收藏操作与添加到我的小程序对于用户容易混淆,但效应一样,故没必要具体引导用户。目前只有监听用户点击右上角菜单“收藏”按钮的行为,但实际上兼听不到收藏行为,只能定义收藏内容

  2. 无法获知是否已经收藏、是否已经添加到我的小程序,故提示可能对用户造成干扰。

  3. 目前没有可以调起添加小程序的api、button,或许出于"降低干扰度"的考虑,但就迫使手动设置引导,又会造成如2中所述干扰。

  4. 即便已经设置{"navigationStyle": "custom"},其导航栏相关的api依然调用是有效的,无论组件还是页面内均无法据此获知导航栏是否custom,只能由外部传入。






相关资讯

联系电话 1588-022-8825

服务号咨询

联系我们

×

微信咨询

联系点艾科技,免费获取方案及报价

1588-022-8825