使用SteemJs来发表文章

rileyge (50)in #cn • 7 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。这样程序就会按照我们想要的方式运行了。