vue微信公众号分享demo

2024-09-06

实现h5公众号分享功能（vue项目也适用）

在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入 import wx from 'weixin-js-sdk';//引入 Vue.prototype.wx = wx// jq项目中我们需要引入这个js-sdk(在需要调用js接口的页面引入js文件 http://res.wx.qq.com/open/js/jweixin-1.2.0.js,如果你的服务器是https请求的话请引入 https://res.wx.qq.com/op

vue 微信公众号分享后支付失效页面URL不变的坑

微信分享后支付页面还是初始页面,这个问题解决了, created(){ //判断是否是IOS设备 // IOS分享时的页面是首页,也就是进入页而不是当前页.所有可以采用刷新当前页,让进入页的链接改成当前页,再在页面卸载时删除缓存数据. let agent = navigator.userAgent let isIOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端 if(isIOS && !sessionStorage.g

ios微信公众号分享回调事件

IOS手机在分享成功后,回调事件无法正常执行,在回调方法里面加入: setTimeout(function () { //todo }, ); 例如: //分享 Share({ title: "********", content: "***************", desc: "********************", success: function () { setTimeout(function () { //todo }, )

vue微信公众号、H5微信支付

1.H5微信支付后台会返回一个URL,前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下) 使用window.location.href =res.data;进行页面跳转到支付界面(res.data)为后台返回的链接, 2.微信公众号支付为了唤起支付,首先这里需要我们做两件事,第一去配置jsapi域名,第二配置微信网页授权的回调域名,. 构建微信授权的url : https://open.weixin.qq.com/connect/oauth2/authorize?appid

PHP实现微信公众号分享接口

还是一贯风格:用代码说话!!! <?php class ShareModel extends BaseModel { var $appId = APPID; var $appSecret = APPSECRET; public function getJsApiTicket() { $ticket_file = '/dev/shm/jsapi_ticket.json'; $data = json_decode(file_get_contents($ticket_file)); if ($data

微信公众号分享接口签名通过分享无效果（JSSDK自定义分享接口的策略调整）

为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失败. 例如,当前页面是 http://www.abc.com/123,其公众号对应的JS安全域名为 www.abc.com 以及 www.xyz.com,则分享自定义链接 http://www.abc.com/456 可以成功,分享 http://www.xyz.com/123 或 http://w

Vue — 微信公众号内置h5支付相关

首先,在公众号后台配置h5页面地址开发流程 1.通过配置h5地址,获取code.再通过code,获取openid getOpenid(){ let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx697881XXXXXXXX&redirect_uri=https://XXXXX.com&response_type=code&scope=snsapi_userinfo&state=acce

nodejs vue 微信公众号开发（二）申请微信测试号

1.打开微信测试公众号开发平台http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 扫码登陆

node vue 微信公众号（四）配置环境本地测试

1.去natap 配置端口号 //本地项目是8080端口,natapp就配置8080端口 2.ngrok配合vue-cli实现外网访问 1.去 https://ngrok.com/download 下载 3.修改vue-cli中的配置文件build/webpack.dev.conf.js在devServer中添加:disableHostCheck: true,添加完成后,运行npm run dev启动项目 4. 如自己的项目是localhost:8080,在cmd命令下运行ngrok http

node vue 微信公众号（三）启用本地服务器

1.下载nginx http://nginx.org/en/download.html 2.启动服务 3.配置natapp服务,并启动

微信公众号菜单demo

{ "button": [ { "name": "客户中心", "sub_button": [ { "type": "view", "name": "维护申请", "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef02546ba4

在安卓上，微信公众号无法分享到QQ的解决办法之一

今天做一个微信公众号分享功能,参考微信sdk,代码几乎没有任何问题,但就是分享到QQ失败,以下是我QQ分享部分的代码: wx.onMenuShareQQ({ title: '快来和我一起玩转大脑', // 分享标题 desc: '', // 分享描述 link: ‘http://baidu.com’, imgUrl: 'http://iquizoo.com/styles/weixinImg/verifyphone/Icon-60@2x1.png', // 分享图标 success: functi

uniapp - 微信公众号授权登录

[缘由] 采用uniapp进行微信小程序和微信公众号双版本开发:考虑到用户唯一性,我们后端确定了以“unionid”.作为唯一标识. 有的小伙伴估计也是刚入这坑,我就简单说一下步骤流程 [摸索] 很抱歉,这个uniapp是高度仿造微信小程序的,路由管理也是:请不要用vue的路由管理做比较假设我们的入口是:pages/index/index ,那么我们就要在这个页面获取到code码,并且与后端交互对于这种应用,我们一般让后端多次跳转获取到code,然后发送到前端,所以我和后端摸索了一下午,

Vue.js学习 — 微信公众号菜单编辑器(一)

学习里一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&

vue+node.js+webpack开发微信公众号功能填坑——组件按需引入

初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/docs/#/quickstart app.vue <template> <div id="powerrank"> <yd-flexbox> <yd-flexbox-item><span style="font-size: 16

vue+node.js+webpack开发微信公众号功能填坑——v -for循环

页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入修改部门代码 app.vue <yd-flexbox> <yd-flexbox-item>能耗排行</yd-flexbox-item> <yd-flexbox-item>房间号</yd-flexbox-item> <yd-flexbox-item>能耗程度</yd-flexbox-item&g

玩玩微信公众号Java版之七：自定义微信分享

前面已经学会了微信网页授权,现在微信网页的功能也可以开展起来啦! 首先,我们先来学习一下分享,如何在自己的页面获取分享接口及让小伙伴来分享呢? 今天的主人公: 微信 JS-SDK, 对应官方链接为:微信JS-SDK说明文档经过分析,要使用微信SJ-SDK需要完成如下工作: 由以上分析,我们需要做服务器的注入验证,另外在需要分享的页面中引入js文件,这样就可以调用微信JS-SDK中的接口啦~ 下面首先开始实现注入验证功能,主要分为如下几步: 第一步,获取access_token: access_

微信公众号Java接入demo

微信公众号Java接入demo 前不久买了一台服务,本来是用来当梯子用的,后来买了一个域名搭了一个博客网站,后来不怎么在上面写博客一直闲着,最近申请了一个微信公众号就想着弄点什么玩玩.周末没事就鼓捣了下微信公众号的接入.准备工作一台能用域名访问的服务器一个微信公众号给服务器装上jdk.tomcat.ftp.shell工具编码登录测试公众号后台,获取appId和appSecret,新建一个配置文件来保存ppId和appSecret,也可以直接写在代码里,个人不建议这么写,在项目中经常会用

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 项目地址:https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && np

使用vue开发微信公众号下SPA站点的填坑之旅

原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^_^. 我决定实现如下功能架构上,实现前后端分离.方便以后前后端的分工考虑到体验,前端做成SPA站点,也就是单页面应用需要使用微信的JSSDK 需要有微信支付功能作为一个偏后端的半专业前端人士,经过一两周的调研和学习后, 我决定使用如下技术后端使用php搭建接口,本文主要讲前端,不细说 w

vue项目使用微信公众号支付总结

微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签

vue微信公众号分享demo

热门专题