浙江省城乡与住房建设厅网站东莞网络推广培训
微信小程序开发实用技巧篇
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', // 要唤起的小程序的appidpath: '/pages/index/index?subplatformid=274958jutuikechaojushenghuo',//要打开B小程序的页面extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产releasesuccess(res) {// 跳转成功console.log('success')},fail(err) {console.log(err)// 打开失败/取消uni.showToast({title: '请稍后重试'})}})},}
}</script>
<style>
</style>