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版微信小程序安装使用说明》有255个想法

  1. 大大的小学生

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

    回复
    1. 随心而码

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

      回复
  2. 魏星博客

    你好朋友,请问点击微信登录按钮没有任何反应出现以下错误
    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)

    麻烦指教一下,谢谢!!

    回复
  3. 伟大的老王

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

    回复
  4. Neil

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

    回复
  5. 90人网络

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

    回复
    1. 红锡包

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

      回复
    2. CBAT

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

      回复
        1. junshi

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

          回复
  6. Monster

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

    回复
  7. blue001

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

    回复
  8. 无极

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

    回复
  9. kim

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

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

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

    回复
  11. 老大你好

    文章页怎么显示标签啊

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

    回复
  12. 天空

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

    回复
  13. 乱云AKAY

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

    回复
  14. 中年

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

    回复
  15. lu

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

    回复
  16. kissrain

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

    回复
  17. tianzijian

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

    回复
  18. 老路

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

    无法启用插件,因为它引起了一个致命错误(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

    回复
  19. 魏星

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

    回复
      1. 魏星

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

        回复
  20. 尘肺病防治网

    安装的时候出现一个错误信息,请问怎么解决?谢谢!
    无法启用插件,因为它引起了一个致命错误(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

    回复
  21. 皇家元林

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

    回复
  22. 小白

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

    回复
  23. 林上

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

    回复
  24. 路人是谁

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

    回复
      1. 路人是谁

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

        回复
  25. cuicuicui

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

    回复
  26. SWEETASTY

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

    回复
      1. yk

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

        回复

Monster进行回复 取消回复

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