程序员 闲来无事,玩一下小程序🧐

caoyanglee · 2019年09月19日 · 最后由 AdamCoder 回复于 2019年12月28日 · 36 次阅读

由于不可抗力的原因,最近公司没有事情,闲来无事就去搞了个小程序玩玩。刚好我个人对手机这块比较感兴趣(略懂一丢丢),所以小伙伴买手机经常叫我推荐,以前都得手动打手机的参数,还有打参数对比,感觉太麻烦了,所以顺手就开发一款小程序 [搜机] ,提供手机信息查询,顺带还可以做手机参数对比。

开发这款小程序,涉及到后台,前端,爬虫各方面的知识,知识还是比较多的。后台我是使用 SprongBoot 作为后台开发框架,因为我是专业-Android,对 java 比较熟悉,方便开发,当然我最后还是用了 kotlin😂。前端部分由于我的小程序要发布到支付宝,头条和微信上,所以我使用第三方 uniapp 框架作为开发。爬虫这块使用 python 去抓点网站的数据。

最后,各位大佬,如果对这个小程序有什么意见,可以在下面留言哦~谢谢😍

共收到 9 条回复

我的技术栈跟你比较类似,也是安卓,业余学点 springboot 后端

cmlanche 回复

啊哈哈~

好奇作者多少年经验,很喜欢你的这款小程序 👍

lambertlt 回复

3 年 Android 😂

caoyanglee 回复

你在自定义 view 方面有经验吗

cmlanche 回复

我想做一个多点可以移动的悬浮框,一直不会搞

caoyanglee 回复

你微信多少,给我发条消息,我咨询下你😂

cmlanche 回复

微信号:sunlee_xmut 自定义 View 方面有经验,但是不理解你移动的悬浮框是什么意思

cmlanche 回复

drag?

定义 drag.js

export default{
  bind(el, binding, vnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const getStyle = (function() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下,计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const dragDomWidth = dragDom.offsetWidth
      const dragDomheight = dragDom.offsetHeight

      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

      // 获取到的值带px 正则匹配替换
      let styL = getStyle(dragDom, 'left')
      let styT = getStyle(dragDom, 'top')

      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托,计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY

        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -minDragDomLeft
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`

        // emit onDrag event
        vnode.child.$emit('dragDialog')
      }

      document.onmouseup = function() {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}

注册 drag 到 vue 为自定义指令

import drag from './drag'

const install = function(Vue) {
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
  window['el-drag-dialog'] = drag
  Vue.use(install); // eslint-disable-line
}

drag.install = install
export default drag

在需要的地方使用

<el-dialog  v-el-drag-dialog >
</el-dialog>
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册