WordPress版微信小程序安装使用说明

昨天在群里,有刚刚使用WordPress版微信小程序朋友,在问安装过程中的问题,这些问题是经常被问到,这至少说明两个问题:

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

2、缺乏一个简明的安装使用说明。这是我昨天晚上刚刚意识到的,虽然我写了不少的文章来说明如何安装使用,但至今没有一个按流程一步一步指导使用者进行安装。这是我的失误吧,很明显还是从一个技术人员的角度来思考,缺乏用户体验的角度。

基于此,才有本篇,我尽量从一个非常基础的用户角度来说明安装的过程。

以下是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设置固定链接伪静态才可以正常使用。

有关rest json api 的使用以及固定链接、伪静态可以参考文章:WordPress版微信小程序开发系列(一):WordPress REST API

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

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

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

“业务域名”主要用于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的官方插件库,所以只能通过github下载。因此安装的方式是,直接上传文件夹到wordpress的插件目录,然后启用。

注意:从github下载的插件包,文件夹变成了wp-rest-api-for-app-master在安装插件的时候,插件目录的名称要改成:wp-rest-api-for-app

插件的下载地址:https://github.com/iamxjb/wp-rest-api-for-app

REST API TO MiniProgram https://wordpress.org/plugins/rest-api-to-miniprogram/

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

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

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

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

rest-api-to-miniprogram

rest-api-to-miniprogram

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

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

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

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

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

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

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

 

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,有关模版消息参看文档:WordPress版微信小程序2.4版发布 ,这篇文章里有如何设置模版消息的说明。

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

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

如果你开通了微信支付,并使用WordPress版微信小程序的“赞赏”共功能,就需要安装微信支付服务端程序


官方支持微信号: iamxjb

 

微信号

官方技术群:WordPress版微信小程序

由于微信群超过100人,无法再扫描二维码加入。如果你想加入,请先加我的微信:iamxjb ,我拉你入群。 

WordPress微信小程序知识星球(小密圈)

考虑到微信群里交流过于庞杂和碎片化,无法提供更专业的技术服务和知识分享,很多好的知识不能很好沉淀和积累,无法提供更好的分享价值,同时我也有意和兴趣相投人一起,创建一个wordpress和微信小程序的知识社区。基于此,我在“”里创建了一个“Wordpress微信小程序”的圈子,欢迎有兴趣的朋友和我一起创建一个有活力、创造力、有趣、有深度的知识社群

 

 

 

你可能也会喜欢以下文章:

WordPress版微信小程序安装使用说明》有279个想法

  1. Holmes

    请问一下在小程序工具里是能正确显示的,但一旦预览就会跳出“暂时无法访问网络,下拉重试”,这是什么问题呢。。。。

    回复
      1. Holmes

        再想问您一个问题,小程序里看网站的文章会不会损耗主机的流量呢

        回复
  2. Kong

    请问,在微信小程序端访问了wordpress上的文章,通过这种调用api的方式,是不是也相当于在pc端访问wordpress,可以增加wordpress网站的访问量

    回复
    1. xjb 文章作者

      小程序的访问量和网站访问量是两个途径,无法记入网站访问量,对搜索seo并无多大的帮助。

      回复
    1. 田力

      me too 啊。用的开源v3.6,也是这种情况。暂时无法访问网络,下拉重试

      回复
  3. 钱生

    开源版本首页文件中有个客服默认是屏蔽的,请问开启后在小程序后台加客服后还需要设置哪里

    回复
  4. chen

    谢谢博主 很好的小程序。有个问题,时不时wordpress 会报Out of memory 的问题,请问博主是哪里的问题呢?

    回复
  5. 大大的小学生

    大佬,请问我关于页面空白是什么情况,原本就是空白的吗?怎么加东西呢?

    回复
    1. 随心而码

      config.js里面
      var ABOUTID = 52; //小程序“关于”页面的id,此id是wordpress网站”页面”的id,注意这个”页面”是wordpress的”页面”,不是”文章”

      回复
  6. 魏星博客

    你好朋友,请问点击微信登录按钮没有任何反应出现以下错误
    XXXX.com/wp-json/watch-life-net/v1/weixin/getopenid 404 (Not Found)
    首次加载出现以下错误
    XXXX.com/wp-json/watch-life-net/v1/post/swipe 404 (Not Found)

    麻烦指教一下,谢谢!!

    回复
  7. 伟大的老王

    老大,请问这个能解决么?阿里云的主机就能支持到5.5啊。。。
    “php版本小于5.6.0, 插件程序将无法正常使用,当前系统的php版本是:5.5.30”

    回复
  8. Neil

    我在GitHub上下载了程序,发现config.js里面的消息模板是“鼓励消息”和“评论回复”这两个…请问应该选用什么模板呢?

    回复
  9. 90人网络

    你好,我刚才在本地测试,按照介绍修改后,首页显示暂时无法访问网络,下拉重试…
    不知道是哪里没搞对?

    回复
    1. 红锡包

      我和你一样的问题,顺便请教站长:如何获取页面ID?

      回复
    2. CBAT

      在小程序项目设置-勾上 “不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书” 这一项

      回复
      1. 张三

        勾上 “不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书” 这一项也还是一样,显示暂时无法访问网络,下拉重试啊,console也没显示错误。。。还有人遇到过吗?怎么解决的?

        回复
        1. junshi

          你好,我用你最新版的小程序没有图片的文章,首页里显示空白,但是排行版里就可以显示出默认的缩略图,首页就显示不出来

          回复
  10. Monster

    大佬,小程序上面显示文章代码格式怎么调?测试了一下,代码只显示一行,而且没有代码格式。

    回复
  11. blue001

    小程序首页滑动文章ID能不能和网站首页同步,这么手动输入ID感觉好麻烦的说

    回复
  12. 无极

    我在MAC版的微信开发工具里创建好项目后,没有看到config.js这个文件?

    回复
  13. kim

    插件装好了,也能设置插件,就是文章分类里看不到小程序项目这个输入框。请问下是什么问题呢?

    回复
  14. var HOST_URI = ‘https://’ + domain+’/wp-json/wp/v2/’;
    var HOST_URI_WATCH_LIFE_JSON = ‘https://’ + domain + ‘/wp-json/watch-life-net/v1/’;

    这个错误,导致小程序调用不到网站内容

    回复
  15. 老大你好

    文章页怎么显示标签啊

    用这个出不来{{detail.category_tag}}

    回复
  16. 天空

    谢谢站长提供这个插件!反馈个问题:安装小程序插件后,最新版本的gutenberg无法保存和发布文章。卸载就正常了。使用的是WPCOM主题。

    回复
  17. 乱云AKAY

    无意间搜索WordPress+小程序的关键词到这里,被博主详尽的文档所折服了,感谢博主的分享!

    回复
  18. 中年

    大神们,小程序跳转小程序怎么用,shelf这个文件夹里面文件哪位大神有啊[抱拳]

    回复
  19. lu

    作者你好。
    发现一个bug,文章有视频的话不能显示该文章
    不知道是bug还是什么?

    回复
  20. kissrain

    我现在用的主题,在微信小程序里获取不到文章,而换成别的主题,就可以正常使用,请问如何解决?

    回复
  21. tianzijian

    請問我使用您的小程序源碼搭建成功後,首頁點加載更多出現的內容還是原本顯示的10篇文章,還有專題頁面的內容也都是一樣的,無法區分是什麼原因導致的呢?

    回复
  22. 老路

    您好,插件上次到目录,后台启用插件,提示错误,请问这个怎么解决?

    无法启用插件,因为它引起了一个致命错误(fatal error)。
    Parse error: syntax error, unexpected T_FUNCTION in /www/users/WEB/wp-content/plugins/wp-rest-api-for-app/weixin-openid.php on line 3

    回复
  23. 魏星

    你好,首先感谢您的分享,使用您的插件的时候总是提示安装失败,提示“无法安装这个包。 没有找到有效的插件。”,也按照您说的修改目录名字了,可是还是不行,求教,谢谢!

    回复
      1. 魏星

        我是通过WP后台上传安装插件的,一直不行,最后通过ftp直接传到插件目录就可以了,也是醉了!

        回复
  24. 尘肺病防治网

    安装的时候出现一个错误信息,请问怎么解决?谢谢!
    无法启用插件,因为它引起了一个致命错误(fatal error)。

    Parse error: syntax error, unexpected T_FUNCTION in D:\ftp\LocalUser\*****\wp-content\plugins\wp-rest-api-for-app\weixin-openid.php on line 3

    回复
  25. 皇家元林

    非常不错的小程序,不过我第一步就失败了
    那个插件启动出现错误,weixin-openid.php 第209行什么的
    还有这个小程序是不是个人发布不了啊

    回复
  26. 小白

    请问,搭建在别人的云服务器上,可以直接安装插件,开发小程序嘛?
    还是说一定要自己本地安装wp,然后改参数,才行?

    回复
  27. 林上

    如何获取指定ID栏目的文章列表呢?例如专题下有栏目A和B,而我想建个页面只获取栏目A的文章列表

    回复
  28. 路人是谁

    您好,请问个人小程序可以正常用这个吗?
    emmm,可以正常在小程序上播放视频的吗?谢谢哈

    回复
      1. 路人是谁

        emmm测试过了 嵌套视频不行,是不是要上传视频的那种才可以呢~

        回复
  29. cuicuicui

    请问Jianbo,个人的小程序除了支付功能无法使用,其它的功都能正常使用吗 ?

    回复
  30. SWEETASTY

    貌似没留言成功?
    问一下 如果直接对接WOO商城会怎么样显示
    我测试用WPBakery PAGE BUILDER 不能正确显示内容 只能用WP原始得默认格式显示 所以考虑直接对接商店产品作为展示文章得列表
    作者知道有啥专门得商店得小程序WP的小程序吗 ?
    我就搜到NODESHOP商店 NIDESHOP 这俩

    回复
      1. yk

        WOOcommerce 主要用Wordpress搭建商城,配套插件非常多。如果也能在小程序里支持就更棒了。
        就算只是转换成展示型的商品页面,也能帮到很多人。

        回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注