项目中印象深刻的问题

内嵌在app中的h5

1、webview 生成图片,长按图片保存到手机

1、生成图片(canvans)
2、图片长按保存到手机,监听 touchstart事件,定时器超过一定时间执行方法
https://www.jianshu.com/p/c336fa712da9

2、复制文本

复制链接
    // 复制链接
    copyUrl() {
    
    
      let textarea = document.createElement('textarea');
      textarea.id = 'copyTextarea';
      textarea.style.width = 0;
      textarea.style.height = 0;
      document.body.appendChild(textarea);
      let textarea2 = document.getElementById('copyTextarea');
      textarea2.innerHTML = this.urlCopy;

      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    
    
        const range = document.createRange();
        range.selectNode(document.getElementById('copyTextarea'));
        const selection = window.getSelection();
        if (selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
      } else {
    
    
        // 选中文本(select()方法对IOS部分版本无效)
        textarea.select();
      }

      document.execCommand('copy');
      document.body.removeChild(textarea);
      this.cancel();
      this.$showToast('复制成功');
    },

3、文字垂直居中问题

display: block
设置padding

4、手势返回上一页的问题
前端路由

mounted:
    this.pushHistory();
    window.addEventListener('popstate', this.jiantng, false);

destory:
    window.removeEventListener('popstate', this.jiantng);

    jiantng(e) {
    
    
      console.log('123');

      // window.history.back();
    },
    pushHistory() {
    
    
      var state = {
    
    
        title: 'title',
        url: '#'
      };
      window.history.pushState(state, 'title', '#');
    },

5、自定义分享到微信朋友圈的图片和文案

h5 + app:单独的h5是唤不起微信的,需要原生app去集成微信的sdk,app去调微信的方法,h5再去调app的方法,才可以实现。h5只能分享链接到微信好友和朋友圈,不能分享图片,只能通过app方法获取!!!

h5页面分享(不涉及内嵌到app中): 引入weixin-js-sdk 先判断浏览器环境,是不是微信浏览器,是微信浏览器的话可以使用wx sdk里面的一些自定义接口,自定义文案,图片等内容 (普通浏览器有自己的分享事件啥的)

猜你喜欢

转载自blog.csdn.net/xiaoxiannv666/article/details/112850016