H5跳转小程序爬坑 – 附成品WP插件

今天要说的是一个199元的故事。是这样的,最近收到微信小程序分享朋友圈和H5跳转微信小程序的内测,据说是7月中旬会上线。想趁新鲜,把自己的Wordpress博客也集成一下这个新功能,赶下时髦。

开始之前,斯基先吐下槽微信小程序分享朋友圈这个新功能,这个好像不是我们想的那样。点完朋友圈分享的小程序后,先到一个H5页面,然后H5页面下方有个“进入小程序”,这。。就不能一次点击去?

朋友圈小程序的跳转这东西我们做不了什么,我们研究一下H5跳小程序这个新方式把,其实这东西很早以前已经集成在公众号中,公众号文章可以插入小程序链接,但这次是开放给所有H5页面。

斯基依旧是个爱偷懒的人,马上就去Wordpress插件搜索了一下,看看有没有先人一步的插件,然鹅居然没有,没关系,小问题,这怎么可能阻挡斯基孜孜不倦求实探真的热情。想着可能是太新了,那就换种方式找呗,经过一连串流弊的操作,终于还是被斯基找到,但是,还没来得及高兴就被199的售价挡住了去路。

斯基不慌不忙摸了摸口袋,嗯,确实没有钱。没有钱,这个199该怎么拿下呢?这真是一个难题,斯基瞬间从床上弹了起来,睡懒觉的心境就这样被打破了。都11点了,也是该起来把前几天的蒸蛋热一热了,连吃几天蒸蛋确实让我精神抖擞,感觉全身都是能量。

打开电脑,又一顿好找,没有更合适的了,那就不找了,自己写一个好了,瞬间省下199。好歹斯基也是有P(pai)H(huang)P(pian)基础的,这种插件看一眼就差不多就能写出来,这点小事能难得到弗斯基吗?

撸起袖子说干就干,不多说,咱们建一个文件夹先。俗话说得好,万事开头难,建文件夹这么难的事情都做完了,后面很简单!想想心里乐开了花。瞬间感受到这个世界满满的爱意。

===2020-07-15更新===

实际上,弗斯基在这个坑里面游了2个晚上泳,有点舍不得起来的意思,到今天准备文字的前几分钟才把这个WordPress插件写完。除了支持H5跳转小程序外,还顺手把文章微信分享(带描述、带图)一起集成好了。

此处应有爬坑过程,省略15000字。

先说说微信分享网页链接,分享带描述、图大概是长这样:

上图两条信息,上面一条是带图带描述的,下面一条是默认分享的样子。

再来看看H5跳转微信小程序,点完页面上的跳转链接,能看到一个跳转提示,点击允许会直接打开小程序。

最后,弗斯基打算把自己写的WordPress插件源码分享给小伙伴们。

领取插件

给弗斯基公众号发送“微信插件”即可领取,免费的,允许商用。

这个插件的安装就不多说了,把插件上传到WordPress wp-content 下的plugin目录,在设置中启用就可以了。

插件设置,分享和跳转需要认证后的公众号,填入Appid和AppSecret,默认分享图和描述是选填的,在分享的时候没获取到描述会用这里的替代。

设置好插件后,在文章需要加入跳转小程序链接的地方把下面的链接贴进去,注意替换小程序的原始id和跳转路径,页面示例代码:

<wx-open-launch-weapp
    id="launch-btn"
    username="gh_xxxxxxxx"
    path="/pages/index/index.html"> 
    <template> 
        <style>.open-weapp { padding: 10px 20px; }</style>
        <button>打开小程序</button>
    </template>
</wx-open-launch-weapp>

H5跳转小程序的运用场景还是挺多的,以前需要在页面里贴二维码,让用户扫码进入,现在可以直接点击进入,省了不少事。目前为止,微信暂时没对H5跳小程序做过多的限制,只要是合法的小程序都支持跳转。想做小程序导航站的小伙伴可以尝试一下这种新方式。

关注弗斯基,更多分享,敬请期待