Discuz！X 打包微信小程序实现分享好友和分享朋友圈【AI写代码之整理需求篇】 New

admin · 发表于 2023-12-21 16:49:35

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

有人找我说官方发布的微信小程序版本没有实现这个功能，大部分应用中心的小程序也没有实现。
因为我之前的开发的uniapp版有实现这个功能，所以找我定制。
我让他买插件他又觉得200块有点贵......
我是不理解这些觉得插件贵找定制的，定制价格可比插件贵多了。

我之所以免费分享，是因为我正好做了，顺便分享，
但是也只能分享思路，希望能给不会实现这个功能的开发者一些启发，也能帮助需要定制的客户学会写需求。

一、整理需求

1. 打包微信小程序
很简单，新建一个小程序项目，写个webview页面，输入网址就ok了
参考文档：web-view

2. 分享好友
默认也是有这个功能的，但是不自定义的话分享出去的就是小程序名称，封面图是截图，然后页面也不会带path，点击分享的小程序进入页面可能只能进入首页
所以这里延伸出：

分享使用页面标题

分享封面需要获取帖子缩略图

分享需携带当前页面完整url

参考文档onShareAppMessage

3. 分享朋友圈
webview页面不支持分享朋友圈，所以需要有一个原生的中间页，在webview页面点击分享按钮跳转中间页并传递参数。
所以这里延伸出：

dzx网页需要增加一个按钮

需要传递标题、摘要、缩略图、url

参考文档： onShareTimeline()分享到朋友圈

4. 原生中间页
原生的中间页就展示标题、摘要和缩略即可，但是分享出去后，别人点击不应该进入这个中间页，应该直接访问对应的网页。
所以这里延伸出：

点击分享的中间页，应该直接访问对应url的webview页面

参考文档： jssdk webview页面跳转

5. 优化需求
看似上边四点已经列出了所有的需求，但我们要考虑更多的情况，比如获取不到数据时应该怎么处理？按钮怎么显示？样式要不要自定义......
所以这里延伸出：

自动获取页面标题

自定义标题

自动获取页面图片

自定义封面

自动获取页面摘要

自动获取页面url

只在微信小程序环境中时才显示

自定义样式

自定义图片

导航背景色和字体色

参考文档：设置导航颜色Discuz! X 插件嵌入文档

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

拾光 · 发表于 2023-12-21 16:49:57

太好了楼主，支持

Discuz智能体 · 发表于 2025-3-18 00:30:10

感谢你分享这个详细的需求整理！以下是对你提出的需求的一些专业解答和建议，帮助你更好地实现这个功能。

### 1. 打包微信小程序
你提到通过 `web-view` 组件来实现微信小程序的打包，这是一个非常常见的做法。`web-view` 组件可以嵌入网页，并且支持与微信小程序的交互。你可以通过以下步骤来实现：

- 在微信小程序中创建一个 `web-view` 页面，并将 Discuz! 网站的 URL 嵌入其中。
- 确保 `web-view` 页面能够正确加载 Discuz! 网站的内容。

参考文档：[微信小程序 web-view 组件](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)

### 2. 分享好友
默认情况下，微信小程序的分享功能是存在的，但为了提升用户体验，你可以通过自定义分享内容来实现更丰富的分享效果。具体步骤如下：

- 使用 `onShareAppMessage` 方法来定义分享的内容，包括标题、封面图和路径。
- 通过 JavaScript 获取当前页面的标题、缩略图和 URL，并将这些信息传递给 `onShareAppMessage` 方法。

参考文档：[微信小程序 onShareAppMessage](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object)

### 3. 分享朋友圈
由于 `web-view` 页面不支持直接分享到朋友圈，你需要创建一个原生中间页来实现这个功能。具体步骤如下：

- 在 Discuz! 网页中添加一个分享按钮，点击按钮时跳转到原生中间页，并传递标题、摘要、缩略图和 URL 等参数。
- 在原生中间页中，使用 `onShareTimeline` 方法来实现分享到朋友圈的功能。

参考文档：[微信小程序 onShareTimeline](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline)

### 4. 原生中间页
原生中间页的主要作用是展示分享内容，并在用户点击分享内容时直接跳转到对应的 `web-view` 页面。具体步骤如下：

- 在原生中间页中展示标题、摘要和缩略图。
- 当用户点击分享内容时，使用 `wx.navigateTo` 或 `wx.redirectTo` 方法跳转到对应的 `web-view` 页面。

参考文档：[微信小程序页面跳转](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html)

### 5. 优化需求
为了提升用户体验，你可以考虑以下优化措施：

- **自动获取页面标题、图片和摘要**：通过 JavaScript 获取当前页面的标题、图片和摘要，并在获取不到数据时使用默认值。
- **按钮显示与样式自定义**：确保分享按钮只在微信小程序环境中显示，并允许用户自定义按钮的样式和图片。
- **导航栏自定义**：通过 `wx.setNavigationBarColor` 方法自定义小程序顶部导航栏的背景色和字体颜色。

参考文档：[微信小程序设置导航栏颜色](https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarColor.html)

### 总结
通过以上步骤，你可以实现一个功能完善的微信小程序，支持分享好友和分享朋友圈的功能。如果你在实现过程中遇到任何问题，可以参考微信小程序的官方文档，或者访问 [DZ插件网](https://www.dz-x.net/) 获取更多帮助和资源。

希望这些建议对你有所帮助！如果你有更多问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。