使用微信jssdk的经历

1,050 阅读5分钟

为什么使用jssdk

最近工作业务有碰到页面需要嵌入在微信浏览器当中需要自定义分享功能,以及微信浏览页跳到对应的小程序,在网上查了写资料,好像只能借助这个完成,我个人理解是这样,那没办法了,开整!

引入使用(引入的方式看个人习惯以及项目的搭建)

  1. 方式一
    //前提是npm install weixin-js-sdk
    //缺陷:如果你是小程序项目考虑体积的话,这些配置不算主包核心内容,也会占用主包的体积的
    const wx = require('weixin-js-sdk')
  1. 方式二
    在根目录,index.html文件 用script引入  //此方案也不太建议,跟上面大同小异,如果你的项目需要借助一些第三方的包来用的话,不方便维护
  1. 方式三(个人觉得比较适合的方式)
在官网把项目拷贝到自己的项目当中,因为我做的项目属于小程序有分包机制,这些功能也是在分包开发的,所以这种方式觉得比较适合

image.png

引入在输出一下,当你看到下图的时候表示你是引入没问题的了,这个地方注意一个巨坑-引入的版本建议在1.6.0左右了,因为我最先引入的1.3左右的版本,1.3版本很多东西都不能用,分享这些api都不支持!

image.png

初期排坑:

在引用 官方文件的时候源码this问题,如果你引入报下图错误,那应该就是这个坑了,其实这也不算源码自己本身的问题,执行环境不一样,

image.png

官网源码:

image.png

把this改成window即可,因为我这样引入this应该是指向的vue的根对象的,实际源码想要的指向应该是window,如果在 全局使用 srcipt引入应该不会报这个问题!

正常使用

以为引入正常那使用不就是 看看官网api就行了吗,实际好像不是这样,吐槽一下这个微信jssdk的api不是很友好,有些地方讲的也不怎么完善,建议先看一遍文档在去写,官网地址:developers.weixin.qq.com/doc/offiacc…

使用jssdk需要后台的配合,大概意思就是后台给你提供密钥,你拿到密钥配置 jssdk的config,包括配置白名单这些,都是需要做的!

config的配置
const wx = require('./jweixin-1.6.0')

const SERVICE_ENV = process.env.SERVICE_ENV //判断环境
// 所有的分享渠道
const shareList = [
  // 1.4版本分享给朋友及分享到QQ
  'updateAppMessageShareData',
  // 1.4版本分享到朋友圈及分享到QQ空间
  'updateTimelineShareData'
]
// 开启debug
const isDebug = false
const weixinSdk = {
  finishConfig() {
    return new Promise((resolve) => {
      const url = location.href.split('#')[0] //拿到当前页面url(这样拿有个缺陷,如果不是哈希表的这种方式可能拿不到)
      const refreshTicket = false
      //调用后台接口,一般是需要把当前url传给后台,这一步不是我们自己后台要求的,应该是微信的后台要求的!
      getSdk({ url, refreshTicket }).then(res => {
        if (res.code === 1) {
          const wxConfig = res.data
          wx.config({
            debug: SERVICE_ENV === 'production' ? false : isDebug,
            // 必填,公众号的唯一标识
            appId: wxConfig.appId,
            // 必填,生成签名的时间戳
            timestamp: wxConfig.time || 0,
            // 必填,生成签名的随机串
            nonceStr: wxConfig.nonceStr,
            // 必填,签名,见附录1
            signature: wxConfig.signature,
            // 必填,需要使用的JS接口列表
            jsApiList: shareList || [],
            openTagList: ['wx-open-launch-weapp']
          })
          wx.ready(() => {
            resolve(wx)
          })
        }
      }).catch(err => {
        console.log('err', err)
      })
    })
  }
}
export default weixinSdk

配置好了 ,此时我们就可以使用了,主要用到了俩个地方,网页自定义分享,使用微信的开放标签

  1. 微信网页自定义 分享,这个地方调了蛮长时间主要俩个坑,因为是本地联调,配置的时候是配置的测试环境地址,所以本地是拉不起分享,在微信开饭工具网页开发的能看到报错信息,

当你看到控制台输出你配置的信息不是ok的时候 ,但是有你配置的分享信息,这个时候挂载是没有问题的,是属于 正常的因为你本地的地址调 jssdk没有配置白名单,把写的代码发到测试环境,测试即可!

image.png

import weixinSdk from '../components/enSdk'

async getSdk() {
        const wx = this.wx = await weixinSdk.finishConfig()
        const url = location.href
        const shareData = {
          title: 'xxx', // 分享标题
          desc: 'xxx', // 分享描述
          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'xxx' // 分享图标
        }
        wx.updateAppMessageShareData(shareData)
        wx.updateTimelineShareData(shareData)
      },

坑二:使用wx-open-launch-weapp开放标签,官网列子使用云函数配合的好像,当时并不适用我项目,列子地址:developers.weixin.qq.com/miniprogram…

我的需求大概是一个商品列表需要用到商品列表,在网上找了一些大佬使用的demo还不错,但是都不怎么使用,大部分都不是动态熏染的! 这个坑是耽误时间最久的基本上很多钟方式都试过,最好还是用了原生添加dom方式,用script包起来以后是不支持动态熏染了,试了用v-html也不行,好像必须要用script标签,试了很多次都绕不过去!

网上列子:
<wx-open-launch-weapp
                style="width:100%;display:block;height:100%;"
                username="微信原始id"
                path="'pages/index/index'">
                <script type="text/wxtag-template">
                  <style>
                  .imgset {
                  width:100%;
                  height:100%;
                  border-radius: 24rpx;
                  }
                  </style>
                <button>跳转小程序</button>
                </script>
              </wx-open-launch-weapp>

大概的思路就是动态创建wx-open-launch-weapp和里面你需要熏染的一些结构,我这个需求是熏染一个列表,一些图片,结构不是很复杂,在网上页看了很多人家写的,可能自己没理解到真谛把,试了都不太行, 这种最原始的方法觉得是可以的,平时项目都是vue框架用多了,感觉原生js写起来费劲,但是关键时候原生js YYDS!

//实战列子
//html结构
<div class="test-imgs"> </div>

//js结构
//方法在后台接口返回成功赋值以后直接调用即可
getTemplate() {
        const tempDom = document.querySelector('.test-imgs')
        tempDom.innerHTML = ''
        //拿到后台返回的数据对数据进行处理
        this.wonderfulActivityList.forEach(item => {
          const gh_id = configSet.weixinId || 'gh_xxxxxx'
          const scriptDom = document.createElement('script')
          scriptDom.type = 'text/wxtag-template'
          scriptDom.text = `<div style="height:100%;width:100%;text-align:center;">
        <img src="${item.adPicUrl}" style="width:100%;height:100%;border-radius: 12px;"/>
        </div>`

          const weappDom = document.createElement('wx-open-launch-weapp')
          weappDom.style = 'width:100%;display:block;height:100%;'
          weappDom.setAttribute('username', gh_id)
          weappDom.setAttribute('path', item.adLinkUrl || 'pages/index/index')
          weappDom.appendChild(scriptDom)

          const divDom = document.createElement('div')
          divDom.setAttribute('class', 'recommend-img-box')
          divDom.appendChild(weappDom)

          tempDom.appendChild(divDom)
        })
      },

总结:使用了微信的这个第三方小相对来说收获挺多,希望看到文章的你有些许收获,本人第一次 写文章,写的比较拉稀,但是总体方向还是在的,以前也碰到过不少坑,所以现在碰到一写问题记录下来方便自己不碰同样的坑!