微信小程序 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
};