uniapp 朋友圈分享单页面自定义操作

Question

uniapp写的小程序分享朋友圈,点击朋友圈链接进入会跳转到一个微信单页面,现在需要自定义单页面内容并点击自定义内容进入到小程序,有没有会的,麻烦指教一下,目前已完成进度

需要点击1操作时进入小程序

Answer 1

引自免费微信小程序：皆我百晓生

要在uni-app开发的小程序中实现朋友圈分享后，用户点击分享链接进入一个自定义的微信单页，并通过这个页面上的操作（比如点击按钮）进入小程序继续观看完整内容，你需要结合微信官方的网页端SDK（微信JS-SDK）来完成这一系列交互。下面是一个详细的步骤指南，包括如何配置、引入JS-SDK以及编写自定义页面逻辑。

步骤1：获取Access Token和Ticket

首先，你需要在服务器端通过微信API获取到Access Token和用于签名的JsapiTicket。这一步通常不在前端完成，因为涉及到微信公众号或小程序的密钥，应放在安全的后端环境中处理。

步骤2：生成签名

有了JsapiTicket之后，根据微信JS-SDK文档，你需要生成一个签名（signature），它将用于前端验证和调用微信接口。

步骤3：引入微信JS-SDK

在你的自定义微信单页中，通过script标签引入微信JS-SDK库。确保你的域名已经在微信公众号或小程序的后台配置好，并且开启了JS接口安全域名。

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

步骤4：初始化JS-SDK

在页面的JavaScript部分，使用从后端获取的appId、timestamp、nonceStr、signature等参数初始化JS-SDK。

wx.config({
  debug: false, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: 'yourAppId', // 必填，公众号的唯一标识
  timestamp: timestamp, // 必填，生成签名的时间戳
  nonceStr: nonceStr, // 必填，生成签名的随机串
  signature: signature, // 必填，签名
  jsApiList: [
    'updateAppMessageShareData',
    'updateTimelineShareData',
    'onMenuShareTimeline',
    'onMenuShareAppMessage'
  ] // 必填，需要使用的JS接口列表
});

步骤5：编写点击事件处理分享到小程序

由于直接从网页跳转到小程序的具体页面的功能（web-view跳转）主要依赖于小程序内配置的web-view组件和其开放标签属性，而非网页直接触发。但你可以引导用户通过“打开小程序”按钮间接实现这一目的。例如，你可以使用wx.miniProgram.navigateTo来尝试唤起小程序，但这要求用户已经打开了对应的小程序。

wx.ready(function () {
  document.getElementById('clickToEnterMiniProgram').onclick = function() {
    // 注意：此段代码在网页环境下无法直接跳转到小程序，需用户已打开小程序且在小程序内配置了相应的web-view页面
    wx.miniProgram.navigateTo({
      url: 'pages/index/index?scene=someScene' // 小程序内部页面路径及参数
    });
  };
});

注意事项：

• 上述代码中的wx.miniProgram.navigateTo仅在微信环境内且用户已打开对应小程序时有效。对于从外部网页直接跳转到小程序内的特定页面，目前微信官方并未提供直接的API支持，更多的是依赖于用户已经启动的小程序环境。
• 为了确保用户体验，你可以添加提示让用户知道他们需要先手动打开小程序，再进行后续操作。
• 实际应用中，还需考虑用户是否已安装小程序的情况，可以引导未安装的用户先去下载小程序。

综上所述，虽然直接从网页点击跳转到小程序特定页面存在限制，但通过引导用户操作和合理设计流程，仍然可以实现类似需求。希望这些步骤能帮助你解决当前遇到的问题。