首页

超级实用的干货 . 《 部署智能合约到conflux公链 》

前端达人

找到了一位大佬的文章,受到了许多启发


一、准备合约

本节课程教大家如何讲智能合约部署到conflux公链上,首先大家可以看到下面的这个智能合约是不是很简单。我们将会以这个合约演示部署到conflux公链的过程。

pragma solidity ^0.5.0;

contract Counter {
    uint public count=0;
    event SelfEvent(address indexed sender, uint current);

    constructor() public {
    }

    function inc(uint num) public returns (uint){
        return count += num;
    }

    function self() public {
        emit SelfEvent(msg.sender, count);
    }
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

二、conflux的sdk安装

我们使用js-conflux-sdk作为本教程的web教程,交互首先我们需要进行安装nodejs作为我们的运行环境。飞机票一张收下吧,我们安装好nodejs后,就可以来玩我们的sdk了。废话不多说,直接开始撸。

我们使用WIN + R键打开命令行,然后创建一个文件夹(温馨提示切换到非系统盘玩切换方式“D:”就切换到D盘了)使用“mkdir my-project && cd my-project” 创建好项目后自动进入文件夹,然后我们运行“npm init” 进行初始化node项目,这一步会让你确认一些东西,如果你是小白一路回车(Enter键)就好。如果你是前端大神,我也没啥好教的我也不太懂。为了稳定我们使用固定版本号方式安装依赖,我们运行 “npm install js-conflux-sdk@0.9.2” 命令进行安装js-conflux-sdk的0.9.2版本依赖(可以使用“npm uninstall package-name” 命令删除对应依赖)。前置准备到这里基本已经完成。

三、编写调用合约js代码

下面请看我的目录结构跟随我一起来学习,下面的目录结构请不要直接看到了就创建,因为你不知道都是什么意思,看玩我的解释在回头创建。

image

小伙伴应该已经发现了 node_modules、package-lock.json、package.json 这些文件是我们在进行安装 sdk依赖时自动生成的。其他文件目前都没有,我们来按顺序生成他们。

先创建sol这个文件夹,然后创建这三个文件。test.sol就是上面我们的合约代码直接拷入文件中。abi.json和code.json两个文件是通过这个工具 remix 在线生成的。我来说下生成过程。
首先我们将里面的文件全部删除,然后点击这里找到我们的项目目录下的test.sol 文件

我们应该看到下方我框出来的两个按钮了吧,那两个按钮就是abi.json和code.json文件的来源。abi.json我们可以直接复制过去,code.json文件我们要改点东西。

首先我们看到的code文件应该是这样的

{
    "linkReferences": {},
    "object": "608060405260...c63430005110032",
    "opcodes": "PUSH1 0x80 PUSH1 ... 1100 ORIGIN ",
    "sourceMap": "27:337:0 ... 37;;;;;;"
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

代码有省略,太长不好看,我们看到object这个key值了吧,我们把它的值考出来然后在头部加0x 就好了放在code.json文件中。code.js文件中只存放object的内容前面加0x,也就是下面的代码,其他信息都不要,千万记住了。这点很重要!!!!

"0x608060405260...c63430005110032" 
  • 1

就是这样的。然后我们在写另外两个call和deploy两个文件

先写deploy文件

 // 私钥地址
const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e';
// 合约地址
const CONTRACT = '';
const { Conflux } = require('js-conflux-sdk');

async function main() {
  const cfx = new Conflux({
    url: 'http://mainnet-jsonrpc.conflux-chain.org:12537',
    defaultGasPrice: 100,
    defaultGas: 1000000,
  });
  const account = cfx.Account(PRIVATE_KEY); // create account instance
  console.log(account.address); 

  // create contract instance
  const contract = cfx.Contract({
    abi: require('./sol/RC20.abi.json'),
    bytecode: require('./sol/RC20.code.json'),
  });

  const receipt = await contract.constructor()
    .sendTransaction({ from: account })
    .confirmed();
  console.log(receipt.contractCreated); 
}
main().catch(e => console.error(e)); 
  • 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

打开项目cmd窗口在上面的目录下 运行命令 “node deploy.js”就将合约部署上去了

receipt.contractCreated 这个会打印出合约地址。




分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
来源:csdn
作者:
原文链接:https://blog.csdn.net/pizhi1461/article/details/106967255

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

yarn的安装和使用

前端达人

yarn的简介:

Yarn是facebook发布的一款取代npm的包管理工具。


yarn的特点:

  • 速度超快。
    • Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
  • 超级安全。
    • 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。
  • 超级可靠。
    • 使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。

yarn的安装:

  1. 下载node.js,使用npm安装
    npm install -g yarn
    查看版本:yarn --version
  2. 安装node.js,下载yarn的安装程序:
    提供一个.msi文件,在运行时将引导您在Windows上安装Yarn
  3. Yarn 淘宝源安装,分别复制粘贴以下代码行到黑窗口运行即可
    yarn config set registry https://registry.npm.taobao.org -g
    yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn的常用命令:

  • 安装yarn

    • npm install -g yarn
  • 安装成功后,查看版本号:

    • yarn --version
  • 创建文件夹 yarn

    • md yarn
  • 进入yarn文件夹

    • cd yarn
  • 初始化项目

    • yarn init // 同npm init,执行输入信息后,会生成package.json文件
  • yarn的配置项:

    • yarn config list // 显示所有配置项
    • yarn config get <key> //显示某配置项
    • yarn config delete <key> //删除某配置项
    • yarn config set <key> <value> [-g|--global] //设置配置项
  • 安装包:

    • yarn install //安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock
    • yarn install --flat //安装一个包的单一版本
    • yarn install --force //强制重新下载所有包
    • yarn install --production //只安装dependencies里的包
    • yarn install --no-lockfile //不读取或生成yarn.lock
    • yarn install --pure-lockfile //不生成yarn.lock
  • 添加包(会更新package.json和yarn.lock):

    • yarn add [package] // 在当前的项目中添加一个依赖包,会自动更新到package.json和yarn.lock文件中
    • yarn add [package]@[version] // 安装指定版本,这里指的是主要版本,如果需要精确到小版本,使用-E参数
    • yarn add [package]@[tag] // 安装某个tag(比如beta,next或者latest)

    //不指定依赖类型默认安装到dependencies里,你也可以指定依赖类型:

    • yarn add --dev/-D // 加到 devDependencies
    • yarn add --peer/-P // 加到 peerDependencies
    • yarn add --optional/-O // 加到 optionalDependencies

    //默认安装包的主要版本里的最新版本,下面两个命令可以指定版本:

    • yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版,但是yarn add foo@1.2.3 --exact只会接受1.2.3版
    • yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9,但不接受1.3.0
  • 发布包

    • yarn publish
  • 移除一个包

    • yarn remove <packageName>:移除一个包,会自动更新package.json和yarn.lock
  • 更新一个依赖

    • yarn upgrade 用于更新包到基于规范范围的最新版本
  • 运行脚本

    • yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本
  • 显示某个包的信息

    • yarn info <packageName> 可以用来查看某个模块的最新版本信息
  • 缓存

    • yarn cache
      • yarn cache list # 列出已缓存的每个包 yarn cache dir # 返回 全局缓存位置 yarn cache clean # 清除缓存

npm 与 yarn命令比较:

这里写图片描述


npm 与 yarn相关问题比较:

npm模块的依赖:
  • npm存在一些历史遗留问题,请看下图:
    这里写图片描述

比如说你的项目模块依赖是图中描述的,@1.2.1代表这个模块的版本。在你安装A的时候需要安装依赖C和D,很多依赖不会指定版本号,默认会安装最新的版本,这样就会出现问题:比如今天安装模块的时候C和D是某一个版本,而当以后C、D更新的时候,再次安装模块就会安装C和D的最新版本,如果新的版本无法兼容你的项目,你的程序可能就会出BUG,甚至无法运行。这就是npm的弊端,而yarn为了解决这个问题推出了yarn.lock的机制,这是作者项目中的yarn.lock文件。

yarn.lock文件格式:

这里写图片描述

大家会看到,这个文件已经把依赖模块的版本号全部锁定,当你执行yarn install的时候,yarn会读取这个文件获得依赖的版本号,然后依照这个版本号去安装对应的依赖模块,这样依赖就会被锁定,以后再也不用担心版本号的问题了。其他人或者其他环境下使用的时候,把这个yarn.lock拷贝到相应的环境项目下再安装即可。
注意:这个文件不要手动修改它,当你使用一些操作如yarn add时,yarn会自动更新yarn.lock。

使用yrm工具管理一些npm源

安装

  • yarn global add yrm

查看可用源

  • yrm ls

选择源

  • yrm use yarn

快速删除node_modules

手动删除真的很慢:

  • 安装: npm install rimraf -g
  • 使用:rimraf node_modules

rimraf是node的一个包,可以快速删除node_modules,再也不用等半天了


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
来源:csdn

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

npm,cnpm,yarn,tyarn 区别 与安装

前端达人



做前端的应该都用过标题提到的包管理器。简单说一下这4个包管理器的区别。

npm

这应该是最常用的,在某些情况会出现丢包,而且由于某种原因会下载很慢,通常会配置国内镜像。我已经很少用npm了,主要用它下载 cnpm 或 yarn。

cnpm

这个就是npm的国内镜像了。

yarn

它和npm最大区别是,yarn是并行下载的,所以下载速度很快,当然也是要配置国内镜像。

tyarn

这个就是yarn的国内镜像了。淘宝开发的。我主要就是用 tyarn。



一、安装

1.1 安装node.js

下载地址,选择自己的安装位置,一直next即可。

:.msi安装程序会自动添加node.js路径到系统环境配量


image.png

安装完成目录结构:


# 查看版本号
H:\Users\M>npm -v
6.4.1

H:\Users\M>node -v
v10.15.1 

1.2 安装cnpm

打开cmd命令窗口,执行:

npm install -g cnpm --registry=https://registry.npm.taobao.org
# 默认cnpm会会安装在自己的用户下面,并且自动配置了用户环境变量
# 比如我的安装在:H:\Users\M\AppData\Roaming\npm 
# 查看版本号
H:\Users\M>cnpm -v
cnpm@6.0.0 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.8.0 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib
\npm.js)
node@10.15.1 (D:\Develop\nodejs\node.exe)
npminstall@3.20.2 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\node_modules
\npminstall\lib\index.js)
prefix=H:\Users\M\AppData\Roaming\npm
win32 x64 6.1.7601
registry=https://registry.npm.taobao.org 

1.3 安装tyarn

# 国内源 $ cnpm i yarn tyarn -g #  $ tyarn -v 

1.4 安装umi

$ tyarn global add umi
$ umi -v 

1.5安装静态服务

cnpm install -g serve 
0人点赞

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
来源:csdn 与 简书
作者:境与界
链接:https://www.jianshu.com/p/647328be9491
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



el-date-picker时间插件获取值格式问题

前端达人

最近在使用vue el-date-picker时间控件,发现直接获取的时间是日期格式,而我需要的格式是

yyyy-MM-dd HH:mm

那么如何转换时间控件格式呢

<el-date-picker 
v-model="selectDatetime"
 type="datetime" placeholder="选择时间"
 @change="dataSearch" value-format="yyyy-MM-dd HH:mm" 
format="yyyy-MM-dd HH:mm"> </el-date-picker>

在日期控件中,加入上述加粗格式即可




分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
来源:csdn

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Vue实现ul中item 删除

前端达人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    {{msg}}
    <div>
        <input v-model="txtValue">
        <button type="button" @click="handleSubmit">提交</button>
        <ul>
            <li v-for="(item,index) of list"
                :key="index"
                :index="index"  @click="deleteItem(index)" //传递下标值 >
                {{item}}
            </li>
        </ul>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello Vue!!',
            txtValue: '',
            list: []
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.txtValue)
                this.txtValue =''
            },
            deleteItem: function (index) {
                //alert(index)
                this.list.splice(index,1) //通过下标删除 }
        }
    })
</script>
</body>
</html>




分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
来源:csdn

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

github 22个优秀的React项目

前端达人

React Native :

  1. https://github.com/fbsamples/f8app
  2. https://github.com/iSimar/HackerNews-React-Native
  3. https://github.com/catalinmiron/react-native-dribbble-app
  4. https://github.com/FaridSafi/react-native-gifted-messenger
  5. https://github.com/7kfpun/FinanceReactNative
  6. https://github.com/race604/ZhiHuDaily-React-Native
  7. https://github.com/lwansbrough/react-native-camera
  8. https://github.com/xiekw2010/react-native-gitfeed
  9. https://github.com/wwayne/react-native-nba-app
    10 . https://github.com/akveo/react-native-reddit-reader
    11 . https://github.com/faridsafi/react-native-basketball

React :

  1. https://github.com/andrewngu/sound-redux
  2. https://github.com/benoitvallon/react-native-nw-react-calculator
  3. https://github.com/casesandberg/react-color
  4. https://github.com/gatsbyjs/gatsby
  5. https://github.com/getsentry/sentry/
    6 . https://github.com/gpbl/isomorphic500
    7 . https://github.com/insin/react-hn
    8 . https://github.com/fatiherikli/fil
    9 . https://github.com/khan/perseus
    10 . https://github.com/BinaryMuse/imgsible
  6. https://github.com/skidding/flatris
    12 . http://www.amazon.com/gp/product/1491929006?ie=UTF8&camp=1789&creativeASIN=1491929006&linkCode=xm2&tag=mybridge-20



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
作者:吴博
链接:https://www.jianshu.com/p/2dc805c6c007
来源:简书

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

CSS3实现自定义Checkbox和Radiobox

前端达人

我们知道浏览器自带的Checkbox复选框不怎么美观(这或许是我们看习惯了的缘故),而且复选框在不同的浏览器上显示的样式又有很大的差异,由于目前越来越多的人开始接受支持CSS3的现代浏览器,所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式,个人觉得比浏览器自带的Checkbox美观不少。

下面先来看一下最终实现效果

效果演示地址

效果图如下

 

下面来分析一下源代码,原理很简单,先把页面上<input type="checkbox" />的display设置为none,从而把它隐藏掉,然后利用CSS3代码来绘制与checkbox邻近的label元素:

HTML代码:

<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

CSS3代码:

复制代码
.regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative;
}
复制代码

下面的CSS代码可以让checkbox选中后出现阴影的效果,主要利用了box-shadow属性:

.regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

radiobox的实现也是同样的原理,具体实现方式大家可以在线演示研究,也可以下载源码,非常简单实用。

分类: HTML5/CSS3



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

vue.js学习之 如何在better-scroll加载完成后,自动滚动到最底部(示例代码)

前端达人

作者:_林冲

简介  这篇文章主要介绍了vue.js学习之 如何在better-scroll加载完成后,自动滚动到最底部(示例代码)以及相关的经验技巧,文章约1091字,浏览量459,点赞数3,值得参考!

 

首先我们需要使用scrollTo这个方法:

scrollTo(x, y, time, easing)

参数:

  • {Number} x 横轴坐标(单位 px)
  • {Number} y 纵轴坐标(单位 px)
  • {Number} time 滚动动画执行的时长(单位 ms)
  • {Object} easing 缓动函数,一般不建议修改,如果想修改,参考源码中的 ease.js 里的写法

 

为了组件的复用性,我们需要在scroll组件的props添加一个flag,可以监听父元素是否开启滚动到最底部。

scrollToEndFlag: {
        type: Boolean,
        default: false
}


接下来我们在scroll组件的mounted中加入如下代码:

setTimeout(() => {
        this._initScroll()
        console.log(this.scroll.maxScrollY)
        if(this.scrollToEndFlag) {
            this.scroll.scrollTo(0,this.scroll.maxScrollY)
        }
}, 100)  


最后在父组件中使用

<scroll :scrollToEndFlag="scrollToEndFlag"> </scroll>




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

vue聊天对话框滚动条自动定位到最底部

前端达人

这么写的话只能定位到发送消息前的前一条消息,不能定位到最底部

 


  1. .then(
  2. this.$nextTick(() => {
  3. let msg = document.getElementById('chatRecord') // 获取对象
  4. msg.scrollTop = msg.scrollHeight // 滚动高度
  5. })
  6. )

解决:写在生命周期updated里面可以完美定位!


  1. updated(){
  2. // 聊天定位到底部
  3. let ele = document.getElementById('chatRecord');
  4. ele.scrollTop = ele.scrollHeight;
  5. },

 


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Vue开发聊天界面

前端达人

Vue开发聊天界面(一)

最近业务里面有个需求就是开发一个类似微信的聊天页面的H5,不需要像微信那么复杂,但是得有个样子,弄了半天之后终于有了个样子。决定写个博客记一下这个过程,希望后续不会鸽

组件拆分

拆了3个,打字的聊天item聊天list。大概就这样了

其中聊天list 用了一个better-scroll这个第三方插件。

首先第一步就是开发这个聊天item

聊天item 开发

分析一下需求,别人发过来的和我们发过去的是两个排版和样式,但是不用单独写两个,用个逻辑区分一下就可以了,也可以动态绑定css什么的差别很小。

<template> <div class="record-wrapper"> <!-- 时间,后续开发 --> <div class="time"></div> <!-- 消息, msg通用样式 msg-right/msg-left 区分排版左右 --> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <!-- 消息框, msg通用样式 message-wrapper-right/left 区分聊天框颜色 --> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> </div> </template> 

这个是只有1边的,逻辑就是在消息那边加个v-if,判断来源,也可以动态绑定css

弄好以后就这样

<template> <div class="record-wrapper"> <div class="time"></div> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> <div v-else class="msg msg-left"> <div class="img-wrapper"> <img class="img" :src="from2" /> </div> <div class="message-wrapper message-wrapper-left"> <div class="message">{{ message }}</div> </div> </div> </div> </template> <script> export default {
  name: "",
  props: {
    from: Number, // 1: 自己    2: 别人
    message: String,
    timestamp: Date,
  },
  data() {
    return {
      from1: require("../../../assets/imgs/from1.jpg"),
      from2: require("../../../assets/imgs/from2.jpg"),
    };
  },
}; </script> 

个人觉得css还是比较重要的,这里用了sass来写。主要解决方案就是用一个display:flex配合上flex-direction: row-reverse让头像和消息左右排列

<style lang="scss" scoped> .record-wrapper { margin: 4px; padding: 4px; } .time { text-align: center; } .msg { display: flex; flex-direction: row; .message-wrapper { max-width: 220px; margin: 0px 10px 0px 10px; .message { margin: 8px; word-wrap: break-word; //英文换行 } } .message-wrapper-left { background-color: lightslategray; border-radius: 0px 12px 12px 12px; } .message-wrapper-right { background-color: powderblue; border-radius: 12px 0px 12px 12px; } .img { flex: auto; height: 36px; width: 36px; border-radius: 8px; } } .msg-right { flex-direction: row-reverse; } .msg-left { flex-direction: row; } </style> 

这个是没有调样式的,只是为了自己嗨弄的,可能会很丑。
最后大概就是这样的

Vue开发聊天界面(二)

我开发好了一个聊天的item,可以根据发送方和接收方来分别渲染一个item,这一章我把他们放在一个list的界面里面,让一串item构成一个聊天页面,并且这个聊天页面能够上下滚动。

其实我觉得很简单,难点就2个。首先是滑动,这里用了better-scroll这个组件,可以在网上搜,挺好用的。另一个就是页面布局的问题,写点css还是没得问题的。
首先去better-scroll的官网,按着他的核心逻辑抄一下。不详细谈了,总之来说,会有三层嵌套。我个人命名他们为: wrapper 和content和 item 这三层。
先弄一个json,当做会被填充的数据。

export const chatItems = [ { type:1, message:"fdaf地方撒风大撒风阿斯顿飞fd阿斯顿飞安德森发大水发大水发大水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒风大撒aa风阿斯顿飞ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"做紧d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"???", from:2, timestamp: new Date() }, ] 

然后开始写vue的代码

<template> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <chat-item v-for="item in chatItems" :key="item.message" :type="item.type" :message="item.message" :timestamp="item.timestamp" :from="item.from" ></chat-item> </div> </div> </template> <script> import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel"
import ChatItem from "./ChatItem";
import { chatItems } from "../../../assets/data/items";

BScroll.use(MouseWheel)

export default {
  name: "",
  data() {
    return {
      chatItems,
      bs: null
    };
  },
  components: {
    "chat-item": ChatItem,
  },

  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.bs.destroy();
  },
  methods: {
    // better-scroll的代码
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollY: true, // 上下滚动
        click: true,   // 开启点击事件
        startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
        mouseWheel: true,   // 鼠标滚动
        probeType: 2, // listening scroll hook
      });

      // 下面的不要也行,官网抄的顺便留下来了
      this.bs.on("scroll", ({ y }) => {
        console.log("scrolling:" + y);
      });
      this.bs.on("scrollEnd", () => {
        console.log("scrollingEnd");
      });
    },
    clickHandler(item) {
      alert(item);
    },
  },
}; </script> <style lang="scss" scoped> .scroll-wrapper {
  height: calc(100% - 160px);  // 留一些空间给 打字的地方 和 header
  overflow: hidden;    // 非常之关键
} </style> 

最后是这个样子的了

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:简书。作者:Good_Nine9

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档