微信分享自定义图片和摘要

本文涉及的产品
.cn 域名,1个 12个月
简介: 参考:  微信分享实现   微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。

参考: 

微信分享实现

 

微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个,供初次接触微信开发的前端参考。(其实也蛮详细的了,不过有些地方官方没忽略了,容易给新人造成坑)

必要的前提准备

PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个非官方的API
这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:

  1. 微信认证过的公共号

    必须是认证过的,未认证或者认证过期都不行

  2. 一个域名

    需要备案过的

  3. 一台服务器

    因为前端页面需要的appIdsignature是需要后台传递过来的。官方默认后台程序有PHPPythonNodeJava版本,不过我这里以PHP作为演示(后台其实不在本文的解释范围内,超纲了╮(╯▽╰)╭)

配置过程

1. 绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)

2. 获取access_token

这部分工作属于后台开发,主要功能是利用公共号APPIDAPPSECRET从微信服务器获取对应的access_token。由于这部分代码官方有demo,所以直接用官方的sample例子做演示。
下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以PHP为例)。

  1. 将下载得到的压缩包解压后复制php文件夹到网站根目录,然后将需要分享出去的html文件的后缀名改为.php(必须。因为后台不完善所以不能直接ajax获得access_token的值,这里假设需要分享的html页面是index.php
  2. 打开index.php,在html的DOCTYPE声明之前添加一段PHP代码:
    require_once "../php/jssdk.php";/* 这里的文件路径视`php`文件夹所在路径而定。不一定都要一样,个人建议扔到一个所有html文件夹都可以引用的目录*/
    $jssdk = new JSSDK("你的APPID", "你的APPSECRET");
    $signPackage = $jssdk->GetSignPackage();
    ?>

这里的后台代码都是直接拿的官方,小站点可以直接利用,但是大站点请勿直接使用,因为官方的后台代码没有缓存access_token很容易触发每日的2k次API调用上限,一旦到了上限,当天就无法继续认证。所以建议有能力的不要直接用官方的示例代码。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得(需要已经成为开发者,且帐号没有异常状态)

3. 前端配置验证权限

这里是前端的工作,主要是利用前一步得到的access_token来获取签名等认证信息,只有正确的配置才可以正常获取到使用官方js-sdk的权限。
1.引入JS文件
index.php文件里添加一个script标签,引用官方js:

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

 

  1. 通过config接口注入权限验证配置

相关文章
|
7月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
7月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
7月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
7月前
|
小程序 JavaScript
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
|
7月前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
5月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
67 0
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
656 1
|
2月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
82 0
微信小程序:自定义关注公众号组件样式
|
4月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
176 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
4月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置