微信小程序 web-view 的 url 带参问题

在微信小程序开发过程中，会需要跳转到外部链接，微信提供了 <web-view>组件供我们使用。

为减少重复代码，一般会将这个功能单独抽取为一个页面供大家使用：

<template> <!--   通用 web-view   note：在iOS中，若存在JSSDK接口调用无响应的情况，可在<web-view/>的src后面加个#wechat_redirect解决  --> <web-view :src="url"></web-view> </template>  <script>   export default {     data() {       return {         url: ''       }     },     onLoad(options) {       this.url = options.url     }   } </script>

** 如果上述的 url 携带了参数，那么参数需要经过encodeURIComponent，否则微信 ios 版可能出现页面无法打开的bug。**

p.s.如果参数是一个对象，可以使用qs这个 npm 包将参数序列化一下。

或者用这个(抄的)：

querystring.js

const stringify = obj => {   if (!obj) {     return '';   } else {     return Object.keys(obj)       .sort()       .map(key => {         let val = obj[key];          if (val === undefined) {           return '';         }         if (val === null) {           return encode(key);         }          // NOTE: 如果需要传递数组，请自己和服务端商量好该如何处理         //         // if (Array.isArray(val)) {         //   return val.slice().reduce((r, v) => {         //     if (val2 === undefined) {         //       return r;         //     }         //     return r.concat(encode(key) + '[]=' + encode(v));         //   }, []).join('&');         // }          return encode(key) + '=' + encode(val);       })       .filter(x => {         return x.length > 0;       })       .join('&');   } };  // NOTE: 同样没处理数组 // 问题不是需不需要数组，而是以什么样的形式来传递数组 const parse = str => {   str = str     .trim()     .replace(/^[?#&]/, '')     .replace('/+/g', ' ');    return str.split('&').reduce((r, s) => {     let i = s.indexOf('=');     let key = s.slice(0, i);     let val = i === -1 ? undefined : s.slice(i + 1);      r[key] = val === undefined ? null : decode(val);     return r;   }, {}); };  function encode(value) {   return encodeURIComponent(value); }  function decode(value) {   return decodeURIComponent(value); }  export default {   stringify,   parse };