vue项目使用第三方评论平台“畅言”教程

vue项目使用第三方评论平台“畅言”教程

笔者最近在写自己的个人网站，但由于对于后台知识比较欠缺，又想在自己的个人网站 上加入评论功能。一开始想过用IndexDB保存用户输入的评论以及其他信息数据，再将数据保存进后台数据库，但连接数据库部分怎么说都要后台来实现。
后来发现了“畅言”这个第三方评论平台，可以实现登录、评论、评论管理等等操作，使用方法也很简单，但用上vue项目上且对于经验不多的我也遇到了一些难点，网上没有过多的资料，要自我克服。

使用方法

首先创建新的js文件，把“畅言”提供的公用代码复制进去，用export引出成包
如

 export function createComment(){
              var appid = 'cytWmGQre';
              var conf = 'prod_98601cbedcf0ecda51195654fc1683fb';
              var width = window.innerWidth || document.documentElement.clientWidth;
              if (width < 960) {
              //代码
                } })();

由于笔者的个人网站是进行了移动端适配的，所以代码使用的是网页自适应的代码，原理其实也很简单，就是判断网页宽度来判断设备是否移动端，其实这里还有很多更好的方法来代替
如下

function IsPC(){
    let userAgentInfo = navigator.userAgent;
    let Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for(let i=0;i<Agents.length;i++){
        if(userAgentInfo.indexOf(Agents[i])>0)
        {
            flag=false;break
        }
    }
    return flag;
}
let flag = IsPC(); //true为PC端，false为手机端

这段是笔者在做移动端适配时写的一段，通过判断设备类型来判断设备是否移动端，也有一定的缺陷，但比上一段代码要好很多。

后面就很简单了
在你想要使用的vue组件里import {createComment} from "./XXX" 这里XXX指的是你刚刚建立的js文件。
然后在生命周期mounted引用createComment()即可开始使用畅言评论系统了。
具体使用直接在组件里引入标签 div，id属性为SOHUCS即可。

主要遇到的问题

一开始笔者按照官方的方法，把<script> //代码 </script>直接引入，奈何templete不能直接解析该标签，后来笔者直接把<script> //代码 </script>引入根文件夹index.html，此时会得到一个无法捕获div对象的错误，此时笔者就猜想由于vue建立的是虚拟DOM，直接在根文件夹中引入会导致Vue中虚拟DOM树还没有渲染就先在官方给出的代码里进行对vue虚拟DOM树的元素进行DOM操作了。
知道这个原因后就很简单了，解决方案就是在vue项目mounted生命周期里执行createComment()进行DOM操作，原因也很简单，因为只有到了mounted生命周期，对象才挂载到html中，此时才有实际的对象进行DOM操作，否则将捕获不到需要的元素。