使用SteemJs来发表文章

in #cn7 years ago

这是一个系列文章,现在共有三篇:

主要讲解如何使用SteemJs来操作blockchain,说的不对之处请多多谅解。

1、今天的任务

今天我就来写一个最简单的文章发布的网页,你没有看错,用这个网页你就能发文章了,再也不用担心steemit的网站打不开了(自己正常途径上网,经常遇到steemit打不开的情况)。不过,用这个写文章话会有非常糟糕的体验,😆,别说我没有告诉过你。

2、代码说话

还是老规矩,我也将代码发到SteemJsExamples/postBlogExample.html上了,有兴趣可以自己翻看。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <script type="text/javascript" src="http://tson.com/steemjs/steem.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

    <script>
        var localDiscussion = null;
        var index = -1;
        $(document).ready(function () {
            steem.api.setWebSocket("wss://steemd.steemitstage.com");
             
            $("#btnGetComments").click(function () {
                /** Broadcast a post */
                //如果permlink对话框里面已经有了,则用对话框
                var permlink = $("#steemit_tools_permalink").val();
                //这里可能会出现问题1、中文问题。2、是空问题,3、重复问题
                var username = $("#txtAuthor").val();
                var tags = $("#steemit_tools_tags").val().split(' ');
                //检查tags的对错
                var mainTag = tags[0];
                var title = $("#title").val();
                var body = $("#body").val();
                var postingWif = $("#wif").val();
                //var body = $("#tinymce").val();
                steem.broadcast.comment(
                    postingWif,
                    '', // Leave parent author empty
                    mainTag, // Main tag
                    username, // Author
                    permlink, // Permlink
                    title, // Title
                    body, // Body
                    { tags: [ tags[1],tags[2],tags[3],tags[4] ] }, 
                    // 可以直接这样输入,因为在js中,如果没有tags[4],直接为null,超过4的直接忽略
                    function(err, result) {
                        //console.log(err, result);
                        if(!err)
                        {
                            //成功
                            //return true;
                            console.log("success");
                        }
                }); 
            });
        });
    </script>
</head>
<body>
    <hr />

    <div class="expandablerVotes">
        <div>
            Author
            <input type="text" id="txtAuthor" style="width: 150px;" value="wpcomments" /> &nbsp;&nbsp;
            wif
            <input type="text" id="wif" style="width: 150px;" value="my wif" /> &nbsp;&nbsp;
            Title
            <input type="text" id="title" style="width: 150px;" value="example title" /> &nbsp;&nbsp;
            body
            <input type="text" id="body" style="width: 150px;" value="example body" /> &nbsp;&nbsp;
            Tags
            <input type="text" id="steemit_tools_tags" style="width: 150px;" value="test test1 test2 test3" /> &nbsp;&nbsp;
            Link
            <input type="text" id="steemit_tools_permalink" style="width: 150px;" value="test-test1" /> &nbsp;&nbsp;
            <input id="btnGetComments" type="button" value="Get Comments Data" />
        </div>
        <br/>
    </div>
    <br/>
    <div id="resultsTable">
    </div>
</body>
</html>

3、代码解释

有心的同学可能已经看到了,SteemJs的下载地址从之前的CDN转到了一个不知什么的网站上,就是这一句:<script type="text/javascript" src="http://tson.com/steemjs/steem.min.js"></script>。这是我的个人网站,由于我国的实际情况,在使用原有的CDN的时候经常很长时间才能下载下来,所以我把SteemJs备份到了我的个人网站上,并不影响使用。

本系列文章感觉可以改成每天一个函数了,今天的主角是:steem.broadcast.comment,有人会说了,为什么是comment啊?

如果你这么问我就要敲黑板了,这个问题讲过多少次啦???啊,其实只说过一次啊?那你还不会!!!

这个就和Steemit的数据结构有关系了,具体可以参见:用steemjs嵌套的读取文章的所有评论。用一句话说其实文章只是一个没有父结点的评论而已,所以发表文章要用到这个方法。

4、代码中的小技巧

说的就是这一句:{ tags: [ tags[1],tags[2],tags[3],tags[4] ] },我在注释中也提过,这一句是可以这样写的。如果你使用过一些强类型的语言,如java、C#、C++等,你会觉得不习惯。但在javascript中,如果tags的长度只有3或4的话,这样调用并不会引起著名的NullPointer异常,他只会输出null。这样程序就会按照我们想要的方式运行了。

5、课堂小作业

如果你看明白了今天的帖子,那么你肯定知道如何用SteemJs来发表评论了吧?自己试一下吧。

Sort:  

画风幽默的教程😄,👍👍👍

说的东西有用最关键,哈哈。

老师写的好啊,深入浅出,期待更多的教程。