最近因为星云链主网上线推出的星云激励计划，导致nas的价格一定拉升，肯定有不少朋友感觉幸运链的DAPP挺神秘的，其实不然，这里手把手教你如何开发一款基于星云链的dapp。
星云链主页：https://nebulas.io/cn/index.html
哪类人群适合阅读本教程呢？
只要您具备 JavaScript 、 HTML 和 CSS一些基础知识，您就可以阅读本教程，进而开发出一款基于星云链的dapp。
话不多说，直接上截图：
背景图片是可以轮播变换的，这时候想象下放些从恋爱时约会、求婚、结婚、生娃、老年陪伴的图片做背景图，循环播放是不是很有感觉呢。
好了，上代码前先附上我的目录结构：
其中 lib 文件夹中的nebPay.js. 和nebulas.js 需要下载
1. 合约编写
跟以太坊类似，Nebulas实现了NVM虚拟机来运行智能合约，NVM的实现使用了JavaScript V8引擎，所以当前的开发版，我们可以使用JavaScript、TypeScript来编写智能合约。
编写智能合约的简要规范：
智能合约代码必须是一个Prototype的对象；
智能合约代码必须有一个init()的方法，这个方法只会在部署的时候被执行一次；
智能合约里面的私有方法是以_开头的方法，私有方法不能被外部直接调用；
定义文件：contract.js
"use strict";
//合约 n1eMo1ANL5DymS7saJz67ou1Z7kRTCGoULU
//hash ea3f9680c61b93262e9e031b82e676312dc53dbf82119de317bbc0af5b3b1a63
//作为单独的类，封装一些参数，这些参数都是页面提交过来或者想展示到页面上的集合体
var LoveInfo = function (arrys) {
if (arrys) {
var obj = JSON.parse(arrys);
this.mn = obj.mn;
this.wm = obj.wm;
this.ai = obj.ai;
this.now = obj.now;
this.author = obj.author;
} else {
this.mn = "";
this.wm = "";
this.ai = "";
this.now = "";
this.author = "";
}
};
//定义方法，转换成字符串
LoveInfo.prototype = {
toString: function () {
return JSON.stringify(this);
}
};
//结婚登记
var Married = function () {
//LocalContractStorage.defineMapProperty是合约存储区内定义好的方法，可以直接使用，如果有小伙伴不知道怎么使用的话下面会给个链接讲解，很容易理解的
//简单的理解就是给当前合约申明了一个属性叫love，然后love内部又有两个方法，parse和stringify对应着从区块链读取数据，后面操作区块链可以直接使用this.love调用对应的存取方法完成操作
LocalContractStorage.defineMapProperty(this,"love",{
parse : function (arrys) {
return new LoveInfo(arrys)
},
stringify: function (res) {
return res.toString()
}
});
};
//合约内定义的方法
Married.prototype = {
init:function() {
},
//保存到区块链的方法 需要传递的三个参数，男人名字，女人名字，爱情宣言，当前时间
save:function (mn,wm,ai,now) {
//做去空格处理
mn = mn.trim();
wm = wm.trim();
ai = ai.trim();
now = now.trim();
//空字符串处理
if (mn === ""|| mn === ""||mn === ""||mn === ""){
throw new Error("请检查登记信息，禁止登记空信息")
}
if (ai.length > 1024){
throw new Error("可能你们彼此只想说一句简单的'我爱你'")
}
//获取添加来自哪个地址
var from = Blockchain.transaction.from;
//这里我们设定的key是两个名字加一起的字符串
var loveInfo = this.repo.get(mn+wm);
//如果链上有信息，说明保存过，返回提示信息
if (loveInfo){
throw new Error("信息已存在链上，可直接查看婚姻状况")
}
//没有信息就添加到区块链中
loveInfo = new LoveInfo();
loveInfo.mn = mn;
loveInfo.wm = wm;
loveInfo.now = now;
loveInfo.ai = ai;
loveInfo.author = from;
//保存
this.love.put(mn+wm,loveInfo);
}
//从区块链获取的方法 我这里定义的是两个参数，拼接在一起就是要从区块链查询的key值了
get: function (mn,wm) {
mn = mn.trim();
wm = wm.trim();
if ( mn === "" ) {
throw new Error("男方姓名不能为空")
}
if ( wm === "" ) {
throw new Error("女方姓名不能为空")
}
return this.love.get(mn+wm);
}
};
module.exports = Married;
如果对上面调用的 LocalContractStorage.defineMapProperty 不太理解的可以点击下面的链接，有详细解释
智能合约存储区：https://github.com/nebulasio/wiki/blob/master/tutorials/%5B%E4%B8%AD%E6%96%87%5D%20Nebulas%20101%20-%2004%20%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6%E5%AD%98%E5%82%A8%E5%8C%BA.md
这样只能合约就写好了，是不是很简单，接下来就是部署了，部署方法也很简单，如果有不会的可以查看我前面写的文章
使用星云WEB钱包部署合约：https://www.jianshu.com/p/9c990453767c
提示：如果你们去看其他已提交的基于星云的dapp，合约都大同小异，唯一不同的就是前端页面的变化，所以，如果你的前端技术不错的话，完全可以写出几十种不同的DAPP，
2 页面编写
我这里使用到了bootstrap
婚姻登记所
婚姻登记
男方姓名：
女方姓名：
爱情宣言：
定义的 style.css 文件
.div01{
background: url("../img/love01.jpeg");
height: 830px;
animation-name:myPics;
background-size: cover;
animation-duration:30s;
/*变换时间*/
animation-delay:2s;
/*动画开始时间*/
animation-iteration-count:infinite;
/*下一周期循环播放*/
animation-play-state:running;
/*动画开始运行*/
}
/* .search {
width: 50%;
height: 50%;
margin: auto;
}
.search button {*/
/*width: 18%;*/
/*height: 30px;*/
/*margin-left: 6px;*/
/*box-shadow: 3px 5px grey, 1px 1px #333;*/
/*}
@keyframes myPics
{
0% {background:url("../img/love01.jpeg");background-size: cover;}
25% {background:url("../img/love02.jpeg");background-size: cover;}
/*50% {background:url("../img/love3.jpeg");background-size: cover;}*/
/*75% {background:url("../img/love4.jpeg");background-size: cover;}*/
/*100% {background:url("../img/love5.jpeg");background-size: cover;}*/
}
.form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}
/*阴影*/
.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
input[type="text"]{padding-left:26px;}
.checkbox{padding-left:21px;}
这样前端页面部分也就完成啦，现在让我测试下：
打开index.html
大功告成！！！！！！
如果有心的哥们，肯定会发现我没有写查询的方法，因为时间紧张还有其他事要做，这块就留给你们了。还是那句话，在我看来前端技术好了，写星云的dapp很简单。
另：如果你也想赢取星云dapp开发奖，可以去找些现成的项目改成合约版的啦，不说了，我要去再找些了。
版权声明：博客中的文章版权归博主所有，转载请注明出处，联系方式：lixuan111222(微信)