用vue开发一个公众号商城SPA——2.接入微信公众号

2018-07-14 admin

微信公众号网页开发流程

1. 申请服务号,认证

微信公众平台分为服务号,订阅号,小程序和企业微信。 订阅号任何人都可以注册,但是功能受限,只能发发文章啥的; 服务号注册是必须要商户号,所以只能企业或组织注册,服务号功能完整,认证后的服务号的自定义菜单可以配置跳转网页地址,因此开发微信商城必须要服务号或订阅号的测试账号 小程序就不说了; 企业微信没用过,感觉是腾讯出的类似钉钉一样的办公服务。

2. 配置自定义菜单跳转网页地址

把你的vue应用放到一个有域名的服务器中,在微信公众号平台配置自定义菜单的跳转网页地址: 图片描述 我这里用的是自己的订阅号,会提示你认证,但是又只有服务号才能认证,所以现在的订阅号做不了网页了。必须要服务号才行,但是开发的时候还是可以用订阅号生成测试账号来开发网页的。

3. 开发,调试微信网页的正确姿势

首先,不可能为了开发微信网页而去申请服务号,其次,订阅号虽然没有开放网页,但是依然可以通过测试号来进行开发,测试号开放了所有接口,所以比服务号还要方便: 图片描述 然后,在服务号中开发时,我们是通过配置了地址的自定义菜单访问页面进行调试的,这个地址必须是外网能访问的域名,不能是ip地址,这就意味着每次我们写了代码,要想调试就必须打包,上传到服务器才行,这样显然不科学。 我们希望开发微信网页能和开发pc端页面一样,通过本地npm run dev实时进行调试,这是完全可以实现的。原理是npm run dev的时候,webpack-dev-sever会在电脑上启一个web服务,如果把你的电脑配置一个域名,能在外网中访问,那么在微信中就能访问到你的电脑上的东西了。这是就需要内网穿透,他就是用来把你的电脑暴露在外网中,我使用的是natapp,免费,跟着官网教程一步一步走就可以了,最终你会获得一个你指向你本机的域名,我们在微信中打开这个域名,就能访问到本地的项目了。

4. 使用微信授权获取用户信息,微信扫一扫等

获取用户信息——微信授权

如果需要获取用户的微信信息,相当于要使用微信的获取用户信息的接口,因此需要在公众号平台接口权限中配置**网页授权**这么一个东西。登录公众平台,点击左下角接口权限,找到网页服务,找到网页授权,点击修改,输入域名,这里的域名就是你页面的顶级域名,和你之前配置自定义菜单时的域名一样就行。使用内网穿透本地开发的时候,域名就是穿透工具生成的你的本机域名。

配置好域名后就可以按照开发文档使用api了,微信授权是通过window.location.href并携带规定的参数,跳转到指定的链接,进行授权后在跳转回来,具体可以查看文档,贴下代码:

/**
 * 微信授权
 * config:
 *  appId - 公众号appId
 *  REDIRECT_URI - 回调域名,授权后跳转的地址
 *  SCOPE - 授权类型,snsapi_userinfo/snsapi_base
 */
export function auth () {
  /* eslint-disable */
  let
    appid = 'xxxxxxxxxxxxx',
    oldURL = window.location.href,
    REDIRECT_URI = oldURL.split('#')[0],
    SCOPE = 'snsapi_userinfo',
    url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + REDIRECT_URI + '&response_type=code&scope=' + SCOPE + '&state=1#wechat_redirect'

  window.location.href = url
}

/**
 * 获取授权后的code
 * @returns {*}
 */
export function getCode () {
  let url = window.location.search
  if (url === '') {
    return false
  }
  let code = url.match(/^\?code=(.+)&/)[1]
  return code
}

微信扫一扫,支付,坐标等——JSSDK

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

其实就是微信提供的api,使用之前也是需要先配置一下: 配置js安全接口域名,和配置网页授权的域名一样, 按照文档的方法还需要下载一个文件到你的域名所在的根目录下,比较麻烦,推荐直接npm install weixin-js-sdk安装使用。 调用api之前需要先注册,注册需要一些参数,比如timestamp,nonceStr,signature这些,这些都是由后端给我们的,其中signature签名需要我们给后端传一个url过去,这个url可以是项目的顶级域名就行,比如是www.1234.com,这样www.1234.com/a,www.1234.com/a/b对应的页面不需注册也能直接调用jssdk,需要注意的是该url中不能有#,可以有?。贴下代码:

import wx from 'weixin-js-sdk'
import request from 'utils/request'
import Vue from 'vue'

export function getJSSDK () {
  request({
    url: '/api/weixin/signature',
    params: {strUrl: window.location.href.split('#')[0]}
  }).then(res => {
    const {nonceStr, signature, timestamp} = res.data
    wx.config({
      appId: 'wxd29975a339dc95e6', // 必填,公众号的唯一标识
      timestamp, // 必填,生成签名的时间戳
      nonceStr, // 必填,生成签名的随机串
      signature, // 必填,签名
      jsApiList: ['scanQRCode', 'openLocation', 'getLocation'] // 必填,需要使用的JS接口列表
    })
    wx.ready((res) => {
      console.log('wx.ready', res)
    })
    wx.error((err) => {
      console.log(err.errMsg)
    })
  })
}
Vue.prototype.$wx = {
  scan () {
    return new Promise((resolve, reject) => {
      wx.scanQRCode({
        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
          console.log(res) // 当needResult 为 1 时,扫码返回的结果
          resolve(res.resultStr)
        },
        fail: function (err) {
          console.log(err)
          reject(err)
        }
      })
    })
  }
}

其他接口看文档调用就行。

5. 腾讯地图–计算两地距离接口

项目中有个需求,需要计算用户当前位置和商店的距离,微信JSSDK提供了获取用户位置的接口,商店的经纬度坐标后端也提供了接口,但是如何计算两点的距离,是个问题。自己算最多也只能算个球面距离,并不准确,所以我猜想各种地图应该有这种基本的接口,果不其然,说在怎么在项目中使用: 登录网站,注册一下,登录后生成一个开发密钥(Key),后面会用到。先看看有些啥东西: 图片描述 其他的就不说了,我需要的是在WebService API里面的距离计算,其实就是一个http请求接口,传规定的参数,返回距离给你,需要注意的是在项目中要设置代理,因为跨域了,官方文档写的很清楚了,贴下代码:

// config/index.js 配置代理
 proxyTable: {
      '/tcApi': {
        target: 'https://apis.map.qq.com',
        changeOrigin: true,
        pathRewrite: {'^/tcApi': ''}
      }
    }

// 封装下接口
import request from 'utils/request'

const tcMapKey = '你的开发密钥(Key)'

export function distance (from, to) {
  return request({
    url: '/tcApi/ws/distance/v1',
    params: {
      from,
      to,
      key: tcMapKey
    }
  })
}

原文链接:https://segmentfault.com/a/1190000015632844

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35959.html

文章标题:用vue开发一个公众号商城SPA——2.接入微信公众号

相关文章
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
回到顶部