Skip to content

小程序 webview 封装

isDebug 根据小程序是否开启debug模式控制h5调试模式 env 区分小程序开发环境, 调用开发环境

ts
import { isDebug } from '~/utils/is'
import { json2params } from '~/utils/util'

Page({
  data: {
    src: ''
  },
  onLoad(option) {
    const path = option.path ?? ''

    this.setData({
      src: this.getUrl(path, { debug: isDebug })
    })
  },
  getUrl(path: string, params: AnyObject = {}) {
    const ENV_URL = {
      develop: 'https://blog.ssxlh.ml',
      trial: 'https://blog.ssxlh.ml',
      release: 'https://blog.ssxlh.ml'
    }
    const env = wx.getAccountInfoSync().miniProgram.envVersion

    return [ENV_URL[(env)], path]
      .filter(item => item)
      .join('/') + json2params(params)
  },

  onWebMessage(e: WechatMiniprogram.CustomEvent) {
    console.log(e.detail)
  },
  onWebLoad(e: WechatMiniprogram.CustomEvent) {
    console.log(e.detail.src)
  },
  onWebError(e: WechatMiniprogram.CustomEvent) {
    console.error(e.detail)
  }
})
import { isDebug } from '~/utils/is'
import { json2params } from '~/utils/util'

Page({
  data: {
    src: ''
  },
  onLoad(option) {
    const path = option.path ?? ''

    this.setData({
      src: this.getUrl(path, { debug: isDebug })
    })
  },
  getUrl(path: string, params: AnyObject = {}) {
    const ENV_URL = {
      develop: 'https://blog.ssxlh.ml',
      trial: 'https://blog.ssxlh.ml',
      release: 'https://blog.ssxlh.ml'
    }
    const env = wx.getAccountInfoSync().miniProgram.envVersion

    return [ENV_URL[(env)], path]
      .filter(item => item)
      .join('/') + json2params(params)
  },

  onWebMessage(e: WechatMiniprogram.CustomEvent) {
    console.log(e.detail)
  },
  onWebLoad(e: WechatMiniprogram.CustomEvent) {
    console.log(e.detail.src)
  },
  onWebError(e: WechatMiniprogram.CustomEvent) {
    console.error(e.detail)
  }
})