使用APICloud平台实现朋友圈功能

案头见蠹鱼，犹胜凡俦侣。这篇文章主要讲述使用APICloud平台实现朋友圈功能相关的知识，希望能为你提供帮助。
一、效果展示

文章图片
?效果 css 样式如下 ?

.laoding
position: fixed;
top: -1.5rem;
left: 2rem;
width: 1.5rem;
height: 1.5rem;
z-index: 1;

.to_bottom
-webkit-animation: to_bottom 2s;
animation: to_bottom 2s;

.laoding .img
width: 1.3rem;
height: 1.3rem;
animation: rotating 0.2s linear infinite;
-webkit-animation: rotating 0.2s infinite;

@keyframes to_bottom
0%top: -4rem;
4%top: 3rem;
8%top: 4rem;
10%top: 5rem;
50%top: 5rem;
75%top: 5rem;
100%top: -1.5rem;

@keyframes rotating
to
transform: rotate(1turn);

2、点赞评论这个功能主要是样式的设计难度很小但是需要注意当屏幕滚动时需要隐藏评论框以及相关按钮。

3、导航背景透明渐变效果
实现的思路是结合 ??mescroll.js?? ??滚??动监听滚动区域距离顶部的高度该表导航栏背景和文字以及状态栏的文字颜色
?具体代码如下 ?

< header>
< div class="status-bar"> < /div>
< div class="nav">
< div class="back"> < i class="iconfont icon"> & #xe70c; < /i> < /div>
< div class="nav-title"> < /div>
< div class="camera" onclick="add()"> < i class="iconfont icon"> & #xe6aa; < /i> < /div>
< /div>
< /header>

if (h < 60)
StatusBar(light, rgba(255, 255, 255, 0));
hui(header).css( background: "rgba(255,255,255,0.0" + h + ")" )
hui(header).css( box-shadow: "1px 3px 4px rgba(0, 0, 0, 0)" )
hui(".icon").css( "color": "#ffffff" );
hui(".nav-title").html();
else if (h > = 60 & & h < = 100)
StatusBar(dark, rgba(255,255,255,0));
hui(header).css( background: "rgba(255,255,255,0.0" + h + ")" )
hui(header).css( box-shadow: "1px 3px 4px rgba(0, 0, 0, 0)" )
hui(".icon").css( "color": "#000" );
hui(".nav-title").html(朋友圈);
else if (h > = 100)
StatusBar(dark, rgba(255,255,255,0));
hui(header).css( background: "#ffffff" )
hui(header).css( box-shadow: "1px 3px 4px rgba(0, 0, 0, 0.05)" )
hui(".icon").css( "color": "#000" );
hui(".nav-title").html(朋友圈);

4、图像预览（UIPhotoViewer）
photoswipe.js 效果更好但是不支持图像长安功能。UIPhotoViewer 实现起来比较简单现，但是要模仿微信那种效果需要创建一个网页 viewer-dot.Html 来实现滚动效果

?当图像预览发生左右滚动时发送一个广播事件告诉viewer-dot.Html 当图像预览模块关闭时也关闭viewer-dot.Html页面 ?

apiready = function ()
api.addEventListener(
name: change_dot
, function (ret, err)
init(ret.value.index,ret.value.nub)
)
init(api.pageParam.index,api.pageParam.nub)
;
function init(on_index,dot_number)
var html = ;
for (var i = 0; i < dot_number; i++)
if (i == on_index)
html += < div class="dot active"> < /div> ;
else
html += < div class="dot"> < /div> ;

hui(.list).html(html);

5、图像压缩
图像压缩可以用 compactPicture，压缩后图像清晰、体积小。封装了一个 js 函数实现图像压缩 compress_img()。

function compress_img(path, obj, callback)
var img = new Image();
img.src = https://www.songbingjia.com/android/path;
img.onload = function ()
var that = this;
var w = that.width, h = that.height, scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7
var canvas = document.createElement(canvas);
var ctx = canvas.getContext(2d);
var anw = document.createAttribute("width");
anw.nodeValue = https://www.songbingjia.com/android/w;
var anh = document.createAttribute("height");
anh.nodeValue = https://www.songbingjia.com/android/h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
if (obj.quality & & obj.quality < = 1 & & obj.quality > 0)
quality = obj.quality;

var base64 = canvas.toDataURL(image/jpeg, quality);
callback(base64);

?图像压缩前需要指定图像宽度，如果设为固定值所有图像压缩后宽度一样，这肯定不行。所以需要根据图片的宽度高度灵活设置压缩后的宽度。imageFilter 模块可以获取图像宽高。 ?

var imageFilter = api.require(imageFilter);
imageFilter.getAttr(
path: pic
, function (ret, err)
if (ret.status)
if (ret.width > ret.height)
if (ret.width > 1000)imgw = 1200
else if (ret.width < 1000 & & ret.width > 700)imgw = 800
else if (ret.width < 700 & & ret.width > 500)imgw = 600
else imgw = 400

else
if (ret.height > 3000) imgw = 990
else if (ret.height < 3000 & & ret.height > 1600) imgw = 900
else if (ret.height < 1600 & & ret.height > 1000) imgw = 800
else if (ret.height < 1000 & & ret.height > 600) imgw = 550
else if (ret.height < 600 & & ret.height > 400) imgw = 350
else imgw = 200

但是压缩后返回的是 base64 批量上传二进制流不方便，所以利用 trans 模块将 base64 转成 jpg 然后再批量上传。

compress_img(pic,
width: imgw
, function (base)
var imgName = randomString(8) + .jpg;
var imgPath = "fs://picture/moments/"
var base64Str = base.replace(data:image/jpeg; base64,, );
var trans = api.require(trans);
trans.saveImage(
base64Str: base64Str,
imgPath: imgPath,
imgName: imgName
, function (ret, err)
if (ret.status)
var path = api.fsDir + "/picture/moments/" + imgName;
vm.pics.push(path);

);
);

6、定位附近地点（aMap）
使用该模块需要获取定位权限，同时还要执行 updateMapViewPrivacy、updateSearchPrivacy，否则地图和搜索接口都无效。

function open_map()
var ret = api.hasPermission(
list: [location]
);
if (ret[0].granted)
api.openWin(
name: map-view,
url: map-view.html,
);
else
api.requestPermission(
list: [location],
, function (res)
if (res.list[0].granted)
api.openWin(
name: map-view,
url: map-view.html,
);
else
api.toast(
msg: 无手机定位权限
)

);