vue开发微信公众号入门系列

最近需要开发微信公众号，前端使用的vue框架，看完腾讯的，我的内心无比沉重，天噜啦，生无可恋~~~
简单的总结一下吧，

1页面绘制

微信公众号开发而言还是使用基础的html、css、js绘制画面就行，就像h5一样，(一开始没做之前我以为还需要，，，单独学习语言，会死人的啊。还好腾讯比较照顾我们前端)

2获取openid

其实这个做完之后也感觉非常easy了，你只需要把你的页面部署到服务器上，然后呢，后端会给你这样一段url

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

每个参数的意义请查看：微信网页授权
其中redirect_uri成功回调跳转到你的网页，然后后台会给你拼接点参数，从这样

vue微信公众号开发

变成这样
vue微信公众号开发

你就需要从url上获取code/state然后调取后台给你定义的接口就能取到openid了，前端不需要做的太复杂，无非取参数，调接口获取openid。

3vue调取微信sdk分享功能

1.全局分享的页面都是一样的

npm install weixin-js-sdk --save

在你需要的页面引入

  import wx from 'weixin-js-sdk'

直接上代码：


vue微信公众号开发

注意，调取sdk都需要先wx.config，如果成功的话，就再wx.ready里执行，你在wx.config.jsApiList里面能执行的业务，在微信开发者工具里能看到结果。真机调试的时候wx.config.debug=true，用苹果机能弹出详情。


vue微信公众号开发

2.业务需要，有邀请页分享有二维码，其它页面分享都一样
写一个common.js， 
 import {
     verifyConfigForShare
   } from '@/api/weiconfig/weiconfig'
   import wx from 'weixin-js-sdk'
   export default {
     weiconfig: function () {
       verifyConfigForShare({
         url: location.href.split('#')[0],
       }).then(res => {
         // console.log(res)
         if (res.code == 0) {
           wx.config({
             debug: false,
             appId:appId,
             nonceStr: res.data.content.nonceStr,
             signature: res.data.content.signature,
             timestamp: res.data.content.timestamp,
             jsApiList: [
               'onMenuShareTimeline', // 分享到朋友圈接口
               'onMenuShareAppMessage', //  分享到朋友接口
               'onMenuShareQQ', // 分享到QQ接口
               'onMenuShareWeibo', // 分享到微博接口
               'onMenuShareQZone'
             ]
           });
           var shareData = {
             imgUrl: 'http://p9s9revyo.bkt.clouddn.com/%E7%BA%AF%E7%B2%B91.png', // 分享显示的缩略图地址
             link: 'https://home.vankin.com.cn', // 分享地址
             desc: '跨越认知边界，成就美好未来', // 分享描述
             title: '万金科技', // 分享标题
             success: function () {}
           }
           wx.ready(res => {
             wx.onMenuShareTimeline(shareData);
             wx.onMenuShareAppMessage(shareData);
             wx.onMenuShareQQ({});
             wx.onMenuShareWeibo({});
             wx.onMenuShareQZone({})
           })
         }
       })
     },
     addRegister: function () {
       var name = JSON.parse(window.localStorage.getItem('userInfo')).name;
       verifyConfigForShare({
         url: location.href.split('#')[0],
       }).then(res => {
         // console.log(res)
         if (res.code == 0) {
           wx.config({
             debug: false,
             appId:appId,
             nonceStr: res.data.content.nonceStr,
             signature: res.data.content.signature,
             timestamp: res.data.content.timestamp,
             jsApiList: [
               'onMenuShareTimeline', // 分享到朋友圈接口 
               'onMenuShareAppMessage', //  分享到朋友接口
               'onMenuShareQQ', // 分享到QQ接口
               'onMenuShareWeibo', // 分享到微博接口
               'onMenuShareQZone'
             ]
           });

           var shareData = {
             imgUrl: 'http://p9s9revyo.bkt.clouddn.com/%E7%BA%AF%E7%B2%B91.png', // 分享显示的缩略图地址
             link: 'https://home.vankin.com.cn', // 分享地址
             desc: '跨越认知边界，成就美好未来', // 分享描述
             title: name, // 分享标题
             success: function () {}
           }
           wx.ready(res => {
             wx.onMenuShareTimeline(shareData);
             wx.onMenuShareAppMessage(shareData);
             wx.onMenuShareQQ({});
             wx.onMenuShareWeibo({});
             wx.onMenuShareQZone({})
           })
         }
       })
     }
   }

在main.js中全局引入

import common from '../commonFunction/common.js'
Vue.prototype.common = common;

在你需要的页面直接引入

 mounted() { /
     this.common.addRegister();
    //  this.common.weiconfig();
    },

4vue调取微信sdk支付功能

也是在 mounted中请求接口配置 wx.config

 verifyConfig({
          url: location.href.split('#')[0],
        }).then(res => {
          if (res.code == 0) {
            const shareobj = { 
              'appId': appId,
              'timestamp': res.data.content.timestamp,
              'nonceStr': res.data.content.nonceStr,
              'signature': res.data.content.signature,
              'jsApiList': ['chooseWXPay']
            }
            this.shareObj = shareobj;
              wx.config({
              debug: false,
              appId: appId,
              nonceStr: shareobj.nonceStr,
              signature: shareobj.signature,
              timestamp: shareobj.timestamp,
              jsApiList: ['chooseWXPay']
            });
          }
        })

先调取后端接口，获取，再在wx.ready中调 wx.chooseWXPay微信支付

payMoneyForH5(params).then(res => {
            if (res.code == 0) {
              const poas = res.data.content;
              console.log(res)
              wx.ready((res) => {
                wx.chooseWXPay({
                  'appId': appId,
                  'timestamp': poas.timeStamp,
                  'nonceStr': poas.nonceStr,
                  'package': poas.package,
                  'signType': poas.signType,
                  'paySign': poas.paySign,
                  success: function (res) {
                    // alert(res)
                    if (res.errMsg == 'chooseWXPay:ok') {
                      that.$router.push({
                        path: '/pay/wxPaySuccess',
                      }) 
                    }
                  },
                  cancel: function (err) {
                    that.$router.push({
                      path: '/pay/wxPayFail',
                      query: {
                        courseId: that.content.id,
                        orderNo: that.orderId
                      }
                    })
                  }
                })
              });
              wx.error(function (res) {
                console.log(res)
                alert("wx.error")
              });
            }
          })

5调取微信摄像头并上传到后台服务器

也是在 mounted中请求接口配置 wx.config

 init() {
        weixinSignphoto({
          url: url//你当前页面路径
        }).then(res => {
          if (res.success) {
            const shareobj = {
              'appId': res.data.appId,
              'timestamp': res.data.timestamp,
              'nonceStr': res.data.nonceStr,
              'signature': res.data.signature,
              'jsApiList': ['chooseImage', 'uploadImage']//调取摄像头和上传照片sdk
            }
            this.shareObj = shareobj;
            this.wxInit(this.shareObj);
          }
        })
      },
      wxInit(shareobj) {//微信的config
        wx.config({
          debug: true,
          appId: shareobj.appId,
          nonceStr: shareobj.nonceStr,
          signature: shareobj.signature,
          timestamp: shareobj.timestamp,
          jsApiList: ['chooseImage', 'uploadImage']
        });
      },
      ready() {//微信的ready
        wx.ready((res) => {
          wx.checkJsApi({
            jsApiList: [
              'chooseImage',
              'uploadImage',
            ],
            success: function (res) {
              console.log(JSON.stringify(res));
            }
          });
        })
      },

首先点击调取摄像头或相册，再上传到微信服务器，会返回你mediaId，然后上传到后端，后端


vue微信公众号开发

进行下载去，

photoBtnb() {//点击上传照片
        var that = this;
        wx.chooseImage({//调取摄像头或相册
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
              const localIds = res.localIds[0];
              that.src1 = res.localIds[];//可以先相框显示出来你图片，没有上传成功的话在替换回去，我这里没有走downloadImage和getLocalImgData，图省事了;
              wx.uploadImage({//上传到微信服务器，上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id。
                localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得  
                isShowProgressTips: 1, // 默认为1，显示进度提示  
                success: function (res) {
                  const mediaId = res.serverId;
                  that.src1Id=mediaId;//id传到后台
                  const params={};
                  params.mediaId=mediaId;
                  savePicture(params).then(res=>{//传给自己的后台，后台根据这段代码上面的图片去拼接
                    if (res.success) {
                   //干你自己想干的事吧
                    }
                  })
                },
                fail: function (error) {
                  that.src1 = 'http://p9s9revyo.bkt.clouddn.com/HumanFace.png'
                }
              });
        });
      },
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,736评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,167评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,442评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,902评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,302评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,573评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,847评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,562评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,260评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,367评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,016评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2赞 269