记录一波微信网页开发的流程（一）

2019-07-29 本文已影响0人 Tme_2439

ps：虽然只分为了四个步骤，但是过程中遇到的坑是真滴多。。。

1、已备案的域名一个（微信只认已备案的域名）

登录微信公众平台---->左边菜单‘公众号设置’---->‘开发设置’----->设置’JS接口安全域名'

2、实现内网穿透(便于本地调试开发)

详见我的另一篇文章：https://www.jianshu.com/p/4c9f295fb84c

3、使用Node.js实现签名(无签名无法使用微信网页提供的接口权限相关功能)

编写后端代码获取签名：https://www.jianshu.com/p/0ff044acd0f1

4、开始前端开发

涉及到微信网页功能的接口都需要通过认证后才能使用
前端项目采用Vue.js开发，在index.html中引入微信jssdk链接：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>wx-webpage</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 微信开发接口js文件 -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <!-- 移动端调试文件，使用2.5.2以下的版本即可，3.0的版本配置很麻烦 -->
    <script src="https://cdn.bootcss.com/vConsole/2.5.2/vconsole.min.js"></script>
  </body>
</html>

在App.vue中尝试使用微信网页提供的选择图片功能：

<template>
  <div id="app">
    <button @click="selectPic">选择图片</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    let url = `https://zhulijun.club/wx/sign`
    this.axios(url, { params:{ url: location.href.split('#')[0] } })
      .then(({data: { data }}) => {
        let {appId, timestamp, nonceStr, signature} = data
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId, // 必填，公众号的唯一标识
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature,// 必填，签名
            jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表
        })
      })
  },
  methods: {
    selectPic() {
      wx.ready(() => {
        wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        }
        })
      })
    }
  },
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

开发过程踩到的坑：

1、穿透到本地时，无法访问开发环境的app.js文件，见另一篇文章：https://www.jianshu.com/p/b02fd804c5c4

2、穿透访问报错：Invalid Host/Origin header

解决：在build文件下的webpack.dev.conf.js文件中的devServer字段新增一个属性：

设置disableHostCheck: true：

设置disableHostCheck: true

3、微信网页开发Vue项目启动报错：invalid url domain

invalid url domain

解决：

a.如果是个人账户的appID，则在公众号设置---功能设置---JS接口安全域名，添加安全域名，一般来说，只留一级域名即可。

js接口安全域名
b.如果用的是微信提供的测试账号appID，则需要在测试账号的页面添加安全域名：
地址：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

测试账号

4、调用sdk提示invalid signature无效签名，如果后端调试没有问题的话，就要考虑一下前端的问题，最有可能的地方是前端的项目采用的hash模式，此时传递给后端获取签名的url应为location.href.split('#')[0]

5、调用sdk明明有权限使用却提示 无权限，最有可能的地方是前端的vue项目采用的history模式，应改为hash模式