vue 开发微信公众号小问题

最新推荐文章于 2025-06-06 10:51:27 发布

原创最新推荐文章于 2025-06-06 10:51:27 发布 · 545 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信

微信专栏收录该内容

1 篇文章

订阅专栏

本文探讨了使用Vue进行微信公众号开发的常见问题解决方案，包括iframe滑动、浏览器类型判断、限制页面缩放、微信jssdk集成等，为开发者提供实用的代码示例和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 开发微信公众号小问题

iframe 标签无法滑动

参考功能：阅读协议，读取静态html页面

源码

<div class="demo-iframe-holder">
    <iframe src="../../static/html/htmlname.htm" frameborder="0" scrolling="yes"></iframe>
</div>

/* iframe 滑动样式 */
.demo-iframe-holder {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}

选择图片时，不同系统的手机可能不能拍照或选择图片，判断浏览器类型

区分浏览器类型

源码

<input v-if="showwx" type="file" accept="image/*" capture='camera' multiple='multiple' @change="selectImgs" ref="file">
<input v-if="shownotwx" type="file" accept="image/*" multiple='multiple' @change="selectImgs" ref="file">

// 判断浏览器是否是微信浏览器(处理图片上传的时候选择相机和相册)
init () {
    let agent = navigator.userAgent.toLowerCase()
    let iswx = agent.indexOf('qqbrowser') >= 0
    if (iswx) {
        this.showwx = true
    } else {
        this.shownotwx = true
    }
},

限制浏览器自动缩放页面

在index.html修改元信息

源码

<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />

微信浏览器返回事件集成微信jssdk

前端源码

import wx from 'weixin-js-sdk'
import axios from 'axios'

export const wxInit = () => {
  axios
    .get('/stars/wechatjssdk/config')
    .then(result => {
      if (result && result.status === 200) {
        let data = result.data
        if (data !== null) {
          let param = {
            debug: false,
            appId: data.appid, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: ['closeWindow'] // 必填，需要使用的JS接口列表
          }
          wx.config(param)
          wx.ready(() => {
            console.log('通过ready接口处理成功验证')
          })
          wx.error(res => {
            console.error('通过error接口处理失败验证')
          })
        }
        console.log(data)
      }
    })
    .catch(err => {
      console.error(err)
    })
}

// 将本页路由添加到history记录中
const pushHistory = () => {
  var state = {
    title: 'title',
    url: '__SELF__'
  }
  window.history.pushState(state, state.title, state.url)
}
// 返回公众号首页
export const wechatBackHome = () => {
  pushHistory()
  window.addEventListener(
    'popstate',
    function (e) {
      wx.closeWindow()
    },
    false
  )
}

后端源码

import xxx.WechatData;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.*;

/**
 * @author xxx
 * @create 2018/07/07 14:22
 * @description 微信jssdk接口控制器
 */
@RestController
@RequestMapping("/wechatjssdk")
public class WechatJssdkController {

    protected final Logger logger = LoggerFactory.getLogger(this.getClass());
    @Autowired
    private WechatData wechatData;

    @GetMapping("/config")
    public Map<String, String> getWxConfig(@RequestParam("url") String url) {
        logger.info("获取wechat-jssdk-config");
        System.out.println(url);
        String appId = wechatData.getAppID();

        Map<String, String> map = new HashMap<>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写，且必须有序
        string1 = "appid=" + appId +
            "&noncestr=" + nonce_str +
            "&timestamp=" + timestamp +
            "&url=" + url;

        try {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        map.put("url", url);
        map.put("appid", appId);
        map.put("nonceStr", nonce_str);
        map.put("timestamp", timestamp);
        map.put("signature", signature);
        return map;
    }

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash) {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }

    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}