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