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

最新推荐文章于 2024-10-22 21:36:43 发布
置顶 最新推荐文章于 2024-10-22 21:36:43 发布
阅读量1.7k 收藏 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__
关注
uniapp 开发微信公众号页面踩坑
sry18330686237的博客
08-12 2702
uniapp 开发公众号微信
uni-app微信公众号支付.vue
08-01
//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + '/wx/mp/js_sig.do', data: { route: url }, method: 'GET', success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填，公众号的唯一标识 timestamp: res.data.timestamp, // 必填，生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 signature: res.data.signature, // 必填，签名 jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + '/wx/recharge/pay.do', method: 'POST', header: { 'Content-type': "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync('orderId', res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id参数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log("验证失败！") }); } }) }
uni-app开发微信公众号H5
weixin_55737887的博客
03-29 2880
公司最近需要开发一个公众号项目,以我做小程序的经验以为可以轻松拿下，结果走了一路的坑。
uni-app h5 对接微信公众号-隐藏菜单和修改分享朋友及分享朋友圈
weixin_45358633的博客
09-25 313
uni-app h5 对接微信公众号-隐藏菜单和修改分享朋友及分享朋友圈
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 开发公众号 h5（openid，微信支付，订阅通知）
两个人的幸福online
08-05 810
【代码】uniapp 开发公众号 h5（openid，微信支付，订阅通知）
uni-app开发微信公众号
weixin_45121497的博客
04-28 3039
借鉴：https://blog.csdn.net/weixin_41652495/article/details/130313035。（2）就是js安全域名的问题（没有在当前设置域名下访问项目SDK会调用失败，就是本地调试SDK一般会有问题）2、调试可用：微信开发者工具=》公众号网页项目（打开微信开发者工具=》设置=》安全=》开启服务端口）：当前台绑定自己微信号为开发者前，我们微信需要关注公众平台安全助手，并打开信息接收功能。（1）jsapi_ticket获取方法：（注意把本地IP放入白名单）
微信h5开发demo
08-14
微信H5开发是一个广泛应用于移动互联网领域的技术，主要用于构建在微信环境下运行的Web应用程序。H5，即HTML5，是HTML的最新版本，它引入了许多新的功能和改进，旨在提高用户体验，增强网页交互性，同时简化开发过程...
2023最新H5盲盒商城源码搭建教程(开源+微信登录+支付对接+短信接口)
10-04
该系统支持微信登录、支付对接以及短信接口等功能，为用户提供了一站式的购物体验。为了确保系统的稳定运行，我们建议使用以下环境进行部署： - **PHP版本**：推荐使用PHP 7.1及以上版本。 - **操作系统**：必须是...
微信支付项目
09-13
它利用了二维码、NFC（近场通信）和API接口等多种技术，提供了一站式的支付解决方案。 2. 工作流程： 微信支付的工作流程主要包括以下几个步骤： - 用户选择微信支付方式，输入支付金额。 - 商家服务器通过微信...
ecshop微信支付插件
06-30
3. **用户体验**：提供简洁的支付流程，用户在购物车结算时可直接选择微信支付，点击后跳转至微信支付页面，完成支付后自动回调ECSHOP后台，更新订单状态。 4. **多语言支持**：如果ECSHOP网站支持多语言，插件应能...
java微信支付宝支付demo
09-28
这个文件名暗示DEMO可能使用了BeeCloud服务，BeeCloud是一个一站式支付解决方案，它集成了多种支付渠道（如微信、支付宝等），简化了开发过程。开发者可以借助其提供的SDK快速接入支付功能，减少底层接口对接的复杂...
Uniapp 移动端（本案例为H5微信公众号）开发指南
CSDN13150553010的博客
08-30 3421
package.json 下加入自定义配置,其中uni-app 下的weixin_h5_dev weixin_h5 即为自定义配置（用于发行和本地调试区分）实现代码不同环境下自动编译（可保留两段不同代码）比如该token为本地调试和线上环境不同，代码段加入配置后可实现在调试或打开选择不同环境即可自动编译代码，无需注释或者删除原有另一端环境下的代码。原理是截区公众号菜单的URL中的code(动态)，然后根据code 置换token（区别于小程序的直接后台返回code 置换完成认证）
uniapp开发微信公众号登录
巴博尔的学习博客
03-25 515
【代码】uniapp开发微信公众号登录。
uniapp开发-公众号h5、小程序、移动app
起风啦
05-04 1695
uniapp 官网 官网：https://uniapp.dcloud.io/ uniapp页面 页面布局：flex display、flex-direcoration、align-center、justify-content、align-item 字体图标：阿里图标库 App.vue 全局引入 网站：https://www.iconfont.cn/ 开发标签： view image text button 标签属性： line-gradient word-wrap 模块组件：（https:
uniapp开发微信公众号h5，实现静默授权获取用户openid的本地调试（公众号开发如何本地调试）
最新发布
weixin_43420127的博客
10-22 1243
启动后，访问https://xiaotuxxx.xx.cc也可以看到xxxx.txt的文件内容，说明内网穿透没问题。最后，启动uniapp项目，在微信开发者工具访问内网穿透域名https://xiaotuxxx.xx.cc即可实时本地调试微信公众号h5了。接下来，登录公众号，把https://xiaotuxxx.xx.cc填到网页授权域名即可添加授权域名了。验证xxx.txt文件完成网页授权域名后，输入命令nginx -s stop暂停xxx.txt文件映射。，你应该能看到xxxx.txt的文件内容。
本人用uniapp做微信公众号开发易错点整理
梁小Wai的技术博客
07-31 454
wxUpdateAppMessageShareData和updateTimelineShareData，即自定义“分享给朋友”及“分享到QQ”按钮的分享内容和自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容功能，数据填齐了，用原来的链接打开网页，在微信里分享给朋友，结果还是没有样式的，只见到链接。以为哪里出问题，检查了几次，又将微信提供的旧接口接上去，问题依旧，后来想来想去，将链接发到公众号，在公众号里打开，分享就正常了。近期因业务需要对接微信公众号的功能，以此文记录自己实践中一些易错点。
uni-app 开发微信公众号Bug记录，优化记录
高光的博客
10-14 640
流程方案 重定向静默授权 ios 使用 location.href 跳转返回空白页 内部页面跳转 需使用Router跳转 this.$Router.push({ path: '/' + randomString(3) + aliasPath + randomString(3)+`?awaid=${id}`,params:{}}) 外部页面跳转 window.history.pushState({},null,document.URL) window.addEventListener('popstate',
uniapp 开发微信公众号--网页授权，小白入门
rookieWeb的博客
05-07 1万+
uniapp开发微信公众号也就是H5,但是微信公众号在做用户管理（需要登录，获取用户信息等需要微信号的openId）,作为一个入门小白，真是困难重重。翻看微信公众号官方文档，知道微信公众号对网页授权有两种方式：一种是静默授权，用户无感知，但无法获取用户的基础信息，如果要想拉取到用户信息，则需要使用另一种授权方式，由于这种方式涉及到隐私，所以需要用户同意才行。 **:::::::????*我只需要获取op...
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、付费专栏及课程。

余额充值