使用vue-cli进行微信开发 - CSDN
  • 参考文档:微信公众平台、踩坑记录 一....  JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页...通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等...

     

    参考文档:微信公众平台踩坑记录

    一.简介

      JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题。微信JS-SDK是微信公众号平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

    二.JSSDK使用步骤

    1.绑定域名

      先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

      备注:登录后可在“开发者中心”查看对应的接口权限。

    2.引入JS文件

      在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

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

      或者一步到位使用npm包安装

    3.通过config接口注入权限验证配置

      所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

      我这里是采用了vuex组件来统一管理。

      store.js中的mutations与actions分别如下面两张图所示

      // URLconfig接口注入权限验证配置(接口调用前一个页面必须要来一次这个)
      INITWX (state, params) {
        wx.config({
          debug: state.wx_debug,
          appId: params.appId,
          timestamp: params.timestamp,
          nonceStr: params.nonceStr,
          signature: params.signature,
          jsApiList: params.jsApiList
        })
        wx.ready(function () {
          alert('wx config ok')
          state.wx_configFlag = true
        })
        wx.error(function (res) {
          alert('wx error ok')
          state.wx_configFlag = false
        })
      },
      getWeChatSignature ({commit}, desurl) {
        back.jsSdkGet(desurl).then((response) => {
          console.log(response)
          var initConfigVal = {}
          initConfigVal.appId = 'wx2e8318a57a727f36'
          initConfigVal.timestamp = response.data.timestamp
          initConfigVal.nonceStr = response.data.nonceStr
          initConfigVal.signature = response.data.signature
          // jsApiList可以写死,也可以外部传参进来******是通过push么?
          initConfigVal.jsApiList = ['getLocation', 'chooseImage', 'uploadImage', 'downloadImage', 'getLocalImgData']
          commit('INITWX', initConfigVal)
        })
      },

    4.通过ready接口处理成功验证

        wx.ready(function () {
          alert('wx config ok')
          state.wx_configFlag = true
        })

    5.通过error接口处理失败验证

        wx.error(function (res) {
          alert('wx error ok')
          state.wx_configFlag = false
        })

    三.以调用图像接口为例简单说明

    1.拍照或从手机相册中选图接口以及上传图片接口

      // 拍照或从手机相册中选图接口(get localId)
      PHOTOIMAGE (state, payload) {
        console.log(payload)
        alert('image')
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success: function (res) { // ******这个res是怎么就能得到一个对象?函数本身封装的
            console.log('选择接口调用成功')
            var localIds = res.localIds
            // console.log(localIds)
            state.wx_localIds = localIds
    
            // 上传图图片接口(localId)
            setTimeout(() => {
              wx.uploadImage({
                localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1,显示进度提示
                success: function (res) {
                  console.log('上传接口调用成功')
                  var serverId = res.serverId // 返回图片的服务器端ID
                  state.wx_imgSId = serverId
                  console.log(state.wx_imgSId)
                },
                fail: function (res) {
                  console.log('上传接口调用失败')
                }
              })
            }, 2000)

    2.下载图片接口

      // 下载图片接口(serverId)
      DOWNLOADIMAGE (serverId) {
        wx.downloadImage({
          serverId: state.wx_imgSId, // 需要下载的图片的服务器端ID,由uploadImage接口获得
          isShowProgressTips: 1, // 默认为1,显示进度提示
          success: function (res) {
            console.log('下载接口调用成功')
            var localId = res.localId // 返回图片下载后的本地ID
            console.log(localId)
            // this.$store.commit('newLocalId', localId)
            // 获取本地图片接口
            wx.getLocalImgData({
              localId: localId,
              success: function (res) {
                console.log('获取图片接口调用成功')
                var localData = res.localData // localData是图片的base64数据,可以用img标签显示
                console.log(localData)
              },
              fail: function (res) {
                console.log('获取图片接口调用失败')
              }
            })
          },
          fail: function (res) {
            console.log('下载接口调用失败')
          }
        })
      },

     

    展开全文
  • vue-cli 3.0

    2018-08-23 15:28:07
    vue-cli 3.0 --安装  第一步:先卸载旧版的 vue-cli  关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-...

                                                    vue-cli 3.0 --安装

      第一步:先卸载旧版的 vue-cli

     关于旧版本

    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

     

    第二步:安装vue-cli 3.0

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

     

    第三步:新建项目

     1、新建 hello-world 项目

    vue create hello-world

    2、选择配置

     

    选择第二个  进入配置项

    3、安装依赖

    选择自己适合的依赖   键盘上下移动 , 空格 选择/取消 , 字母 a  全选/取消   回车确定 

    4、依赖

     

    我选择的 yes

    选择 lesss 

    1. 独立文件放置
    2. package.json

    这个选择是 yes 的话 会自动生成一个模板 下次创建的时候  在第二个选择配置的时候 会多出一个 这个配置

     

    最后 可以开始项目了 

     

    备注:如果还想使用 vue-cli  2.0 构建项目的话  安装下面的命令就行

    npm install -g @vue/cli-init
    # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
    vue init webpack my-project

     

    官网地址:https://cli.vuejs.org/zh/ 

    展开全文
  • 本例是vue-cli构建项目下使用微信分享 一、index.html中引入微信官方分享js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js">&lt...

    本例是vue-cli构建项目下使用微信分享

    一、index.html中引入微信官方分享js

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

     

    二、在src下的assets/js文件夹下新建wx.jsapi.js文件,把分享做成公用方法

    使用axios来发送请求,参照https://blog.csdn.net/web_xyk/article/details/79933024配置vue-cli项目的axios

    代码:

    import axios from 'axios'
    
    export default {
    
        wxShowMenu: function() {
    
            axios.post('http://test.xyk.com/wxtest').then(function(res) {
    
                var getMsg = res.data.data;
    
                wx.config({
    
                    debug: false, //生产环境需要关闭debug模式
    
                    appId: getMsg.appId, //appId通过微信服务号后台查看
    
                    timestamp: getMsg.timestamp, //生成签名的时间戳
    
                    nonceStr: getMsg.nonceStr, //生成签名的随机字符串
    
                    signature: getMsg.signature, //签名
    
                    jsApiList: [ //需要调用的JS接口列表
    
                        'onMenuShareTimeline', //分享给好友
    
                        'onMenuShareAppMessage', //分享到朋友圈
    
                        'showMenuItems',
    
                        'hideMenuItems'
    
                    ]
    
                });
    
                wx.ready(function() {
    
                    wx.checkJsApi({
    
                        jsApiList: ["showMenuItems"],
    
                        success: function(res) {
    
                            wx.showMenuItems({
    
                                menuList: [
    
                                    'menuItem:share:appMessage', //发送给朋友
    
                                    'menuItem:share:timeline' //分享到朋友圈
    
                                ]
    
                            });
    
                        }
    
                    });
    
                    //分享到朋友圈
    
                    wx.onMenuShareTimeline({
    
                        title: "分享描述", // 分享标题
    
                        desc: "分享描述", //分享描述
    
                        link: getMsg.shareLink, // 分享链接
    
                        imgUrl: getMsg.imgUrl // 分享图标
    
                    });
    
    
    
                    //分享给朋友
    
                    wx.onMenuShareAppMessage({
    
                        title: "分享描述", // 分享标题
    
                        desc: "分享描述", // 分享描述
    
                        link: getMsg.shareLink, // 分享链接
    
                        imgUrl: getMsg.imgUrl // 分享图标
    
                    });
    
                });
    
            })
    
        }
    
    }

    其中分享链接和图片地址要用绝对地址,图片用方形,大小至少200*200px以上

     

    6月份新版微信客户端发布后,用户从微信内的网页分享消息给微信好友,以及分享到朋友圈,开发者将无法获知用户是否分享完成。所以不再写成功和失败的回调方法。查看具体公告

    !!原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃。新的方法:

    import axios from 'axios'
    
    export default {
    
        wxShowMenu: function() {
    
            axios.post('http://test.xyk.com/wxtest').then(function(res) {
    
                var getMsg = res.data.data;
    
                wx.config({
    
                    debug: false, //生产环境需要关闭debug模式
    
                    appId: getMsg.appId, //appId通过微信服务号后台查看
    
                    timestamp: getMsg.timestamp, //生成签名的时间戳
    
                    nonceStr: getMsg.nonceStr, //生成签名的随机字符串
    
                    signature: getMsg.signature, //签名
    
                    jsApiList: [ //需要调用的JS接口列表
    
                        'onMenuShareTimeline', //分享给好友
    
                        'onMenuShareAppMessage', //分享到朋友圈
    
                        'showMenuItems',
    
                        'hideMenuItems'
    
                    ]
    
                });
    
                wx.ready(function() {
    
                    wx.checkJsApi({
    
                        jsApiList: ["showMenuItems"],
    
                        success: function(res) {
    
                            wx.showMenuItems({
    
                                menuList: [
    
                                    'menuItem:share:appMessage', //发送给朋友
    
                                    'menuItem:share:timeline' //分享到朋友圈
    
                                ]
    
                            });
    
                        }
    
                    });
    
                    //分享到朋友圈
    
                    wx.updateTimelineShareData({
    
                        title: "分享描述", // 分享标题
    
                        desc: "分享描述", //分享描述
    
                        link: getMsg.shareLink, // 分享链接
    
                        imgUrl: getMsg.imgUrl // 分享图标
    
                    });
    
    
    
                    //分享给朋友
    
                    wx.updateAppMessageShareData({
    
                        title: "分享描述", // 分享标题
    
                        desc: "分享描述", // 分享描述
    
                        link: getMsg.shareLink, // 分享链接
    
                        imgUrl: getMsg.imgUrl // 分享图标
    
                    });
    
                });
    
            })
    
        }
    
    }

    三、main.js中引入并挂在vue的原型上

    代码:
    import WXConfig from './assets/js/wx.jsapi' // 微信分享
    Vue.prototype.WXConfig = WXConfig;

     

    四、使用

    代码:
    this.WXConfig.wxShowMenu();

     

     

    展开全文
  • VUE开发SPA之较舒服的微信授权登录
    展开全文
  • 在需要使用的页面进行引入sdk: import wx from 'weixin-js-sdk' 引入 sha1.js (文末放js源码文件) (网上查找的关于sha1的npm包种类繁多。导致编码生成的签名不能使用。此处直接在入口文件 index.html中引入)...
  • 因为本人在学习之前有使用vue-cli来创建项目,在这里直接使用vue-cli3来快速创建项目的目录框架,选用的模板使用uni-app,目录结构如下所示 这里重点浏览src文件,其他文件在用过vue开发项目的同志来说基本都知道...
  • 使用vue-clivue2.0)项目做微信分享自定义样式的请进(都是踩过的坑啊) 微信自定义分享在客户端(iOS和Android)时用不用后端都行,因为他们可以借助友盟...
  • vue开发微信公众号有两种模式,一种是路由的history,另外一种是hash。 如果用hash模式,经过测试发现,在本地跑的话,不论是安卓还是微信都没问题,一发布到线上就出问题了,在ios端根本打不开。 然后,我采用了...
  • 这是公众号的基本开发配置,这里在微信授权的时候就已经需要配置了 但是注意AppSecret在你第一次配置的时候就需要备份下来,如果没有备份那么下次使用的话你就需要去重置它 网页域名授权,你需要填写正确的可以访问...
  • 使用vue-cli构建项目,vue项目,初学vue项目,简单vue项目
  • 一、前言 vue2.0的到来,凭借这其简单易学、完善的API中文文档、丰富的生态系统,成为国内目前十分受欢迎的前端MVVM框架,element-ui是基于 vue2.0的 ui框架,由饿了么团队开发维护的,目前是...使用vue-cli + elem...
  • 步骤一: 检查package.json 中是否有 vue-cli-server,没有则需安装 步骤二 : 执行npm install命令 步骤三: 执行npm run dev 命令,查看程序是否运行正常 如果仍有异常,则检查是否有 node modules 文件有则删除 ;...
  • 第一步安装微信jdk npm install weixin-js-sdk 第二步封装微信接口方法 //微信支付方法 import wx from "weixin-js-sdk"; /* 微信支付方法 获取微信加签信息 @param{data}:获取的微信加签 @param{cb}:...
  • 首先要先保证已绑定安全域名,先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名” 绑定好后再使用npm安装js npm install weixin-js-sdk 安装好后在需要的地方import引入即可 通过...
  • 前段时间工作中用Vue-CLI3构建的Vue工程一些静态资源,比如静态H5页面、图片、图标等等,我们一般放在固定的一些服务器上,链接前缀一般相对固定,但我们打包发布一般要区分测试环境和生产环境,此时的静态资源路径...
  • vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目, GitHub地址:https://github.com/vuejs/vue-cli 一:安装node.js 安装教程:http://www.runoob.com/nodejs/node...
  • 今天不讨论vue-cli架构打包的命令和一些知识,只说问题。 1.我们不能直接在本地中打开 dist目录中的index.html文件,否则导致项目跑不起来。因为根据vue-cli3官网要求项目运行在一个http服务器上。这里先不介绍http...
  • 1、看完了 underscore.js 的源码,分析了下公司项目中在vue-cli基础上扩展的一些webpack配置 2、开始了学习react,并利用 react 开始重写自己的新博客项目了,这次要好好做了,技术栈的话就 react react-router ...
  • 先上效果图: 图1 点击按钮生成图2 (个人分享海报分享,点击分享弹框显示) 图3 点击按钮生成图4 (商品详情分享,点击分享替换掉页面内容) 所需依赖包:qrcodejs2 ... ...下面直接上代码(针对图1 2): ...
1 2 3 4 5 ... 20
收藏数 5,063
精华内容 2,025
热门标签
关键字:

使用vue-cli进行微信开发