当前位置：首页 > news >正文

微信小程序开发实用技巧篇

news 来源：原创 2025/5/21 6:48:27

微信小程序开发实用技巧篇

1. 小程序跳转第三方链接（以应用场景小程序跳转H5 为例）

1.1 获取京东短链接：确保你有一个有效的京东短链接。

1.2. 使用微信小程序的 web-view 组件：由于微信小程序的安全策略限制，直接使用 navigator 或 link 无法跳转到外部链接。可以使用 web-view 组件加载一个中间页面，在该页面中通过 JavaScript 进行跳转。

<template >
  <view class="container">
     <web-view src="{{redirectUrl}}"></web-view>
  </view>
</template>

1.3 在小程序中动态生成链接在你的小程序页面的 JS 文件中，动态生成包含目标短链接的 URL：

<script>
export default {
  data() {
    return{
      redirectUrl:''
    }
  },
  computed: {
  },
  watch:{
  },
  onLoad() {
    this.goWebPage()
  },
  onReady(){
  },
  methods:{
    goWebPage(){
      var jdShortLink = 'https://u.jd.com/Q1HLqhV'; // 替换为实际链接
      var encodedUrl = encodeURIComponent(jdShortLink);
      // 定义常量
      const REDIRECT_BASE_URL = 'https://jingdong.xingfu.com/redirect.html?url=';
      try {
        // 确保 encodedUrl 已经正确编码
        const safeEncodedUrl = encodeURIComponent(encodedUrl);
        this.redirectUrl = `${REDIRECT_BASE_URL}${safeEncodedUrl}`;
        console.log("this.redirectUrl"+this.redirectUrl);
      } catch (error) {
        console.error('设置 redirectUrl 时发生错误:', error);
        // 可以根据需求进行进一步处理，例如回退到默认值或通知用户
      }
    }
  }
}
</script>

1.4 准备中间页面。确保你的中间页面 redirect.html 能够接收一个参数来指定跳转的 URL。修改 redirect.html。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跳转中...</title>
    <script type="text/javascript">
        window.onload = function() {
            // 获取 URL 参数
            var urlParams = new URLSearchParams(window.location.search);
            var targetUrl = urlParams.get('url');
            if (targetUrl) {
                window.location.href = decodeURIComponent(targetUrl);
            } else {
                document.body.innerHTML = '<p>无效的跳转链接</p>';
            }
        };
    </script>
</head>
<body>
    <p>正在跳转，请稍候...</p>
</body>
</html>

1.5 在微信小程序管理后台的开发设置中，添加你的服务器域名到业务域名白名单中，确保小程序可以访问该域名。

在这里插入图片描述

1.6

在这里插入图片描述

注：一般情况需要将校验文件加到域名所在服务器的文件目录下。

2. 微信小程序跳转其他小程序

一个简单应用场景模版，仅供参考（以跳转订购电影票小程序为例），

<template >
  <view class="container">
  </view>
</template>
<script>
export default {
  data() {
    return{
      message: 'Light one more thing',
      redirectUrl:''
    }
  },
  computed: {
  },
  watch:{
  },
  onLoad(op) {
    this.goMiniapp()
  },
  onReady(){
  },
  methods:{
    goMiniapp() {
      uni.openEmbeddedMiniProgram({
        appId: 'wx6ce7b07bf7fe6048', // 要唤起的小程序的appid
        path: '/pages/index/index?subplatformid=274958jutuikechaojushenghuo',//要打开B小程序的页面
        extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
        envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产release
        success(res) {
        // 跳转成功
          console.log('success')
        },
        fail(err) {
          console.log(err)
          // 打开失败/取消
          uni.showToast({
            title: '请稍后重试'
          })
        }
      })
    },
  }
}

</script>
<style>
</style>