使用JS-SDK开发公众号微信网页的完整步骤

//app.vue
onMounted(()=>{
	//因为部分情况会导致这边存入未更新  所以进行更保险的清除
	localStorage.removeItem('wxUrl')
	localStorage.setItem('wxUrl', location.href.split('#')[0])
})

//需要使用的地方（info.vue）
const wxConfig = () =>{
	let signLink = ''
	let ua = navigator.userAgent.toLowerCase()
	// 判断设备为ios还是安卓
	if (/iphone|ipad|ipod/.test(ua)) {
	  //ios
	  signLink = localStorage.getItem('wxUrl') || ''
	} else {
	  //安卓
	  signLink = location.href.split('#')[0]
	}
	
	// 走后端接口，获取timestamp，nonceStr，signature等信息
	const res = await configInfo(signLink)

	wx.config({
	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: ..., // 必填，企业号的唯一标识，此处填写企业号corpid
	    timestamp: res.timestamp, // 必填，生成签名的时间戳
	    nonceStr: res.nonceStr, // 必填，生成签名的随机串
	    signature: res.signature,// 必填，签名
	    jsApiList: [
	      'previewImage',
	      'uploadImage',
	      'downloadImage',
	      'getLocation',
	    ] // 必填，需要使用的JS接口列表
	})
}
  

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

// 获取当前的时间戳字符串
export const getCurrentTimeStamp = () => {
  return new Date().getTime().toString()
}

// 生成字母数字随机数字符串
export const getRandomString = (length: number) => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  let result = ''
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});