原文发表于本人博客，点击进入
本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱^_^。
我决定实现如下功能
架构上，实现前后端分离。方便以后前后端的分工
考虑到体验，前端做成SPA站点，也就是单页面应用
需要使用微信的JSSDK
需要有微信支付功能
作为一个偏后端的半专业前端人士，经过一两周的调研和学习后，
我决定使用如下技术
后端使用php搭建接口，本文主要讲前端，不细说
webpack实现前端代码打包
实现数据绑定，实现前端路由
提供UI框架
，提供各种组件，包括对weui的组件化封装
我遇到了如下的坑
微信JSSDK签名出错
微信支付签名出错
微信支付路径要求二级或以上路径
开启调试模式后，微信支付仍然没有错误提示
授权回调处理
微信的模板消息，会自动把url中的问号(?)去掉
微信JSSDK签名出错
JSSDK在普通网站中是没问题的，但是在SPA站点中，签名经常出错
是这么说的
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
也就是说，android下的微信客户端里，不支持vue-router的history模式。
解决办法见支付签名问题
vue-router使用hash模式
每次url更改的时候，重新调用JSSDK的config接口
微信支付签名出错
支付授权的坑，大家可以参考
按照文中的描述，其实我们也可以在js中根据android还是ios，来分别进行处理；但是推荐采用文中的方式，逻辑上更统一，使用也更方便。
另外说明一点，文中的#!做分隔符的方式已经废弃了，大家使用#即可，叹号(!)去掉了
另外就是wx.config的签名url和支付签名url，微信处理也不一样，见下面的解决办法
vue-router路由使用hash模式
每次url更改的时候，重新调用JSSDK的config接口
hash分隔(#)前面加一个问号(?)，如果js判断没有问号，则跳转一次
wx.config签名使用的url，通过window.location.href.split('#')[0]获取
微信支付签名使用的url，通过用window.location.href获取
微信支付路径要求二级或以上路径
在遇到这个问题之前，我的php接口都统一加了一个前缀api，也就是
这样的url，服务器会自动转发给php服务，其他url则转发给前端服务器。遇到微信这个问题后，我把前端url也统一加了一个前缀frontend，这样前端url就变成了
所有前端url，统一加一个/frontend前缀
开启调试模式后，微信支付仍然没有错误提示
不止微信支付，JSSDK的其他接口，也经常没有错误提示，或者提示很模糊，微信这简直是慢性谋杀。
不过我对比发现，ios下的各种提示，要比android下全面很多，如有必要，推荐大家在ios下进行调试
使用iphone进行开发调试
授权回调处理
这个不算坑，只是说下我的处理。
每次加载页面后，我都会调用后台接口判断是否登陆，如果没登陆，则跳转回到后台url进行授权，授权后再跳转回当前页面
微信的模板消息自动去掉url的问号(?)
前面解决微信签名问题的时候，我们给每个url特意加了一个问号(?)，但是我发现，在发送微信模板消息的时候，即使给微信的url是对的，当用户点击模板消息的时候，微信打开的链接中，仍然把问号去掉了，这个很让人无语。考虑到尽量自己解决问题的原则，最后我的解决方案是在js中进行判断处理，自动把缺失的问号加上
如果页面没有问号(?)，则跳转到正确的url，代码如下
function directRightUrl () {
let paths = window.location.href.split('#')
paths[1] = paths[1] || '/'
// 老式的#!分隔跳转
if (paths[0].charAt(paths[0].length - 1) !== '?') {
paths[0] = `${paths[0]}?`
if (paths[1].charAt(0) === '!') {
paths[1] = paths[1].substr(1)
let url = `${paths[0]}#${paths[1]}`
if (window.location.href !== url) {
window.location.href = url
以上代码有三个作用
自动添加问号(?)
自动把分隔符由#!变成#
分隔符后面，自动判断是否为斜杠(/)，没有则添加上
以上就是我在开发过程中遇到的一些还记得的坑，欢迎大家探讨
另外介绍一下我的公众号事事约
这是一个帮助大家实现目标的项目，大家可以定一个目标，交付一定押金，相当于立了一个flag，然后转发给朋友进行监督，根据结果来决定最后押金是给你的朋友还是返还给你
扫描以下二维码可以关注
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
使用vue2.0开发微信页面，使用weixinSDK调用wx.chooseImage时，微信的开发者工具显示正常，但手机点击按钮后无法正常打开相册（安卓测试，苹果未测试），vue的代码如下：
&template&
&div class="Picture"&
&mu-flat-button label="选择" v-on:click.native="chooseImage" /&
&img :src="localIds"/&
&/template&
import wx from 'weixin-js-sdk'
import * as API from './PictureAPI.js'
export default {
name: 'Picture',
localIds: ''
created () {
this.$http.get(
{ headers: { 'X-Requested-With': 'XMLHttpRequest' } }
).then((response) =& {
wx.config({
debug: false,
appId: response.body.appId,
timestamp: parseInt(response.body.timestamp),
nonceStr: response.body.nonceStr,
signature: response.body.signature,
jsApiList: [
'chooseImage'
}, (response) =& {
methods: {
chooseImage () {
wx.chooseImage({
success: function (res) {
// 运行不报错，但手机调试时就是不出现相册
console.log(res)
this.localIds = res.localIds
微信的开发者工具打印的内容为：
[JSSDK Info] chooseImage
{"scene":"1|2","count":9,"sizeType":["original","compressed"],"sourceType":["album","camera"]};
{"errMsg":"chooseImage:ok","localIds":["wxLocalResource://imageid654321","wxLocalResource://imageid456789"]}
求解答！！！
来源: 微信开放平台问答
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
请问你的问题解决了吗我也遇到了同样的问题呢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
建议在执行 wx.chooseImage 前先使用 wx.ready
推荐辅助调试工具
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
解决了吗?我也出现相同的问题了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
1.res.localIds 是个数组。
:src="localIds" 你弄个数组绑定？
2.wx.chooseImage调用完要再调用如下，如果是在wkwebview
ios平台上。
wx.getLocalImgData({
localId: '', // 图片的localID
success: function (res) {
var localData = res.localD // localData是图片的base64数据，可以用img标签显示
备注：此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题。
具体可参考《iOS网页开发适配指南》
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
必须在公众号里打开页面才可以打开相机和选择相册。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：微信jssdk用法汇总
作者：cwzhsi
字体：[ ] 类型：转载 时间：
这篇文章主要针对微信jssdk用法进行汇总，通过ready接口处理成功验证、通过error接口处理失败验证等内容介绍，感兴趣的小伙伴们可以参考一下
本文针对微信jssdk用法进行了详细汇总，分享给大家，供大家参考，具体内容如下
1.绑定域名
2.引入js文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res./open/js/jweixin-1.0.0.js
请注意，如果你的页面启用了https，务必引入 https://res./open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK
3.通过config接口注入权限验证配置
这一步是通过用当前的url向后台发请求拿到一系列参数。即后台会拿我的url去向微信进行认证。这里需要注意的事用于验证的当前的url写法，
let url = location.href.split(‘#')[0];
务必写成以上形势。否则会在进行config时报invalid signature，
确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
注意这里的动态，不要随便自己拼接，同时encodeURIComponent。
type:'GET',
dataType: 'jsonp'
.then((data)=& {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
&4.通过ready接口处理成功验证
config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.ready (()=& {
// alert('ready');
//$('#onMenuShareAppMessage').on('click', ()=& {
// 分享给朋友
wx.onMenuShareAppMessage({
title: '',
link: shareUrl,
imgUrl: '',
trigger: function (res) {
// alert('用户点击发送给朋友');
success: function (res) {
alert('已分享');
cancel: function (res) {
alert('已取消');
fail: function (res) {
alert(JSON.stringify(res));
//分享到朋友圈
wx.onMenuShareTimeline({
title: '', // 分享标题
link: shareUrl, // 分享链接
imgUrl: '', // 分享图标
success: function () {
alert('已分享');
// alert($('.no-num').html());
cancel: function () {
alert('已取消');
// 用户取消分享后执行的回调函数
// alert('取消');
5.通过error接口处理失败验证
config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看
wx.error((res)=& {
alert(res.errMsg);
6.基础接口
&•分享到朋友圈接口
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
cancel: function () {
// 用户取消分享后执行的回调函数
&•分享给好友的接口
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
cancel: function () {
// 用户取消分享后执行的回调函数
如果这里需要在分享的内容中加入用ajax异步请求拿到的内容，必须在ajax请求返回后的成功函数中再调用一次该分享接口，但是必须将分享接口放在wx.ready函数中，不能单独调用。因为客户端分享操作是一个同步操作，这时候使用 ajax的数据还没有返回。
7. 这些步骤看起来似乎比较简单，但是调试的过程中难免会遇到很多问题，因为jssdk接口还是有很多的限制的。一不小心就踩到了坑。
8. 最后，我将这个接口进行了一下封装。
'use strict';
let wxDefaultOptions = {
debug: true,
appId: '',
timestamp: 0,
nonceStr: '',
signature: '',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
//let shareUrl = 'http://xxx' + location.
let getWxParam = (url, wxOptions) =& {
let url = location.href.split('#')[0];
url = encodeURIComponent(url);
let promise = new Promise((resolve, reject)=& {
type:'GET',
url: 'http://xxx/xxx?param='+url,
dataType: 'jsonp'
.then((data)=& {
let wxParam =
console.log(wxParam);
wxOptions.appId = 'wxeb5c3f4a03b880f0';
wxOptions.timestamp = wxParam.
wxOptions.nonceStr = wxParam.nonceS
wxOptions.signature = wxParam.
wx.config(wxOptions);
wx.error((res)=& {
alert(res.errMsg);
resolve();
}, (error)=& {
console.log(error);
//分享到朋友圈
let shareSocial = (param)=& {
wx.onMenuShareTimeline({
title: param.title, // 分享标题
link: param.link, // 分享链接
imgUrl: param.imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
param.suCallback();
cancel: function () {
// 用户取消分享后执行的回调函数
param.failCalback();
//分享给好友
let shareToFriends = (param) =& {
wx.onMenuShareAppMessage({
title: param.title,
desc: param.desc,
link: param.link,
imgUrl: param.imgUrl,
trigger: function (res) {
success: function (res) {
param.suCallback();
cancel: function (res) {
fail: function (res) {
param.failCalback();
console.alert(JSON.stringify(res));
//title,desc,link,imgUrl,suCallback, failCalback
let jssdk = (param) =& {
wx.ready(()=& {
//分享到朋友圈
shareSocial(param);
shareToFriends(param);
function callWx(param, wxoptions) {
getWxParam(param.url, wxOptions).then(()=& {
jssdk(param);
//param = {url: '', title:'',desc:'',link:'',imgUrl:'',suCallback:func, failCalback: func}
module.exports = {
wxDefaultOptions,//更改配置
callWx, //默认配置，进行config配置 和ready后定制微信分享内容,
本文已被整理到了《》，欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇：小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
Vue项目中引入了微信JS，但是在调用具体的方法的时候发现不起作用,调用代码如下
import {AButton, AButtonList,Slider} from "./../components/vue-amazing";
import wx from "wx";
export default {
replace: true,
components: {"a-button": AButton, "button-list": AButtonList, Slider},
list: [{title: '测试1', path: "/a"}, {title: '测试2', path: "/b"}]
created(){
wx.getNetworkType({
success: function (res) {
var networkType = res.networkT // 返回网络类型2g，3g，4g，wifi
alert(networkType);
wx.hideAllNonBaseMenuItem();
wx.hideOptionMenu();
compiled: function () {
const _this =
clearTimeout(this.timeout);
this.timeout = setTimeout(function () {
_this.$dispatch("loading", false)
如代码所示，我在created的时候调用了获取网络状态以及隐藏右上角菜单的接口，但是没有任何效果，只有再次跳转回来或者重复调用该方法才有效果
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
调用微信js要等待jssdk加载完成，放到wx.ready里面试一下。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
最近使用vuejs做了一个公众号页面，因为涉及到分享，需要调用微信jssdk。
网上找了些参考资料，我是这么实现的：
写了服务端接口，获取 token，计算签名
前端组件里，在了ready里面，先通过this.$http.get调用服务端获取签名，再调用wx.config进行初始化
这样做的后果是，每次都需要一个http请求，所以微信jssdk初始化速度慢，同时注册的微信API，有时候生效，有时候不生效，不知道是什么原因导致的。
我就注册了一个API，如下：
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
cancel: function () {
// 用户取消分享后执行的回调函数
突然换到vuejs，有点理不清，请各位赐教，在vuejs里面如何初始化及注册微信SDK最合适？或者有没有可参考的代码？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
既然你写了服务端接口,为什么不通过cookie把token传过来呢
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：