公众号(H5)及小程序的发布流程

⚠️ Web平台本API之前调用了腾讯地图的gcj02坐标免费转换接口,该接口从2024年7月18日起被腾讯逐步下线,导致老版本中本API无法使用。请立即升级到 uni-app 4.24版。

⚠️ 这里说的 uniapp 升级到 4.24 版的意思,就是使用 4.24 版本 HBuilderX 工具的重新发布操作一次即可;

即:多商户店铺街无法定位的原因

一、发布工具准备

  1. 发布必须是用 HBuilderX 工具,下载地址: https://hx.dcloud.net.cn/Tutorial/install/windows

  2. 注意 HBuilderX 工具版本必须是大于等于 4.24 版本,原因: https://zh.uniapp.dcloud.io/api/location/location.html

  3. 查看版本,安装完成后,打开 HBuilderX 最上面就有显示

在这里插入图片描述
二、导入 项目

  1. uniapp 项目的源代码,例如多商户源代码位置(uniapp.zip): https://doc.crmeb.com/mer/mer2/6055 ;

  2. 找到源码压缩包,进行解压;

  3. 直接将整个解压出来的文件夹拖入 HBuilderX 工具中在这里插入图片描述
    三、如果需要用到定位则需要配置地图 key,例如:店铺街中的定位;

  4. 申请地图 key,以腾讯地图为例,申请地址: https://lbs.qq.com

  5. 注意事项:在这里插入图片描述
    三、配置地图 key

  6. 修改移动端在这里插入图片描述

  7. 修改后台在这里插入图片描述
    四、配置请求地址

  8. 如果是 H5 并且不是独立部署,可以跳过此步骤;

  9. 如果是小程序,则必须是 https 和 wss

在这里插入图片描述
五、发布

  1. 点 【发行】,是【发行】 【不是运行】,如果点开都是【灰色】的,说明没有选中项目,点击一下这个项目中的任意一个文件即可

在这里插入图片描述
2. 如果选择发布端在这里插入图片描述
3. 如果是发布小程序,需要下载小程序运行工具,下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

六、 最后一步

  1. H5 代码上传到服务器,将打包好的这个文件夹下的文件全部打包,上传到服务器项目的 public 目录下

在这里插入图片描述
2. 小程序发布 :

https://doc.crmeb.com/mer/mer2/4269

https://doc.crmeb.com/mer/mer2/4270

### Vue 开发公众号 H5 页面跳转小程序的方法 在Vue项目中实现从微信公众号H5页面向小程序跳转主要依赖于`<wx-open-launch-weapp>`组件以及必要的配置工作。具体来说,在HTML结构里需引入特定的小程序开放标签,并确保这些标签被允许使用。 对于希望集成此功能的应用而言,服务器端返回的数据包内应该含有一个名为`openTagList`的数组属性,其中至少要包含字符串`'wx-open-launch-weapp'`作为其成员之一[^2]。这一步骤是为了告知前端哪些自定义标签是可以安全使用的,从而避免浏览器出于安全性考虑而阻止未知标签的行为。 当上述准备工作完成后,则可以在实际的HTML文档中编写如下所示的按钮元素来触发跳转动作: ```html <!-- HTML --> <button wx:if="{{canUse}}" open-type="launchApp" app-id="__APPID__" path="/page/index">前往小程序</button> ``` 这里需要注意的是,为了使该按钮能够正常运作并成功启动目标小程序开发者应当替换掉模板中的占位符(即双下划线包围的部分),填入真实有效的应用ID(`__APPID__`)和预期打开的小程序内部路径(path)[^1]。 与此同时,在JavaScript逻辑层面上也需要做一些额外处理以增强兼容性和用户体验。下面是一段简单的脚本片段用于说明这一过程: ```javascript // JavaScript (Vue Component Method) methods:{ handleLaunchMiniProgram(){ const appId = 'your-mini-program-appid'; // 替换成自己的小程序appid const pagePath = '/pages/home/home?query=example'; // 可选参数 try { wx.miniProgram.switchTab({ url: pagePath, }); } catch (err){ console.error(err); // 如果失败则尝试另一种方式 window.location.href=`weixin://dl/business/?tousername=${appId}&path=${encodeURIComponent(pagePath)}`; } }, } ``` 这段代码首先试图调用微信内置API `switchTab()` 来平滑过渡到指定的小程序界面;如果遇到异常情况(比如当前环境不支持此类操作),那么就退回到传统的URL Scheme方式进行重定向。这种方式可以有效提升跨平台的一致性体验[^4]。 最后值得注意的是,整个流程的成功执行离不开正确的微信公众账号设置及其关联的小程序授权关系的确立。只有当两者之间建立了合法绑定之后,以上提到的技术手段才能顺利发挥作用[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值