2021-08-21-智能/百度小程序踩坑

智能小程序/百度小程序踩坑-客服功能

1.智能小程序接入客服服务非常简单，但是我第一次搞客服功能认为就跟h5一样直接引入第三方的服务，然后使用调用js文件就可以了，但是，在小程序中只能使用官方提供的客服消息，使用button调用百度 App 开放能力
详见：

• 配置第三方客服工具
• 客服消息
• 智能小程序button组件

2.我想实现的功能:点击下图中的客服tabbar,直接进行客服对话，

设计稿解析：tabbar最中间图标要比其他的大一些，底部没有文字，图标和文字整个一块是垂直方向居中的
实现手段：
1.使用小程序自带的tabbar,也就是直接在app.json中配置tabBar项，客服图标的text属性空字符串就可以
优点：快捷方便，不用写css
缺点：a、客服图标大小不能改变，b、tabbar不能使用百度App开放能力，客服功能实现不了，c、
2.自定义tabar,自己写一个tabbbar组件，在需要的地方直接引用就可以了
优点：样式可以自己写,根据设计文档的要求来就可以了，可以实现客服功能
缺点：a、页面跳转的时候，明显的闪烁、b、除了启动页面，其他页面右上角都有返回和Home按钮，点返回就会直接退出了，体验不好
（所以为了功能实现，我选择了第二种方式）

直接贴代码：

1. tabbr组件

swan:

<view class="tabbar-container">
    <block s-for="item,i in list">
        <view class="bar" s-if="{{i!==1}}" catchtap="switchTabbars" data-index="{{i}}" data-item='{{item}}'>
            <image style="width:48rpx;height:48rpx;" src="{{selected===i?item.selectedIconPath:item.iconPath}}"></image>
            <text class="tabbar-text" s-if="{{item.text!==''}}">{{item.text}}
            </text>
        </view>
        <button class="bar" s-else open-type="contact">
            <image style="width:64rpx;height: 64rpx;" src="{{item.selectedIconPath}}">
            </image>
            <text class="tabbar-text" s-if="{{item.text!==''}}">{{item.text}}
            </text>
        </button>
    </block>
</view>

swan解析：

• selected表示选中的图标，每次点击就出和 i 作比较，并且看selected是否为1，也就是下标是否相同，相同的话就切换图片地址，
• 当selected为 1 的时候，也就是和客服图标的位置下标一样的时候，就隐藏view，显示button，并在点击的同时调起开放能力，进行客服对话（不需要写方法），button组件设置open-type="contact"

js:

Component({
    properties: {
        propName: { // 属性名
            type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            value: 'val', // 属性初始值（必填）
            observer: function (newVal, oldVal) {
                // 属性被改变时执行的函数（可选）
            }
        },
        selected: {
            type: Number,
            default: 0
        }
    },

    data: {
	    //list结构就是按照app.json中tabBar的配置，直接复制属性list
	    //只需要修改pagePath就行：比如将："pages/index/index"改为"/pages/index/index"
	    //也可以直接在跳转页面的时候在url前加: '/'+ 
        list: [{
                pagePath: "/pages/index/index",
                text: "首页",
                iconPath: "/images/……",
                selectedIconPath: "/images/……"
            },
            {
                pagePath: "/pages/service/service",
                text: "",
                iconPath: "/images/tabbar/kefu.png",
                selectedIconPath: "/images/tabbar/kefu-select.png"
            },
            {
                pagePath: "/pages/……",
                text: "账号xx",
                iconPath: "/images/……",
                selectedIconPath: "/images/……"
            },
        ]
    }, // 私有数据，可用于模版渲染

    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {},

    detached: function () {},

    methods: {
        onTap: function () {
            this.setData({
                // 更新属性和数据的方法与更新页面数据的方法类似
            });
        },
        // 切换路由
        switchTabbars(e) {
	     1.   //点击tabBar按钮时切换图标样式（这里是用的图片路径切换），保证视图更新
            this.setData({
                selected: e.currentTarget.dataset.index
            })
            //当点击的按钮不是客服按钮，就进行页面跳转
            if (e.currentTarget.dataset.index !== 1) {
        2.   // 跳转页面不能再使用switchTab了，因为没有配置tabbar
                swan.reLaunch({
                    url: e.currentTarget.dataset.item.pagePath
                })
            }

        }
    }
});

样式就不多说了，直接按照设计稿或者是没有设计稿自己写样式就OK(重要的是功能~~)

页面使用

//json配置
  "usingComponents": {
        "tabbar-components": "/components/tabbar-components/tabbar-components"
    }

<!-- swan-->
<tabbar-components id="tabbar" selected='{{0}}'></tabbar-components>

/* 公共样式，只要是使用到class或id的页面都会引入一次*/
/* 固定tabbar并且始终放在页面的最底部 */
#tabbar {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
}

效果：

总结：

以上是基于在百度小程序中使用的手段，并且小程序有很多”坑“需要自己一个一个去踩，然后敲代码查资料来填补这些”坑“
但其实还有其他的方案可以来完成这个功能，
比如

1. 用uni来写项目，使用uview的组件，
2. 和产品以及UI同事商量取消这种客服对话的方式， 把它单独提出来写，这样也会解决很多问题：页面闪烁，小程序退出等
3. 使用打开小程序跳转h5的方式，因为h5不仅是自己写tabbar而且没有以上说的bug，直接引入第三方客服，在切换tabbar的时候做判断什么的就行了

---

以上就是我的踩坑经历之一，分享和记录是比较好的学习方式~欢迎指正！