小程序开源项目推荐:WordPress 版微信小程序

2019-06-1014:52:21 28 882
摘要

如果你有一定的CSS、HTML等代码基础的话,可以借助这个小程序开源项目深度定制一个专属于自己站点的博客小程序的,再配备一定的美工级别的图片后还是非常高大上的哦!目前明月借助这个开源项目已经实现了本博客微信小程序和公司官网的小程序,点击链接图片扫一扫二维码即可围观体验哦!

最近很多 WordPress 站长们都在微信、QQ 里询问明月的博客小程序是如何实现的?其实明月一只都有在分享博客微信小程序有关的内容,只是有点儿太分散了,没有很系统、专门的介绍过,今天就抽出时间借助【守望轩』博客的文章给大家详细的介绍一下「WordPress 版微信小程序」这个微信小程序开源项目,来实现 WordPress 对接小程序。

小程序开源项目推荐:WordPress 版微信小程序

WordPress 版微信小程序是【守望轩』博主开发的一款开源程序,用于帮助使用 WordPress 的网站用户,通过简单的配置,快速搭建微信小程序,明月的博客小程序就是基于此程序构建。

主要功能

  • 1.缩略图的方式显示文章列表(首页,分类文章),包括显示文章分类和发布时间,加载分页。
  • 2.在首页用轮播方式显示指定文章。
  • 3.显示文章分类(专题),包括显示分类的封面图片。
  • 4.显示文章内容页,包括文章站内链接跳转,站外链接复制到剪切板,显示猜你喜欢的相关文章。
  • 5.显示文章评论,提交评论和回复评论,加载评论分页,显示微信用户评论者的头像。(可以设置是否开启评论)
  • 6.显示热点文章。
  • 7.显示 wordpress“页面”类文字(关于页面)。
  • 8.对文章内容的全文搜索。
  • 9.小程序页面的分享和转发。
  • 10.WordPress 插件的配套功能。
  • 11.文章浏览数显示及更新。
  • 12.文章微信用户点赞及点赞的微信用户头像显示。
  • 13.通过微信支付对文章赞赏。
  • 14.赞赏后发送模版消息。
  • 15.web-view 内嵌网页跳转。
  • 16.回复评论发送模板消息。
  • 17.订阅专题。
  • 18.文章海报(分享微信朋友圈的卡片)。

开源地址

https://github.com/iamxjb/winxin-app-watch-life.net

需要安装 wordpress 插件

程序正常使用需要安装本站开发的 WordPress 插件:REST API TO MiniProgram

下载地址:

WordPress 官方下载地址:https://wordpress.org/plugins/rest-api-to-miniprogram/

官方支持网站

https://www.watch-life.net

安装使用说明

WordPress 版微信小程序安装和使用不够简易,无法通过简单的配置就可以使用,特别是如果没有基本的 wordpress 或微信小程序的知识,是很难搭建成功的。

我尽量从一个非常基础的用户角度来说明安装的过程。

以下是 WordPress 版微信小程序安装使用说明:

1.安装 WordPress

这个步骤感觉说出来是废话,我想说的是建议你使用 WordPress4.7 级以上的版本,因为需要使用 rest json api ,这个版本后这个 api 就包含在 WordPress 里了,不必通过插件来安装。

这里说明一下,在 WordPress 的插件里,有个 json api 的插件,和官方的 rest json api 是不一样的,无法使用在本小程序里。

当然,如果你熟悉 json api 可以修改本小程序去对接 json api 的接口也是可以的。

再次强调使用 WordPress4.7 级以上的版本无需安装 rest json api 的插件。

rest json api 需要在 wordpress 设置固定链接和伪静态才可以正常使用。

2.配置微信小程序的服务器域名和业务域名

在微信小程序公众平台的后台里,选择“设置”=>“开发设置”,对“服务器域名”和“业务域名”进行配置,如下图:

小程序开源项目推荐:WordPress 版微信小程序

其中 request 合法域名必须配置,这个参数保证了小程序可以正常发送 request 请求,程序才能运行起来。同时,这个域名必须备案。

“业务域名”主要用于 web-view 内嵌网页时,用作域名白名单,如果不是业务域名里的域名,在 web-view 内嵌里访问网页时,就会报无法访问的错误。

注意:个人小程序是没有“业务域名”这个配置的,只有认证过的才可以访问 web-view 内嵌网页。

3.配置 HTTPS

如果你的网站支持 HTTS 就可以忽略这步,由于小程序的 request 等请求是需要 HTTPS 的,因此需要网站支持 HTTPS,关于 WordPress 网站开启请参考我写过的文章:WordPress 整站轻松开启 HTTPS。

注意:一定要保证 https 和 http 两种方式都能正常访问网站,才能改这个配置,否则可能导致网站无法访问。

4.安装 WordPress 插件:wp-rest-api-for-app REST API TO MiniProgram

2018 年 11 月 26 日更新:重构了新版本的插件 REST API TO MiniProgram ,原来版本版本插件将不再更新。有关新版本插件的详细介绍见:REST API TO MiniProgram 上线 WordPress 官方插件库

之所以开发这个插件,是因为 WordPress 官方的 rest json api 不能满足小程序定制化的需求,我开发了插件作为官方 api 的补充,这个插件基本是按官方 api 二次开发的规范定制的。

此插件已经在 wordpress 官方插件库上架,安装后,后续的更新都可以在线完成。

插件安装启用后,需要在后台配置一些参数:

1)wordpress 后台 => 设置 =>微信小程序设置

在这个配置界面配置 AppID,AppSecret,小程序首页滑动文章 ID, 前面两个参数在微信小程序的后台可以查到,这里就不赘述。“小程序首页滑动文章 ID”这个参数是为了显示首页滑动轮播的文章。这里的设计我偷了懒,良好的设计应该弹出一个选择框,让用户来选择文章,而不是给个输入框输入 id。

小程序开源项目推荐:WordPress 版微信小程序

文章 id 如何在 wordpress 后台找到呢?其实很简单,看下图你就明白了:

小程序开源项目推荐:WordPress 版微信小程序

2)wordpress 后台 => 分类目录 =>选择一个分类进行编辑

小程序开源项目推荐:WordPress 版微信小程序

这里设置后,在小程序里“专题”页就会看到封面图片了。

5.安装 WordPress 版微信小程序:winxin-app-watch-life.net

下载的地址:https://github.com/iamxjb/winxin-app-watch-life.net

有关在微信小程序的开发工具新建项目,导入程序,我就不赘述了,可以去搜索微信小程序的官方文档,有详细的介绍。

微信小程序项目创建好了后,打开 config.js 文件,config.js 文件的路径如下图:

小程序开源项目推荐:WordPress 版微信小程序

var DOMAIN = "www.watch-life.net";//配置域名,域名只修改此处

var WEBSITENAME="守望轩"; //网站名称

var ABOUTID= 1136; //wordpress 网站关于页面的 id

var TEMPPLATEID = 'hzKpxuPF2rw7O-qTElkeoE0lMwr0O4t9PJkLyt6v8rk';//模版消息 id

配置好以上参数,可以让小程序正常运行。其中:

DOMAIN 就是 wordpress 所在服务器的域名;

ABOUTID 是 wordpress 的“页面”的 id,这个页面 id 的获取和上面说的文章 id 类似。

TEMPPLATEID 是模版消息的 id ,是发送模版消息的必须使用的 id

6.安装微信支付服务端程序

2018 年 11 月 26 日更新:新版插件 REST API TO MiniProgram 已经加入了有关微信支付的程序,只需要在插件里配置商户 id 和密钥即可。

小程序开源项目推荐:WordPress 版微信小程序


基本上完成上述这些后,你的 WordPress 站点小程序算是弄完了,在【微信 Web 开发者工具』里提交你的小程序代码后,等待微信小程序官方客服审核通过后,再在后台提交发布即可上线了。建议提前阅读【微信小程序审核标准』一下,以便加快审核速度。

如果你有一定的 CSS、HTML 等代码基础的话,可以借助这个小程序开源项目深度定制一个专属于自己站点的博客小程序的,再配备一定的美工级别的图片后还是非常高大上的哦!目前明月借助这个开源项目已经实现了本博客微信小程序公司官网的小程序,点击链接图片扫一扫二维码即可围观体验哦!

  • 本博客公众号
  • 扫一扫关注!
  • weinxin
  • 本博客小程序
  • 微信内浏览本博客
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:28   其中:访客  14   博主  14

    • complexray complexray 2

      请问一下,我的服务器在国外,域名是gd的,然后我申请小程序的话,小程序需要备案吗?
      那个web-view是不是不能用,个人的站,没备案

        • 明月登楼 明月登楼 Admin

          @complexray 需要备案的,国外服务器没有可能通过的!域名在后台就无法通过审核的!

            • complexray complexray 2

              @明月登楼 如果我注册oray的二级域名,它是已经备案好的,和我的vps关联上,是不是可行呢?

          • Adoc Adoc 1

            站长,您好,请问这个小程序3.5版本怎么设置才能生成海报内

            • wordpress建站吧 wordpress建站吧 4

              我的站在小程序本地测试了一下,基本可以的,在考虑要不要放上去。。。

              • wordpress建站吧 wordpress建站吧 4

                你的小程序我用了,感觉还不错。。访问量和人气怎么样呢,看到都要在投放广告了。。。

                • complexray complexray 2

                  wordpress在移动端,访问文末的相关文章,或其他文章,页面跳转过去。
                  然后再按返回键,会直接返回到文章列表页。
                  但是TYPECHO在移动端,同样的操作,返回的是上个访问的页面。
                  WORDPRESS的小程序,能实现像TYPECHO的效果吗?

                  另一个问题,WORDPRESS和TYPECHO的小程序,看着差不多,有没有什么对比的介绍?

                    • 明月登楼 明月登楼 Admin

                      @complexray 首先WordPress和Typecho对接的小程序是两套不同作者的开源代码,所以具体的效果肯定是不一样的!这个没有啥可比性!

                        • complexray complexray 2

                          @明月登楼 那wordpress的小程序,能不能设置成,按返回键,返回的是上一次浏览的页面,而不是直接返回到文章列表?

                            • 明月登楼 明月登楼 Admin

                              @complexray 这个只能自己修改小程序代码实现了!

                                • complexray complexray 2

                                  @明月登楼 哦哦。了解了。
                                  我看了一下,这边又有公众号,又有小程序,还有网站,都是你一个人在弄的吗?

                                  • 明月登楼 明月登楼 Admin

                                    @complexray 是呀,都是我一个人!

                            • 马春杰 马春杰 3

                              博主您好,请问您这边的目录是用的什么插件实现的呀?
                              感觉这种一直停在左下角的方式挺好的,我的目录是一直在固定的文章头部,很不方便。
                              可以告知一下吗?

                              • keyuan keyuan 0

                                有没有基于WP的考试系统呢?

                                • 弥雅 弥雅 6

                                  nice,这不少站长有这需求的!

                                    • 明月登楼 明月登楼 Admin

                                      @弥雅 是的,最近总有人问我,干脆发布一个详细的用来应对咨询的!