美文网首页微信小程序apifm-wxapi微信小程序开发
小程序快速实现短链接转换,长链瞬间转短链

小程序快速实现短链接转换,长链瞬间转短链

作者: fe1e31171ab2 | 来源:发表于2019-08-11 20:06 被阅读2次

前言

本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》

功能说明

长链接不利于记忆,同时因为太长,也不利于在短信、微信、微博、广告营销中使用,所以会有将长的链接转成端的链接的需求;
本例就是带你仅用一句代码实现快速转换,当然这我们就得使用 “apifm-wxapi” 这个小程序开发利器!

效果演示

短链接转换

wxml代码

<view class="page">
  <view class="page__bd">
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell ">
        <view class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入你要转换的长链接" value="{{url}}" bindinput="urlChange" />
        </view>
      </view>
    </view>

    <view wx:if="{{queryResult}}" class="weui-cells__title">转换结果</view>
    <view wx:if="{{queryResult}}" class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <view class="weui-cell__bd">{{ queryResult }}</view>
        <view class="weui-cell__ft" bindtap="copyUrl">复制</view>
      </view>
    </view>

    <view class="weui-btn-area">
      <button class="weui-btn" type="primary" bindtap="shortUrl">立即转换</button>
    </view>
  </view>
</view>

js代码

const WXAPI = require('apifm-wxapi')

Page({
  data: {
    url: undefined,
    queryResult: undefined,
  },
  onLoad: function (options) {

  },
  onShow: function () {

  },
  urlChange(e){
    this.setData({
      url: e.detail.value,
      queryResult: null
    })
  },
  shortUrl() {
    if (!this.data.url){
      wx.showToast({
        title: '条码不能为空',
        icon: 'none'
      })
      return
    }
    WXAPI.shortUrl(this.data.url).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '转换成功',
          icon: 'success'
        })
        this.setData({
          queryResult: res.data
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  },
  copyUrl(){
    wx.setClipboardData({
      data: this.data.queryResult,
      success(res) {
        wx.getClipboardData({
          success(res) {
            wx.showToast({
              title: '复制成功',
              icon: 'success'
            })
          }
        })
      }
    })
  }
})

WXAPI.init('gooking') 这句代码是将你的小程序链接到你的后台,其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明);

总结

本案例主要使用了 apifm-wxapi 的以下方法:

WXAPI.shortUrl(url)

关于 apifm-wxapi 更多的使用方法:

《apifm-wxapi使用说明》

本案例Demo代码下载:

《apifm-wxapi使用Demo程序》

期待你的进步!
感谢!

相关文章

  • 小程序快速实现短链接转换,长链瞬间转短链

    前言 本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: 《...

  • 社交媒体营销URL短链在线生成工具

    什么是URL短链? URL短链,就是由长链接转化而来的短链接。 以欧美网红Rosanna Pansino为例,她的...

  • 短链接系统设计

    短链系统设计 作用 短链系统用于为长链接创建较短的别名,这些别名叫做短链接。当用户点击短链接时,他们会被重定向到原...

  • 锁与事务

    最近在写一个短链服务,提供两个API给用户使用,一个API用于生成短链,一个API用于根据短链获取长链接。 生成短...

  • 责任链模式-短链点击行为记录

    简介 9月份做了个短信发送的功能,考虑到短信文本字数的限制,需要将原始长链接转换为短链发送,并且需要记录每次的短链...

  • 短链的生成方式和用途

    短链的作用1.链接变短2.过滤垃圾链接实现原理key-value存储 利用 自增长的key作为 短链 (这样能保...

  • deno和oak开发的包含管理api的短链系统v2.0

    短链应用 使用deno和oak开发的短链系统,包含短链和短链管理系统 使用短链 获取短链 http://local...

  • 短链域名nginx伪静态配置笔记!

    短链接形如6sk.cc/XYZ后台配置访问这个短链域名:跳转真实长链接https://xxx.com/produc...

  • 长链接转短链接

    新浪短网址接口的稳定性和跳转速度还是很给力的,现给出其API说明。 该接口支持两种返回格式:xml和json 对应...

  • 亚马逊新品上架测评怎么做一

    1 上文说到使用短链接生成工具把权威链接变成短链,对于隐藏产品信息进行测评,可以在新品上架前期快速积累起较高的权重...

网友评论

    本文标题:小程序快速实现短链接转换,长链瞬间转短链

    本文链接:https://www.haomeiwen.com/subject/ginsjctx.html