SteemJS开发的难与易

steemjs2.jpg

这两天把SteemJS的开发库啃了个遍,几乎所有的函数都测试了下,过程倒也通畅!JS的函数挺全的,所有的功能几乎都有,这也算是学习和开发中的容易的部分吧。

难的部分自然就是函数的手册确实困难,官方只是罗列了一堆函数,咋用,没说,都是长这样的:

1
2
3
4
5
6
7
8
9
Set Subscribe Callback
steem.api.setSubscribeCallback(callback, clearFilter, function(err, result) {
console.log(err, result);
});

Set Pending Transaction Callback
steem.api.setPendingTransactionCallback(cb, function(err, result) {
console.log(err, result);
});

看到这样的手册确实抓瞎,幸好社区中早有人做了一些注释,结合着慢慢啃完,倒也有些心得了。比如,获取某作者的最近的文章列表:

1
2
3
4
5
6
7
8
9
10
getPosts(){
let that = this;
let beforeDate=new Date().toISOString().split('.')[0];
console.log(111, beforeDate);
let author = "lemooljiang";
this.steem.api.getDiscussionsByAuthorBeforeDate(author, null, beforeDate, 100, function(err, result) {
console.log(567, err, result);
that.posts = result;
});
},

使用这个函数可以一次最多能取100篇文章,再多就要拼接了。因为都是Promise函数,用for循环去拼接老是出错,到现在还没解决,这也算是难的部分了。

很多时候不好排错,对于新手更是如此。SteemJS国内的开发社区相对比较少,我也只看到村长有在用,其他人就不知道了。

学习了几天的体会是用SteemJS来开发并不太难,有JS的基础,加上Vue.js的知识就够啰。开发个博客,做个小应用什么的也是妥妥地!

大家用steem最核心的功能也就是发贴、回复和点赞,我会试着把这三者简单地实现,来个精简的博客!

SteemJS + Vue.js + ipfs.js 可以开发出一些更有应用价值的东东,我也在尝试中!


This page is synchronized from the post: ‘SteemJS开发的难与易’

Markdown语法规范(修订)

markdown.jpg

Markdown

目录


简介

Markdown 轻量化的标记语言,一种适用于网络的书写语言。Markdown 是一个面向写作的语法引擎,Markdown 的最终目的都是解析成 HTML 用于网页浏览,所以它兼容 HTML 语法,即你可以在 Markdown 文档中使用原生的 HTML 标签。

本文分三部分:基础语法,高级点的语法和好用的HTML标签。

一、基础语法

1.标题设置

在文字开头加上 “#”,后接一个空格。通过“#”数量表示几级标题。(一共只有1~6级标题,1级标题字体最大),如下:
注意:后要加空格

1
2
3
# 一级标题
## 二级标题
### 三级标题

2.首行缩进

中文在排版时首行都有缩进两格,或是编辑时要有多个空格。

实现方法:

  1. 编辑器中要在全角状态下才能输入空格!在中文输入法时用shift+空格键切换成全角,再输入两个空格。
  2. 使用HTML空格标签:  ,直接在行首加入 ,需要几个加几个。

3.引用文字

在句首加上”>”即可。格式如下:> 引用文字,结束时换行。如下:

>这是毛主席说的,枪杆子里出政权。

4.斜体和粗体文字

将需要设置为斜体的文字两端加或是_ ;粗体的文字两端加*或__,(注意:文字两端不能有空格),如下:

1
2
3
4
*这是一段斜体文字*
**这是一段粗体文字**
_这是一段斜体文字_
__这是一段粗体文字__

5.分割线

****

6.删除线

~~删除线~~

7.无序列表

在文字开头添加(, +, 或 -)实现无序列表。注意在(, +, 或 -)和文字之间需要添加空格。如下:

1
2
* 花生
* 柿子

8.有序列表

使用数字后面跟上点号.(还要有空格)如下:

1
2
1. 第一条
2. 第二条

9.链接(Links)

Markdown中有两种方式实现链接,行内式链接和参考式链接

  1. 行内式链接:[文章名](文章url)。例如:
    [新人生存指南之一:steem介绍](https://steemit.com/steemit/@lemooljiang/3f5j36-steem)

  2. 参考式链接,例如:

    1
    2
    3
    4
    5
    关于markdown的语法有可以参考这三篇文章,oflyhigh的[《使用Markdown来让你的文章更易于阅读、更美观》][1] 和lemoojiang的[《图文编辑三板斧》][2] ,还有 carinewhy的[《新手教學-在steemit内改變圖片大小和圖片排位的方法》][3]。
    ...
    [1]: https://steemit.com/cn/@oflyhigh/markdown
    [2]: https://steemit.com/cn/@lemooljiang/4mddsq
    [3]: https://steemit.com/cn-tutorial/@carinewhy/625apt-steemit

10.图片(Images)

图片的处理方式和链接的处理方式,非常地类似(前面加!),有行内式链接和参考式链接。

  1. 行内式链接:![图片名称](图片url),例如:
    ![sea](https://steemitimages.com/DQmS5CXgThWGHKzmzU5ombr87dWXzvPXpVsTBowkNKjtWuU/sea.jpg)
  1. 参考式链接:
    1
    2
    3
    4
    5
    ![名称1][id1] 
    ![名称2][id2]
    ...
    [id1]:图片url
    [id2]:图片url

11.视频(videos)

利用视频服务器的插入代码,例如:

<iframe width="560" height="315" src="https://www.youtube.com/embed/1eTj_TGJMvw" frameborder="0" allowfullscreen></iframe>

12.表格

下面的例子是设计三列的表格,要几列,就用几个“|”分隔。

1
2
3
4
序号|内容|作者        
------------|------------|------------
1|天龙八部|金庸
2|绝代双娇|古龙

效果如下:

序号 内容 作者
1 天龙八部 金庸
2 绝代双娇 古龙

13.页内锚点

1
2
3
<a href="#2">钱包介绍</a>
......
<a id="2">2、钱包介绍</a>

14.使用目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1、手动添加
## 目录
* [一、基础语法](#一、基础语法)
1. [标题设置](#1.标题设置)
2. [serializer](dates/serializer.md))
* [二、高级点的语法](#二、高级点的语法)
1. [反斜杠](##2.反斜杠)
2. [目录](###14.目录)

2、使用Markdown TOC自动生成
2.1 在VScode拓展中安装 Markdown TOC
2.2 在需要生成目录的地方鼠标右键选择刚才安装的扩展功能,Markdown TOC:Insert/Update。
2.3 如果TOC标签的目录格式异常,可略做调整。settings -> 搜索设置里面搜索Eol -> 将auto更改为 \n 换行符即可。
2.4 缺点:会错误地获取带 # 的文字 ,还有无法获取长文件的目录。

二、高级点的语法

1.代码区块(HTML中所谓的Code)

1
2
3
4
5
a. 单行
使用 ` 括起来。(左上角的ESC下面~中的`)
b. 多行
使用三个连续的 ` 括起来 ,如下:
``` 这是代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

### 2.反斜杠

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号,例如:如果你想要用星号加在文字旁边的方式来做出强调效果,如下:

`\*这是需要强调的部分\*`


## 三、好用的HTML标签

### 1.文字居中

用HTML的一对标签来实现,就是`<center>`。格式如下:

`<center><h2>这是标题(文字)</h2> </center>`


### 2.分栏排版
段落分成两列或是三列排版,可以用`<div>`或`<table>`标签来实现。
两栏的版式:

第一种:
`<div class="pull-left">这是文字部分1</div>这是文字部分2`
注:steemit上支持这种写法的。

或者使用 style 来控制:
`<div style="width:50%; float:left; margin-right:12px">这是文字部分1</div>这是文字部分2`


第二种:






这是文字部分1 这是文字部分2

1
2

三栏的版式







这是文字部分1 这是文字部分2 这是文字部分3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
注:以上样式中都可以加上 style 属性来加强控制,但各个网站对 style 属性的支持度是不一样的(steemit,github都不支持),请自行调试后使用。


### 3.图文混排

第一种:使用div
`<div class="pull-left"><img src="https://cn.bing.com/tt.jpg"</div>这是文字部分`
注:steemit上支持这种写法。

第二种:给 img 加上style属性:
`<img src="https://cn.bing.com/tt.jpg" style="width:200px; float:left; margin-right:12px">这是文字部分`


### 4.其它支持的标签

(1)

这是标题


(2)
换行
(3)
水平线
(4)这是粗体
(5)删除的文本
(6)代码块

(7)加强的文本
(8)这是强调
(9)这是斜体
(10)
引用的文本

(11)这是下标文本(小号字)
(12)百度
```

@lemooljiang 2019.10.15


This page is synchronized from the post: ‘Markdown语法规范(修订)’

steemjs初体验 / 网络研习社#41

steemjs.jpg

有了前面Vue前端开发的一些基础,就可以试着用steemjs来开发一些应用了。

查看下steemjs的开发文档 https://github.com/steemit/steem-js/tree/master/doc#install ,除了会安装之外,确实不知怎么做,难怪村长 @ericet 要自己动手写开发文档了。参考村长的文章 《怎么用JS写个发帖程序》 ,还有另一位作者 @lonelywolf 的文章 SteemJS手册 ,几篇文章对照着一起看,倒也基本上弄明白怎么做了。

使用steemjs大概要四步:

  1. 安装steemjs的包
    当然前提是已经有了Nodejs环境,Vue也能跑起来。install steem --save ,这么一步就可以装上steemjs了。
  2. 导入
    import steem from 'steem'
  3. 连接API
    steem.api.setOptions({ url: 'https://api.steemit.com' });
  4. 使用
    到了这里就可以正常使用API的各种方法了,比如发个贴,点个赞什么的。用它发个贴试试。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    steem.broadcast.comment(
    "5KYYsbK34wZXXXXXXXXXXXXXXXXXXXXXXXXL",
    "",
    "test",
    "cn-book",
    "cn-test-2019",
    "it's a test",
    "steemjs test post",
    '{"tags": "test", "app": "steemit/0.1", "users": ["cn-book"], "format": "markdown"}',
    function(err, result) {
    console.log(123, err, result);
    });

好了,发贴成功了,去网站看看效果吧, https://steemit.com/test/@cn-book/cn-test-2019


This page is synchronized from the post: ‘steemjs初体验 / 网络研习社#41’

周末影院:《狮子王2019》,“哈姆雷特”归来,重拾旧情怀

lionking.png

小狮子辛巴

《狮子王2019》虽是一部重新制作的电影,剧情方面没有太大修改,但是制作得更加精良、更加写实!当“狮子王”的歌一放,好像又重新回到当年第一次观影时地感动。

故事是在动物身上套用了《哈姆雷特》的架设:叔叔谋杀了父亲,霸占了王位。侄子回归、矢志复仇!这样比喻地演绎使故事更生动和丰满,不愧是风靡多年的故事。

lionking3.png

快乐的三人组

lionking4.png

辛巴长大后回归,向叔叔复仇,重新夺回王位!

重制的电影使用了新的三维技术,形象和场景更为逼真,不仔细看还以为是实拍呢。当然,让人感动的是里面所蕴含的哲理:生命是一个轮回,我们的职责在于守护!


This page is synchronized from the post: ‘周末影院:《狮子王2019》,“哈姆雷特”归来,重拾旧情怀’

Vue治理地条理化 / 网络研习社#40

三权分立

vue-style.jpg

不同于早期html的混乱状态(所有的代码都挤在一起),Vue提供了一种清晰地治理方式。如上图所示,一个页面被分成三块:前端模板 、业务逻辑和显示样式,将功能分区治理。联系我的上一篇文章《Vue用法的城市化比喻》,前端设计越加贴近人的真实思维方式,和现实中的治理有异曲同工之妙。

数据中心–data

vue-data.jpg

Vue不提倡自带数据,它希望所有的数据都在一起管理,这个就是data的作用。如上图所示,前端要获取数据,直接使用插值表达式 {{ msg }} 这样来获取就可以了。在业务逻辑中 使用this.msg这样来获取。这样集中管理数据会有很多设计上的便利性。

行政中心–methods

1
2
3
4
5
methods:{
setMessage(){
this.msg = 'this is a big thing';
}
}

所有的业务逻辑都被安放在methods中,你想要做什么通过它们就可以了,类似于行政中心。

市长印章–this

因为数据和函数都有所谓的作用域,之间是不能互相通信的,也 就是说 B函数不能调用A函数中的数据。如果要相互调用应该怎么办呢?

我们在生活中都有经验,身份证要有效必须要盖上无数个章,这使得它有合适的法理性。同理,数据或函数要在任意地方被调用,也必须具备法理性,这个法理性就是加上this,我们可以形象地把它看为市长印章,我们要在哪里调用,直接加个this就可以了,比如这样:this.msg , this.func

当然,还有其它地治理,这里先提这么多,大家可以自行拓展。


This page is synchronized from the post: ‘Vue治理地条理化 / 网络研习社#40’

Vue用法的城市化比喻 / 网络研习社#39

vue-city.jpg

App.vue是Vue生成的挂载在index上的实例,它是作为一个根容器,所有的页面都会渲染成一个页面(SPA)。用到现在,突然有点联想,这其实和一个城市的运作是何其的相似!

在上图中,大家可以感受下这个形象地比喻:都是一个独一无二的实例,都是分区治理,都有相似的理念和治理方法。比如下面这种一一对应的关系:

1
2
3
4
5
6
7
#App => 广州市
各个组件 => 分布的区域
div等节点 => 市民
data => 数据中心
methods => 行政中心
v-model => 绑定银行卡
this => 市长印章

这种对应还有更多地想像余地,关键是通过这种比喻可以形象地理解Vue的很多设计思想。

现在很多新的语言(比如python , golang),还有一些设计框架,都是在原有的基础上封装了对象的概念,这样就有更好的设计性和更好的理解性,因为人们就是这样理解世界的。而语言又是描述世界的工具,还原世界的面貌。所以,如果语言和世界有更好的相似性和想通性,就能更好地促进彼此地理解。

得益于最近学习Vue的一些心得,想到了一些形象化的比喻,我觉得还不错。后面还将有一些图示,明天补上。


This page is synchronized from the post: ‘Vue用法的城市化比喻 / 网络研习社#39’

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×