手机浏览器或微信中唤起小程序

这篇具有很好参考价值的文章主要介绍了手机浏览器或微信中唤起小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务需求的场景

需要在后台管理系统中的列表数据添加复制功能,复制成功的链接能够在手机浏览器或者微信中打开指定的小程序页面(pages/good/detail/index)

使用文档介绍

需要在手机浏览器或者微信中唤起小程序有两种方式, 小程序URL Scheme文档,开放范围:非个人主体小程序

  1. 通过加密 URL Scheme (需要后端获取加密 Scheme)
  2. 通过明文 URL Scheme (可前端直接拼接)

注意:iOS系统可以直接打开URL Scheme,Android系统需要使用 H5 页面中转

实现过程

当前项目使用的技术是 vite-vue-ts,使用明文 URL Scheme方式唤起小程序
安装项目:pnpm create vite my-project-name --template vue-ts

1.列表页复制按钮事件js,实现生成URL Scheme,并复制到剪切板

const handleClick = ()=>{
  // URL Scheme需要进入的小程序页面
  const path = 'pages/good/detail/index'
  // URL Scheme携带的参数
  const query = encodeURIComponent(`goodId=${record.goodId}&other=${record.other}`)
  // 拼接完整的 URL Scheme
  const url = encodeURIComponent(`weixin://dl/business/?appid=222222222222&path=${path}&query=${query}`)
  // 跳转到新增的H5页面的url(看下文),mpAppId公众号id,appId小程序id
  const goodUrl = `${location.origin}/good.html?scheme=${url}&mpAppId=11111111111111&appId=222222222222`
  // 调用后端的接口生成短链接,并复制到剪切板
  return myRequest(`api/short/url`, { url:goodUrl }).then((resp) => {
  	  // 拷贝到剪切板(看下文utils工具)
      copyText(resp.data)
      Message.success('复制成功')
      return resp.data
  })
}

2.需要在现有的后台管理系统项目新建一个H5页面
在vite.config.ts中配置项build > rollupOptions > input 中新增配置项 good:

export default defineConfig({
	// ... 其他配置
	build:{
		rollupOptions:{
		  // ... 其他配置
		  input: {
		     good: path.resolve(__dirname, 'good.html'), // 新建H5
		     index: path.resolve(__dirname, 'index.html'), // 原系统入口页
	      },
	      output: {
	        dir: path.resolve(__dirname, './dist'), // 打包输出问价
	      },
		}
	}
})

在vite.config.ts同级目录下新建good.html文件,并引入小程序微信开放标签JDK的js文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      type="image/svg+xml"
      href="/logo.png"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>跳转中...</title>
    // 小程序微信开放标签
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script
      type="module"
      src="/src/good.ts"
    ></script>
  </body>
</html>

在src下新建good.ts,挂载页面

import { createApp } from 'vue'
import Auth from './Login.vue'
import './themes/login.less'
createApp(Auth).mount('#app')

在src下新建good.vue页面(H5页面),用来跳转小程序(访问复制出来的URL会进入这个页面,然后在点击进入小程序)

<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="good">
  	// 手机浏览器网页直接打开上文复制出来的url
    <div
      v-if="isWeiXin ? false : isMobile"
      class="public-web-container"
    >
      <a
        href="javascript:"
        class="public-web-jump-button"
        @click="openWxApp()"
      >
        打开小程序
      </a>
    </div>
    // 微信中需要使用微信开发标签
    <div
      v-show="isWeiXin"
      id="weChat-web-container"
      class="weChat-web-container"
    >
      <wx-open-launch-weapp
        id="launch-btn"
        class="wx-open-launch-weapp"
        :appid="appId"
        :path="weappPath"
      >
        <component
          :is="'script'"
          type="text/wxtag-template"
        >
          <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color: #fff">
            打开小程序
          </button>
        </component>
      </wx-open-launch-weapp>
    </div>
    // 桌面端提示用手机网页
    <div
      v-if="isDesktop"
      class="desktop-web-container"
    >
      <p>请使用手机打开网页</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 开放标签获取签名(签名需要后端生成)
const getSign = (params: { url: string })=>{
  return axios.get(`/api/get/sign?url=${params.url}`)
}

const isWeiXin = ref<boolean>(false)
const isMobile = ref<boolean>(false)
const isDesktop = ref<boolean>(false)
// mpAppId 公众号id,  appId 小程序id
const { mpAppId = '11111111111111', appId = '222222222222', scheme } = Object.fromEntries(new URLSearchParams(location.search))
const weappPath = ref('')

const errorCb= (e: any) => {
  console.error('错误原因:', e.detail.errMsg)
}

onMounted(() => {
  // 微信页面需要注册开放标签
  document.addEventListener('WeixinOpenTagsError', errorCb)

  if (isWeiXin.value) {
    getSign({ url: encodeURIComponent(location.href.split('#')[0]) }).then((res) => {
      const { data } = res.data
      ;(window as any).wx.config({
        debug: false,
        appId: mpAppId,
        timestamp: data.timestamp,
        nonceStr: data.noncestr,
        signature: data.sign,
        jsApiList: ['uploadImage'],
        openTagList: ['wx-open-launch-weapp'],
      })
    })
  }
})

onUnmounted(() => document.removeEventListener('WeixinOpenTagsError', errorCb))

onBeforeMount(() => {
  const params = new URLSearchParams(scheme)
  const query = params.get('query') as string
  weappPath.value = `${params.get('path')}?${query}`

  // 区分平台
  const ua: any = navigator.userAgent.toLowerCase()
  const isWXWork = ua.match(/wxwork/i) === 'wxwork'
  isWeiXin.value = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'

  if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
    isMobile.value = true
  } else {
    isDesktop.value = true
  }
})

const openWxApp = () => {
  // 非微信中网页
  location.href = decodeURIComponent(scheme)
}
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.good{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.weChat-web-container,
.public-web-container,
.desktop-web-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wx-open-launch-weapp {
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
}
.public-web-jump-button {
  position: absolute;
  bottom: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 184px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 24px;
  box-sizing: border-box;
  background-color: #06ae56;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  text-decoration: none;
  line-height: 1.41176471;
  border-radius: 4px;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.desktop-web-container p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

src > utils > index 工具文件

 // 复制剪切板功能
function fallbackCopyTextToClipboard(text: string) {
  let textArea = document.createElement('textarea')
  textArea.value = text

  // Avoid scrolling to bottom
  textArea.style.top = '0'
  textArea.style.left = '0'
  textArea.style.position = 'fixed'

  document.body.appendChild(textArea)
  textArea.focus()
  textArea.select()

  return new Promise<boolean>((resolve, reject) => {
    try {
      let successful = document.execCommand('copy')
      resolve(successful)
    } catch (err) {
      reject(err)
    } finally {
      document.body.removeChild(textArea)
    }
  })
}

export  const copyText = (text: string): Promise<boolean> => {
  if (!navigator.clipboard) {
    return fallbackCopyTextToClipboard(text)
  }
  return navigator.clipboard.writeText(text).then(() => true)
}

遇到的问题

  1. 链接没有加密,打开网页是空白的,使用encodeURIComponent解决
  2. 链接过长,打开网页是空白的,通过后端生成短链接解决
  3. 注册开放标签注册失败,也会导致网页是空白的

注意事项

  1. 一定要配置 :在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明
  2. 微信开发标签一定要配置:登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

相关文档

链接: URL Scheme文档
链接: 获取短链接
链接: 开放标签文章来源地址https://www.toymoban.com/news/detail-840567.html

到了这里,关于手机浏览器或微信中唤起小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序在电脑版微信小程序可以访问,或者微信小程序服务在电脑浏览器可以访问,但在手机微信上访问不了,打开一片空白,问题在于SSL证书,多少服务器中间证书。

    先通过一下地址检查SSL证书是否正常https://www.myssl.cn/tools/check-server-cert.html     检查到缺少服务器中间证书后,根据已申请的证书crt文件生成中间证书,生成后下载中间证书,将下载的证书打开后复制到crt文件后面保存即可。 复制完成替换原先的证书,重启nginx即可。      

    2024年02月13日
    浏览(62)
  • 帝国CMS手机站限制网页只能在微信浏览器打开的方法

    !DOCTYPE html 有时候我们需要帝国CMS做的网站只能在手机端微信浏览器打开,那么就需要以下步骤了,包括了一个判断方法(前台JS静态判断客户端)! 代码如下: 把以下js代码加到模板里头部 然后在后台栏目-自定义页面-新建个自定义页面-命名为wxError.html 代码以下: 请在微信

    2024年02月03日
    浏览(50)
  • h5跳转微信小程序(微信内部浏览器以及外部浏览器均适用)

    1,先把这个链接给后端 让后端写个接口 获取scheme码 | 微信开放文档 需要把path路径(跳到小程序的那个页面的路径)给后端 2,上代码(vue2框架) 延迟一点拿到路径再跳 完事~

    2024年01月23日
    浏览(68)
  • H5静态页面开发环境跳转小程序(微信浏览器,外部浏览器)

    网上有很多教程,但是具体的坑避不开,这里就以图文形式全流程介绍如何实现微信外环境静态h5跳转小程序。 1.官方开发文档参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html 官方文档只提供了关键代码,但是没说怎么上传静态文件,怎么上

    2024年02月04日
    浏览(76)
  • 微信小程序跳转微信内置浏览器

    最近遇到一个需求,需要微信小程序跳转到微信内置浏览器,但是官网并没有给出相关文档。查阅了大量资料,发现有两种实现方式。 1、通过微信公众号文章实现 小程序可以使用web-view打开关联的公众号文章,公众号文章可以在阅读全文放任一链接,小程序打开此文章后点

    2023年04月11日
    浏览(65)
  • 微信小程序中打开内置浏览器的方法

    因为微信小程序本身是不推荐引流到外部的,所以正规的方法其实都是被禁止掉的。 1.wx.openUrl可直接打开内置浏览器页面 (2021年时可以使用,现在已被禁用) 2.通过原生按钮跳转到小程序客服,客服发送链接卡片,通过卡片的链接进入。 3.跳转到公众号文章,文章底部的查

    2024年02月11日
    浏览(93)
  • PC端浏览器如何访问微信小程序

    小程序通过扫描二维码可以在手机浏览器打开,但用电脑浏览器访问同样的url却不能正常访问。 通过F12打开 开发调试工具,点击toggle device toolbar(如下图)即可。 =================================================================================== 注:获取小程序url 通过网络封包分析软件抓包获

    2024年02月11日
    浏览(62)
  • CSS:浏览器设置placeholder样式 / 微信小程序设置placeholder样式

    一、web 设置placeholder 设置浏览器的placeholder样式 二、微信小程序设置placeholder 在小程序中设置placeholder样式需要使用组件的内置属性。可以通过以下方式设置input和textarea的placeholder样式: 在上面的示例中,placeholder-style属性被设置为一个字符串,包含了CSS样式。在这个字符串

    2024年02月04日
    浏览(64)
  • uniapp新建项目后,如何在浏览器和微信小程序运行

    第一步:新建项目 参考uni-app官网提供了HBuilderX可视化创建和vue cli命令两种方式创建项目,由于HBuilder和它都是DCloud公司的产品,使用它创建项目可以很方便的下载插件什么的。 新建项目很简单: https://uniapp.dcloud.net.cn/quickstart-hx.html 下载HBuilderX,然后参照这个文档点两下选择

    2024年02月03日
    浏览(62)
  • 从短信,H5页面浏览器跳转到微信小程序指定页面

     在H5页面或者短信链接中要进行小程序跳转,所以需要通过生成具体页面的链接进行跳转 1、参考链接生成接口,详见微信官方文档地址:urllink.generate | 微信开放文档      重点参数如图:       2、后端调用api进行生成  请求完的结果: 3、前端页面入口  4、编写一个中间

    2024年02月11日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包