uniapp微信公众号h5开发--（微信开发回调、背景音乐自动播放、微信朋友分享、微信扫一扫）一站式踩坑

最新推荐文章于 2024-05-30 10:53:48 发布
置顶 最新推荐文章于 2024-05-30 10:53:48 发布
阅读量1.6k 收藏 4
点赞数
文章标签： 微信 uni-app 微信公众平台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang_xin__/article/details/129620471
版权

微信公众号开发，一站式踩坑

开发前提：例如你们域名是https://www.baidu.com

  1. 配置nginx反向代理，把你项目的端口重定向到你们测试环境或线上环境域名
# 访问https://baidu.com 的时候，指向127.0.0.1:8080
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
  server {
      listen 80;
      server_name baidu.com;//替换成你的域名
      location / {
          proxy_pass http://127.0.0.1:8080;//替换你项目的
      }
  }
  include servers/*;
}

修改本地host文件 打开host文件最后一行添加127.0.0.1 baidu.com
mac和windows电脑自行百度打开host方式

  1. 引入微信jsdk 版本1.00 - 1.60都可以

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js
（支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

1、网页授权(静默授权、点击授权)

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

scope 参数: 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

具体实现登录代码如下

// 判断openIdTime是否过期 过期失效12小时
let openIdTime = uni.getStorageSync("openIdTime");
if (openIdTime) {
  let nowTime = new Date().getTime();
  if (nowTime - openIdTime > 43200000) {
    uni.clearStorageSync();
  }
}
let urlParams = new URLSearchParams(window.location.search);
let code = urlParams.get("code");
if (!code) {
  uni.setStorageSync("goto_url", window.location.href);
}
if (!code && !uni.getStorageSync("openId") && this.isAuthorization) {
  this.weChatLoginBtn();
}
this.weixinCompelete();


方法
// 登录
weChatLoginBtn() {
  if (!isWechat()) {
    uni.showToast({
      title: "请在微信中打开",
      icon: "none",
    });
    return;
  }
  this.$res.get(getWechatAppId).then((res) => {
    let appid = this.$res.fun(res);
    let baseUrl = encodeURIComponent(location.href);
    let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${baseUrl}&response_type=code&scope=snsapi_userinfo&state=null#wechat_redirect`;
    window.location.href = url;
  });
},

      weixinCompelete() {
        let urlParams = new URLSearchParams(window.location.search);
        let code = urlParams.get("code");
        let state = urlParams.get("state");
        if (code) {
          getApp().showLoading();
          // 记录此用户已授权
          uni.setStorageSync("isAuthorization", true);
          console.log("登录吧");
          this.$res
            .post(login, {
                code: code,
            })
            .then((res) => {
              getApp().hideLoading();
              if (res.data.status === 200) {
                let data = this.$res.fun(res);
                uni.setStorageSync("token", data.token);
                uni.setStorageSync("userInfo", data);
                uni.setStorageSync("openId", data.openId);
                // 设置openId过期时间
                uni.setStorageSync("openIdTime", new Date().getTime());
               
                let goto_url = uni.getStorageSync("goto_url");
                // 切割goto_url获取参数
                let urlParams = new URLSearchParams(goto_url.split("?")[1]);
                let params = {};
                urlParams.forEach((value, key) => {
                  params[key] = value;
                });
                // 拼接参数
                let url = "";
                for (let key in params) {
                  if (key !== "code" && key !== "state" && key !== "") {
                    url += `${key}=${params[key]}&`;
                  }
                }
                setTimeout(() => {
                  uni.reLaunch({
                    url: `/pages/home/home?${url}`,
                  });
                }, 200);
              } else {
                let goto_url = uni.getStorageSync("goto_url");
                // 切割goto_url获取参数
                let urlParams = new URLSearchParams(goto_url.split("?")[1]);
                let params = {};
                urlParams.forEach((value, key) => {
                  params[key] = value;
                });
                // 拼接参数
                let url = "";
                for (let key in params) {
                  if (key !== "code" && key !== "state" && key !== "") {
                    url += `${key}=${params[key]}&`;
                  }
                }
                uni.reLaunch({
                  url: `/pages/home/home?${url}`,
                });
              }
            });
          return;
        } else {
        	//已经登录
          //直接走自己的下面接口
        }
      },

2、背景音乐自动播放 / 分享给朋友、朋友圈、扫一扫

ios背景音乐播放，微信是不播放的，下面解决这个问题

//jwx.js
export default {
  //判断是否在微信中
  isWechat: function() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/micromessenger/i) == "micromessenger") {
      return true;
    } else {
      return false;
    }
  },
  initJssdk: function(callback) {
    var uri = location.href.split("#")[0]; //获取当前url然后传递给后台获取授权和签名信息
    uni.request({
      url: xxx, //你的接口地址
      method: "POST",
      data: {
        url: uri,
      },
      success: (res) => {
        //返回需要的参数appId,timestamp,noncestr,signature等
        //注入config权限配置
        jWeixin.config({
          debug: false,
          appId: res.data.data.appId,
          timestamp: res.data.data.timestamp,
          nonceStr: res.data.data.nonceStr,
          signature: res.data.data.signature,
          jsApiList: [
            //这里是需要用到的接口名称
            "onMenuShareAppMessage", //分享给朋友
            "onMenuShareTimeline", //分享到朋友圈
            "scanQRCode", //扫一扫接口
            "chooseWXPay", //微信支付
            "chooseImage", //拍照或从手机相册中选图接口
            "previewImage", //预览图片接口
            "uploadImage", //上传图片
            "downloadImage", //下载图片
          ],
        });
        if (callback) {
          callback(res.data);
        }
      },
    });
  },
    //在需要自定义分享的页面中调用
  share: function(data, url) {
    url = url ? url : window.location.href;
    if (!this.isWechat()) {
      return;
    }
    //每次都需要重新初始化配置，才可以进行分享
    this.initJssdk(function(signData) {
      jWeixin.ready(function() {
        var shareData = {
          title: data && data.title ? data.title : signData.site_name,
          desc: data && data.desc ? data.desc : signData.site_description,
          link: url,
          imgUrl: data && data.img ? data.img : signData.site_logo,
          success: function(res) {
            //用户点击分享后的回调，这里可以进行统计
          },
          cancel: function(res) {},
        };
        //分享给朋友接口
        jWeixin.onMenuShareAppMessage(shareData);
        //分享到朋友圈接口
        jWeixin.onMenuShareTimeline(shareData);
      });
    }, url);
  },
    // 微信扫一扫
  scanQRCode: function(callBack) {
    if (!this.isWechat()) {
      //console.log('不是微信客户端')
      return;
    }
    //console.log(data);
    this.initJssdk(function(res) {
      jWeixin.ready(function() {
        console.log("微信扫一扫",res);
        jWeixin.scanQRCode({
          needResult: 1,
          scanType: ["qrCode", "barCode"],
          success: function(res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            if (callBack) callBack(result);
          },
        });
      });
    });
  },
    //在需要自定义分享的页面中调用
  music: function(app, musicUrl, url) {
    url = url ? url : window.location.href;
    if (!this.isWechat()) {
      return;
    }
    //每次都需要重新初始化配置，才可以进行分享
    this.initJssdk(function(signData) {
      jWeixin.ready(function() {
        let globalData = app.globalData;
        // 判断是否有背景音乐实例
        if (globalData && globalData.audioCtx) {
          console.log("有背景音乐实例");
        } else {
          // 背景音乐自动播放 createInnerAudioContext
          globalData.audioCtx = uni.createInnerAudioContext();
          globalData.audioCtx.src = musicUrl;
          globalData.audioCtx.autoplay = true;
          globalData.audioCtx.loop = true;
          globalData.audioCtx.onPlay(() => {
            console.log("开始播放");
          });
          globalData.audioCtx.onError((res) => {
            console.log(res.errMsg);
            console.log(res.errCode);
          });
        }
      });
    }, url);
  },
 };

页面具体调用

let shareData={
	title:'分享标题',
	
	//其他参数自行查看
	//link:'https://www.baidu.com'// 
	//分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111
}
this.$jwx.share(shareData, 'https://www.baidu.com/home/home?id=123');

//调用音乐播放 需要传递app过去，那边保存到全局globalData里面
let app = getApp();
 // 微信环境播放音乐
this.$jwx.music(app, '替换你的音乐播放地址');

//调取扫一扫
this.$jwx.scanQRCode((res) => {
	//res 扫描结果
});


//在任何页面停止音乐
playMusic() {
  this.audioCtx = getApp().globalData.audioCtx;
  if (this.audioCtx.paused) {
    this.audioCtx.play();
  } else {
    this.audioCtx.pause();
  }
},

！！！敲黑板
微信扫一扫的页面进入方式。
ios进入扫一扫的单独网页，调用h5会发现调不起来，再次刷新页面又可以了。别急
进入页面方式改成这种，ok了，记得清空浏览器缓存，再试试

// 判断机型ios or android
let system = uni.getSystemInfoSync().system;
 if (system.indexOf("iOS") > -1) {
   window.location.href =
     "https://baidu.com/pages/sao/sao";
 } else {
   uni.navigateTo({
     url: "/pages/sao/sao",
   });
 }

总结几点坑：
1、本地开发必须要解决nginx代理，让你再微信开发者网页调试工具中访问域名，指定到你本地的项目进行开发。
2、uniapp 中 部分wx. 与微信浏览器中的有冲突。可以使用jWeixin来代替wx
3、ios进入扫一扫页面一定要按照上述方式
对你有帮助的话，点赞收藏吧!!!

yang_xin__
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app开发微信公众号
weixin_45121497的博客
04-28 2799
借鉴：https://blog.csdn.net/weixin_41652495/article/details/130313035。（2）就是js安全域名的问题（没有在当前设置域名下访问项目SDK会调用失败，就是本地调试SDK一般会有问题）2、调试可用：微信开发者工具=》公众号网页项目（打开微信开发者工具=》设置=》安全=》开启服务端口）：当前台绑定自己微信号为开发者前，我们微信需要关注公众平台安全助手，并打开信息接收功能。（1）jsapi_ticket获取方法：（注意把本地IP放入白名单）
uni-app开发微信公众号H5网页，用微信开发者工具调试公众号
热门推荐
weixin_40466351的博客
09-08 1万+
参考文档： 使用uniapp开发微信公众号（H5页面），用微信开发者工具调试微信公众号 1、根据官网文档，新建入口文件template.h5.html 官网文档 template.h5.html 直接复制过来就可以 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
【uniapp nginx 部署H5 】
最新发布
weixin_43163986的博客
05-30 283
uniapp H5 二级路由
微信h5页面自动播放音乐
hellosnowyy
01-31 2293
此方案ios微信内h5不会播放，其他正常。此方案安卓微信内h5不会播放，其他正常。https + audio标签。方案一 + 方案二`
uniapp开发微信公众号网页-微信JSSDK使用
qq_38746300的博客
04-07 3968
uniapp开发微信公众号网页-微信JSSDK使用一. 安装jweixin-module二. 新建js文件,把jssdk的接口简单封装,然后挂载到vue实例1. 在js公共文件夹下创建wechat.js2. 在 main.js 引入 wechat.js3. 使用微信 jssdk 接口4. 其他 JS-SDK说明文档-微信开放文档 一. 安装jweixin-module 使用 npm 安装微信 jssdk npm install jweixin-module --save 二. 新建js文件,把jssdk的
uniapp开发的公众号项目，使用微信JSSDK完成微信支付
m0_72929120的博客
07-04 2534
【代码】uniapp开发的公众号项目，使用微信JSSDK完成微信支付。
微信h5开发demo
08-14
微信H5开发是一个广泛应用于移动互联网领域的技术，主要用于构建在微信环境下运行的Web应用程序。H5，即HTML5，是HTML的最新版本，它引入了许多新的功能和改进，旨在提高用户体验，增强网页交互性，同时简化开发过程...
微信支付项目
09-13
它利用了二维码、NFC（近场通信）和API接口等多种技术，提供了一站式的支付解决方案。 2. 工作流程： 微信支付的工作流程主要包括以下几个步骤： - 用户选择微信支付方式，输入支付金额。 - 商家服务器通过微信...
java微信小程序支付demo
04-19
微信小程序是微信平台上的轻量级应用，结合微信支付，可以在小程序内部实现一站式购物体验。 2. **Java后端接口开发** 要实现Java微信小程序支付，首先需要在微信商户平台注册并获取必要的API密钥（AppID、商户号...
java微信支付宝支付demo
09-28
这个文件名暗示DEMO可能使用了BeeCloud服务，BeeCloud是一个一站式支付解决方案，它集成了多种支付渠道（如微信、支付宝等），简化了开发过程。开发者可以借助其提供的SDK快速接入支付功能，减少底层接口对接的复杂...
ecshop微信支付插件
06-30
3. **用户体验**：提供简洁的支付流程，用户在购物车结算时可直接选择微信支付，点击后跳转至微信支付页面，完成支付后自动回调ECSHOP后台，更新订单状态。 4. **多语言支持**：如果ECSHOP网站支持多语言，插件应能...
uniapp开发公众号，微信开发者工具进行本地调试
m0_51534164的博客
08-12 866
uniapp开发公众号，微信开发者工具进行本地调试
uniapp开发微信公众号，uniapp公众号本地调试，本地开发
jueshileqishou01的博客
03-24 1447
uniapp开发 微信公众号本地调试，微信公众号本地开发
uniapp开发H5微信公众号,使用微信的扫一扫等Api试错
qq_38181746的博客
10-16 492
记录使用uniapp开发H5微信公众号,有些业务需要用到一些API，比如扫码，h5和微信小程序，app在使用过程中有有些不同，h5使用需要单独引入微信的jsdk,才能使用否则会报错无法使用。注意事项：在使用的时候必须要先调用wx.config这个微信的API，否则无法使用，然后再jsApiList参数中写入你需要用到的api。然后还有一个需要注意的地方，在扫码完成后获取返回值进行赋值的时候，无法直接赋值，因为this指向原因，需要提前定义一下。
微信H5音乐自动播放
masju的博客
03-14 5110
之前一直用微信的jssdk监听：也就是网上常用的代码 <audio style="display:none; height: 0" id="mymusic" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio> function audioAutoPlay(id){ var audio = document.getElementById(id); audio.play()
微信H5网页自动播放背景音乐
a_靖的博客
06-13 3073
微信网页自动播放音乐实现
微信公众号踩坑二---调用分享接口 success 回调函数在载入页面的时执行
Qianqian_s的博客
05-18 2238
最近在研究微信中H5页面的分享功能遇到了一个小问题 页面写好后，在测试的时候发现分享接口中的success 回调函数在载入页面的时候就会执行，开始是怀疑我的调用接口的代码位置放的不对，开始在网上搜索，结果搜了半天没找到答案，感觉又快秃了 于是决定重新阅读一遍文档，结果在代码中看到这么一段注释 config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确
uniapp实现公众号H5、小程序和App微信授权登录功能
YDH865的专栏
12-09 4395
uniapp实现公众号H5、小程序和App微信授权登录功能
uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间，给微信分享卡片设置图标、标题、描述文字等（JS-SDK 通用解决方案放心用）
王佳斌
02-11 7101
uniapp H5 微信浏览器分享到朋友圈设置分享图标，uniapp,h5微信如何分享页面，完整设置分享链接图片简介，Uniapp发布为H5端时如何实现微信分享给好友及分享到朋友圈功能，如何把手机移动端网页设置成可以分享到朋友圈？H5网页怎么分享到微信、朋友圈、QQ和微博里，手机网页实现微信分享,分享朋友圈功能，uniapp H5网站在微信浏览器中进行分享、分享朋友圈功能，uniappH5微信公众号分享设置标题描述logo图标，uniapp H5网页微信分享自定义标题内容图片，uniappH5微信分享API
springboot uniapp微信公众号开发
07-28
Spring Boot 是一种用于开发 Java 应用程序的框架，它简化了传统 Java 开发的繁琐过程，使开发人员可以更快速地构建高效的应用程序。UniApp 是一个跨平台的开发框架，它可以同时开发 Android、iOS 和 Web 应用程序，极大地提高了开发效率和项目的可维护性。 微信公众号开发是指基于微信平台的应用程序开发，通过微信公众号，我们可以实现与用户的互动交流、推送消息、提供各种服务等。 在使用 Spring Boot 和 UniApp 进行微信公众号开发时，可以采用前后端分离的开发模式。前端使用 UniApp 进行界面设计和用户交互的开发，后端使用 Spring Boot 进行业务逻辑的处理和数据的存储。 首先，我们需要在微信公众平台注册一个开发者账号，获取到相应的公众号信息和接口权限。 接下来，前端开发人员可以使用 UniApp 进行公众号的界面设计和交互逻辑的编写。UniApp 提供了丰富的组件和模板，可以方便地实现各种界面效果，并且可以使用 Vue.js 进行数据的绑定与处理。 后端开发人员使用 Spring Boot 进行接口的开发和业务逻辑的处理。可以使用 Spring Boot 提供的丰富的功能和插件来简化开发，比如使用 Spring Data JPA 来操作数据库，使用 Spring Security 来实现用户认证与权限控制等。 最后，前后端通过接口进行数据的传输和交互，前端将用户的操作发送到后端进行处理，并将后端返回的数据展示给用户。 通过采用 Spring Boot 和 UniApp 进行微信公众号开发，可以充分发挥两者的优势，快速构建高效的应用程序，实现与用户的互动和服务。同时，由于使用的是跨平台的开发框架，可以方便地同时开发多个平台的应用程序，提高开发效率和项目的可维护性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值