小程序文字复制功能调研

作者: dpplh | 来源:发表于2017-11-02 10:48 被阅读33次

小程序可用Api & 组件

<text>组件

属性名	类型	默认值	说明	最低版本
selectable	Boolean	false	文本是否可选	1.1.0
space	string	false	显示连续空格	1.4.0
decode	Boolean	false	是否解码	1.4.0

样式如图：

WechatIMG109.jpeg

剪贴板操作

基础库1.1.0 开始支持

wx.setClipboardData(OBJECT)

OBJECT参数

参数	类型	必填	说明
data	String	是	需要设置的内容
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

事件使用

类型	触发条件	最低版本
touchstart	触摸开始
touchmove	手指触摸后移动
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后超过350ms，如果指定了事件回调函数并触发了这个事件，tap事件不会被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

基础时间对象属性

属性	类型	说明
type	string	事件类型
timeStamp	Integer	事件生成时的时间戳(页面打开到触发事件所经过的毫秒数)
target	Object	触发事件的组件的一些属性集合
currentTarget	Object	当前组件的一些属性值集合

target : 触发事件的源组件
currentTarget : 事件绑定的当前组件

属性	类型	target说明	currentTarget说明
id	String	事件源组件的id	当前组件的id
tagName	String	当前组件的类型	当前组件的类型
dataset	Object	事件源组件上由data-开头的自定义属性组成的集合	当前组件上由data-开头的自定义属性组成的集合

touches : touches是一个数组，每个元素为一个Touch对象（canvas触摸事件中携带的touches是CanvasTouch数组）。表示当前停留在屏幕上的触摸点。

Touch对象

属性	类型	说明
id	Number	触摸点的标识符
pageX, pageY	Number	距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴
clientX, clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

图片预览

wx.previewImage(OBJECT)
OBJECT参数说明:

参数	类型	必填	说明
current	String	否	当前显示图片的链接，不填则默认为urls的第一张
urls	StringArray	是	需要预览的图片链接列表
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
compelte	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码:

wx.previewImage({
    current: '',    // 当前显示的图片的链接
    urls: []        // 需要预览的图片链接列表
)};

CSS文字排版样式

// .wxml
<view class="item">
    <text class="text-item">这是很长很长的一句话用来测试排版到底对不对</text>
    <text class="text-item">下一行也来测试能不能跟上去</text>
 </view>
 
 <view class="item">
    <text class="text-item">来一句单独的一行试试换行功能能不能用并且是居中的</text>
 </view>
 
// .wxss
.item {
    width: 690rpx;
    text-align: center;
    margin-left: 30rpx;
    margin-top: 50rpx;
}

.text-item {
    display: inline;
    max-width: 690rpx;  
    word-break: break-all;  
}

样式如下：

屏幕快照 2017-10-31 10.03.03.png

轻芒杂志功能分析

前端界面分析

示例图：

需求：长按文字选中一句话, 文字被选中背景色改变, 手指松开后弹出工具条
实现：

文字排版使用上面说的排版功能，每句话为一个<text>组件
使用<view>组件包裹用来设置间距居中
长按可使用longpress或者longtap，将事件绑定在<text>组件上，在长按点击350m后出发事件调用，获取当前<text>组件的所对应的对象，修改选中字段
弹出框位置根据<text>组件的Touch对象的ClientY来定位当前位置

IMG_1230.PNG

图片预览功能

需求：点击图片弹出预览
实现：

整篇内容的所有图片在一个数组中，点击图片获取当前图片的url，直接调用微信小程序原生预览并赋值当前图片url

IMG_1231.PNG

mark功能
需求：选中文字后mark文字
实现：

选中文字在长按事件被回调时mark选中文字
显示出<view>下的mark人数

IMG_1232.PNG

接口参数分析

对象格式:

{
    "ok": true,
    "hasMore": false,
    "hasPreMore": false,
    "events": [{
        "timestamp": 1509416931256,
        "type": "article",
        "article": {
            "docId": 3927993217966179424,
            "docIdString": "3927993217966179424",
            "cid": 0,
            "mid": 102,
            "magazineName": "时尚设计",
            "interestId": 0,
            "title": "Home | 用每一个清晨来展开美好一天",
            "snippet": "无论是用来读书、沉思，还是展开浪漫遐想，充分利用拂晓时分，是一天最好的打开方式。",
            "cover": "http://qiniuimg.qingmang.mobi/image/orion/f39ff1733065b641744cf825593dd176_900_500.jpeg",
            "isRecommend": false,
            "covers": [{
                "url": "http://qiniuimg.qingmang.mobi/image/orion/f39ff1733065b641744cf825593dd176_900_500.jpeg",
                "height": 500,
                "width": 900,
                "storageKey": "f39ff1733065b641744cf825593dd176_900_500.jpeg",
                "rgb": -1
            }],
            "images": [],
            "videos": [],
            "musics": [],
            "tags": [],
            "contentHtml": "[]",
            "contentHtmlLength": 9502,
            "contentLength": 1822,
            "webUrl": "http://mp.weixin.qq.com/s?__biz=MzA5NDMyOTYyOA==&mid=2650360313&idx=1&sn=0df79fd66fb78c697541f6dc9f45e814#rd",
            "publishDate": 1467125221000,
            "docDate": 1507867240469,
            "appName": "精彩KINFOLK四季",
            "appIcon": "http://img.wdjimg.com/image/orion/84d99febf695e6520f575d8a826b2d9b_548_548.jpeg",
            "packageName": "org.wandoujia.mp.KINFOLKCHINA",
            "templateType": "TEXT_VENTI",
            "keywords": [],
            "appChannels": [{
                "id": 3677,
                "title": "精彩KINFOLK四季"
            }],
            "publishDateDebug": "2016-06-28 22:47:01",
            "docDateDebug": "2017-10-13 12:00:40",
            "contentType": "article"
        },
        "primaryMark": {
            "id": 362914,
            "docId": 3927993217966179424,
            "docIdString": "3927993217966179424",
            "pid": "a13d",
            "start": 0,
            "end": 39,
            "type": "text",
            "title": "Home | 用每一个清晨来展开美好一天",
            "content": "每天定点起床会形成一种仪式感，而且这种连续性会有助于你坚持下去，避免半途而废。无论你早起是为了做自己热爱的事，还是利用这段时间来放空自己、什么也不做，从你习惯的一件事情开始，这会让这个时段显得独一无二。前一晚，把法压壶或茶叶准备好，这样一来，次日清早你只需蹒跚地摸进厨房，睡眼惺忪地烧壶水就行了。放一张格伦・古尔德（Glenn Gould）演奏的巴赫“哥德堡变奏曲”（Goldberg Variations），要是你喜欢， Daft Punk 乐队也行。或许，如果你追求更为“禁欲”的清晨，那就套一件毛衫，静悄悄地摸索到桌边去。早晨或有几分冷冽，但清醒之后你会暖和过来，神清气爽地去做自己的事。",
            "status": "NORMAL",
            "updatedTime": 1508767396000,
            "count": 2,
            "notes": [],
            "cid": 0,
            "mid": 0,
            "magazineName": "",
            "nid": 0
        },
        "notes": [],
        "isMarked": false,
        "markCount": 32,
        "shareCount": 6,
        "fromXiaohua": false,
        "history": false,
        "color": "BDC1C2",
        "reasons": {},
        "scoreMap": {}
    }]
}

部分内容格式：

"contentHtml": "[
    {
        \"id\": \"6653\",
        \"type\": 1,
        \"image\": {
            \"width\": 524,
            \"height\": 232,
            \"source\": \"http: //qiniuimg.qingmang.mobi/image/orion/29de4fcc9d20ac8d4259328682355379_524_232.jpeg\",
            \"inline\": false
        }
    },
    {
        \"id\": \"5d6e\",
        \"type\": 0,
        \"text\": {
            \"text\": \"无论是用来读书、沉思，还是展开浪漫遐想，充分利用拂晓时分，是一天最好的打开方式。在全世界尚未醒来之时，握住这段光阴，精神饱满地迎来新的一天。\"
        }
    },
    {
        \"id\": \"2ddc\",
        \"type\": 11
    },
    {
        \"id\": \"de4f\",
        \"type\": 1,
        \"image\": {
            \"width\": 1280,
            \"height\": 1845,
            \"source\": \"http: //qiniuimg.qingmang.mobi/image/orion/1430e4a719071e8052ed34da99574467_1280_1845.jpeg\",
            \"inline\": false
        }
    },
    {
        \"id\": \"92cc\",
        \"type\": 0,
        \"text\": {
            \"text\": \"▲时尚编辑兼造型师杰西卡和老公杰德与女儿在家中的合影。\",
            \"linetype\": \"aside\"
        }
    },
    {
        \"id\": \"b188\",
        \"type\": 0,
        \"text\": {
            \"text\": \"拂晓时分，黑暗又寂静。暖洋洋的床铺在召唤你回去，但是，在一天尚未到来时起身，你会觉得神清气爽，从容地迎接那些与太阳一同升起的、生活中即将到来的挑战。此时，没必要抢先一步开始工作，也不要去刷社交网络，那些事儿以及洗衣服、列购物清单、给妈妈打电话，这些事儿也都可以等一会儿再做。这些事总会有时间做的，但清晨伊始的时光让你有机会为自己做点什么，因此你需要好好保护它。\"
        }
    },
    {
        \"id\": \"e496\",
        \"type\": 1,
        \"image\": {
            \"width\": 643,
            \"height\": 975,
            \"source\": \"http: //qiniuimg.qingmang.mobi/image/orion/46c05b62c73f62dd424840f7fff89060_643_975.jpeg\",
            \"inline\": false
        }
    },
    {
        \"id\": \"e05a\",
        \"type\": 0,
        \"text\": {
            \"text\": \"▲清晨的桌上，是你熟悉又喜爱的餐具、咖啡、吐司和热茶。\",
            \"linetype\": \"aside\"
        }
    },
    {
        \"id\": \"4293\",
        \"type\": 0,
        \"text\": {
            \"text\": \"无数喜欢早起的人都不会让这些日常琐事侵占这个黄金时段。欧姬芙（GeorgiaO’Keeffe）在黎明时听到家里的狗叫就会起床，喝杯茶暖身后，就出去散步，然后才会进画室。梭罗（HenryDavidThoreau）在冷冽的清晨走出门去聆听第一声鸟鸣。太太还在熟睡之际，伍德豪斯（P.G.Wodehouse）就起床在前门廊上活动筋骨，然后才一边享用热茶、吐司和咖啡蛋糕，一边读通俗小说。\"
        }
    }]

预览图片：

"images": [{
                "url": "http://qiniuimg.qingmang.mobi/image/orion/b6eb36cf71f43b0128ac078628979f7c_640_744.jpeg",
                "height": 744,
                "width": 640,
                "storageKey": "b6eb36cf71f43b0128ac078628979f7c_640_744.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/9373425a86ae790104cb42ec4825bd70_1280_1849.jpeg",
                "height": 1849,
                "width": 1280,
                "storageKey": "9373425a86ae790104cb42ec4825bd70_1280_1849.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/cb896c6cb2ff52da90e08878876bb9ab_1280_1851.jpeg",
                "height": 1851,
                "width": 1280,
                "storageKey": "cb896c6cb2ff52da90e08878876bb9ab_1280_1851.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/1ce7681dd4bda88a740f1f7a42709934_1280_940.jpeg",
                "height": 940,
                "width": 1280,
                "storageKey": "1ce7681dd4bda88a740f1f7a42709934_1280_940.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/57b6f7421f2ca0a49c89783a8e285e21_1280_1760.jpeg",
                "height": 1760,
                "width": 1280,
                "storageKey": "57b6f7421f2ca0a49c89783a8e285e21_1280_1760.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/0381d78bb972f7a589b266271784c324_1280_1625.jpeg",
                "height": 1625,
                "width": 1280,
                "storageKey": "0381d78bb972f7a589b266271784c324_1280_1625.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/46c05b62c73f62dd424840f7fff89060_643_975.jpeg",
                "height": 975,
                "width": 643,
                "storageKey": "46c05b62c73f62dd424840f7fff89060_643_975.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/1430e4a719071e8052ed34da99574467_1280_1845.jpeg",
                "height": 1845,
                "width": 1280,
                "storageKey": "1430e4a719071e8052ed34da99574467_1280_1845.jpeg",
                "rgb": -1
            }, {
                "url": "http://qiniuimg.qingmang.mobi/image/orion/29de4fcc9d20ac8d4259328682355379_524_232.jpeg",
                "height": 232,
                "width": 524,
                "storageKey": "29de4fcc9d20ac8d4259328682355379_524_232.jpeg",
                "rgb": -1
            }],

小程序文字复制功能调研

小程序可用Api & 组件

<text>组件

剪贴板操作

事件使用

图片预览

CSS文字排版样式

轻芒杂志功能分析

前端界面分析

接口参数分析

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读