小程序内嵌网页调用小程序扫码API

如图所示，我需要点击扫码的按钮，调取小程序的API，但是我有两个不同类型的扫码类型，一个是条形码，一个是箱码，所以我在跳转的时候传了一个参数，codeType。

点击事件如下：

		clickScan(type, selectBoxCodesIndex) {
       		 //如果点击的是箱码，需要保存当前点击的index
	        if (selectBoxCodesIndex !== undefined && selectBoxCodesIndex !== null) {
	          this.selectBoxCodesIndex = selectBoxCodesIndex;
	        }
	        //页面的原始地址比如   url?comeInType=addProduct
	        //因为jumpUrl里面带了？的特殊符号所以必须转码一次才能不影响小程序的跳转，
	        //如果不转码则会丢失部分数据
	        //传参都需要转码,对象形式的先转成JSON字符串再转码
	        //去掉之前扫码附加到url上的数据
	        let jumpUrl=window.location.toString().split(`&`)[0]
	        jumpUrl = encodeURIComponent(jumpUrl)
	        //extraParams为一个对象
	        let extraParams = encodeURIComponent(JSON.stringify({codeType:type}))
	        //路径中带两个重要参数，jumpUrl：调取扫码的页面完整路径，extraParams：额外参数，区分条形码还是箱码
	        let path = `/pages/scon/scon?jumpUrl=${jumpUrl}&extraParams=${extraParams}`
	        console.log('跳转到小程序的完整路径', path)
	        window.wx.miniProgram.navigateTo({
	          url: path,
	        })
      },

小程序页面：
页面初始数据中定义jumpUrl和extraParams

data: {
    jumpUrl: ``,
    extraParams: {}
  },

生命周期函数onLoad监听进入页面的加载，得到传过来的参数，jumpUrl和extraParams；

onLoad: function(options) {
    console.log("扫码页面的options", options)
    //jumpUrl需要解码,解码完后即为调取扫码的页面完整路径
    let jumpUrl = decodeURIComponent(options.jumpUrl)
    console.log('jumpUrl', jumpUrl)
    //extraParams:额外参数,为转码后的JSON字符串
    console.log('extraParams', options.extraParams)
    this.setData({
      jumpUrl,
      extraParams: options.extraParams
    })
  },

然后在生命周期函数onReady监听页面初次渲染完成，调用小程序扫码API，成功后将扫码得到的结果传入web网页。

onReady: function() {
    let that = this;
    wx.scanCode({
      success: (res) => {
        let scanResult = res.result
        console.log('扫码结果', scanResult)
        let pages = getCurrentPages()
        let prePage = pages[pages.length - 2]
        //先判断jumpUrl是否路径中带了query，比如：url?a=b
        let hasQuery = that.data.jumpUrl.split(`?`).length != 1
        //构造最终跳转的url，以原始页面的url开始，参数拼到后面
        let finalUrl = `${that.data.jumpUrl}`
        //如果有query，则应该拼接&符号而不是?符号
        if (hasQuery) {
          finalUrl += `&scanResult=${scanResult}`
        } else {
          finalUrl += `?scanResult=${scanResult}`
        }
        //判断是否有额外参数需要拼接
        if (that.data.extraParams) {
          finalUrl += `&extraParams=${that.data.extraParams}`
        }
        console.log(`finalUrl`, decodeURIComponent(finalUrl))
        prePage.setData({
          url: finalUrl
        })
        wx.navigateBack({
          delta: 1
        })
      }
    })
  },

然后web页面再接受从小程序传过来的值。

//将小程序里传过来的值赋给data中的scanValue变量
    beforeRouteUpdate(to, from, next) {
      console.log('进入路由Update钩子')
      console.log('to.query', to.query)
      //扫描条形码返回scanValue
      //url中带了扫码的数据
      if (to.query.scanResult) {
        //取出扫码的结果和附带的额外参数（额外参数用于区分是条形码还是箱码）
        let scanResult = to.query.scanResult
        let extraParams = JSON.parse(decodeURIComponent(to.query.extraParams))
        if (extraParams.codeType === `boxCode`) {
          this.editProductInfo.boxCodes[this.selectBoxCodesIndex].code = scanResult
        } else if (extraParams.codeType === `scavenging`) {
          this.editProductInfo.bottleCode = scanResult
        }
      }
      next()
    },

扫码的功能就完成了。