随着微信小程序的功能越来越强,特别对个人开发者的开放,让个人开发者有机会尝试微信小程序。如果你有自己的个人网站,就可以把个人网站搬到微信小程序里,通过小程序直接访问网站的内容。

要想微信小程序可以获取网站的内容,这就要求网站提供web服务的api,比如提供获取内容的json api,这些api包括查询、添加、更新等操作。我的网站是使用WordPress 4.7.4 版本,提供REST API,这样就不用自己开发api了,直接使用即可。条件具备,说干就干,我先拿自己的网站练手,也算是真正动手实践一下小程序。

注意:以个人开发者申请的小程序,由于无法提交“文娱-资讯”类的小程序,因此如果提交非“娱乐-资讯”类时,在审核的时候会被拒绝,以下是我第一次提交时被拒的反馈

小程序”守望轩网站”代码发布审核结果

你的小程序”守望轩网站”代码发布审核未通过,原因如下:
1:小程序内容不符合规则:
(1):小程序服务内容涉及文娱-资讯,属未开放类目,建议选择企业小程序

根据反馈的审核结果来看,只有企业类小程序才可以发布“文娱-资讯”类的小程序。不过2017年4月28日开始,经过认证的企业公众号可以快速注册并认证新的小程序,如果你可以找个认证的企业公众号帮忙快速注册一个小程序,经过这样注册的小程序是可以发布“文娱-资讯”类的小程序。

基本设置

首先配置微信小程序的基本信息,这部分配置一定要谨慎,因为每月修改次数是有限定的,特别小程序名称在发布后是需要认证才能修改的,起名字前一定要认真想好,发布后再来修改,就比较麻烦了。

开发设置

首先需要到小程序的后台管理去获取小程序的开发者ID和密钥,同时设置提供web服务api的域名链接地址,特别注意的是该域名的链接地址需要是HTTPS。(关于如何WordPress类型的网站如何开启HTTPS,见文章:WordPress整站轻松开启HTTPS

小程序开发

小程序的开发可以参考官方的文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017327。针WordPress类型的网站,主要获得以下的内容:

一、获取文章(posts)的列表
1. rest api链接:https://www.watch-life.net/wp-json/wp/v2/posts/per_page=**&page=** ,per_page参数表示每页的记录条数,page参数表示第几页。

2.获取文章列表的主要代码:

考虑显示文章列表时,不是完整显示文章内容,只是显示摘要,于是获取了文章内容的一部分内容作为摘要,同时,考虑到文章中有html的代码,因此去掉了文章中有关html的代码,这样显示起来就比较干净整洁。

3.前端(wxml文件)显示文章列表的主要代码:


以上代码主要实现对文章标题和摘要的显示。

二、获取文章(posts)的内容

1.rest api链接:https://www.watch-life.net/wp-json/wp/v2/posts/id,id表示的是文章的id

2.获取文章内容的主要代码:

由于文章内包含大量的html标签,在微信小程序里是无法显示的,因此采用了一个把html解析为wxml的第三方程序:wxParse,上图中用红框标识的代码就是采用该程序的调用方法。

3.前端(wxml文件)显示文章内容的主要代码:

二、获取页面(pages)的分类
1.rest api链接:https://www.watch-life.net/wp-json/wp/v2/pages

2.获取页面分类的代码可以参考获取文章列表的程序。

二、获取页面(pages)的内容
1.rest api链接:https://www.watch-life.net/wp-json/wp/v2/pages/id,id表示的是页面的id

2.获取页面内容的代码可以参考获取文章内容的程序。

至此一个简单的小程序链接wordpress网站的程序开发完毕。最后就是提交小程序并审核。审核通过后,就可以发布了。小程序发布后,就可以把个人的公众号绑定小程序了。绑定后就可以在公众号里看到小程序,如下图所示:

最后小程序显示如下:

我的网站服务器在国外,在速度上访问有些慢,因此小程序显示也会有些慢,另外文章的正文在处理的时候格式上还有些问题,后续我会继续完善,尽快更新版本。

“守望轩”网站小程序的源代码我已经放在github开源:https://github.com/iamxjb/winxin-app-watch-life.net

----------------------------------------------------------------

欢迎关注我的网站和微信公众号,文章会在我的网站和微信公众号上同步发布。

本文首发链接:https://www.watch-life.net/wordpress/weixin-connect-wordpress.html

我的网站:守望轩

微信公众号名称:守望轩

微信公众号:iwatchlife

你也可以扫描或长按以下二维码

用微信小程序连接WordPress网站的更多相关文章

  1. 微信小程序连接本地接口(转)

    原文地址 最近的一个项目就是微信小程序 第一次接触微信开发者工具,并进行小程序的后端开发, 于是想看一下小程序如何请求本地的后台服务接口 wx.request({ url: 'http://local ...

  2. 微信小程序连接低功率蓝牙控制单片机上硬件设备

    1.软件部分介绍 微信小程序是一种新的应用,用户不需要下载应用只用通过扫二维码或者打开链接就能使用,使用完后不需要卸载,直接关闭就行了.微信在2017年初推出微信小程序开发环境.任何企业,媒体,个人都 ...

  3. 微信小程序连接Java后台

    有人问我小程序怎么连后台,这里直接贴代码 在app.js里 // api request request(url, params) { return new Promise((resolve, rej ...

  4. 用微信小程序连接leancloud数据库注意事项~

    具体步骤转载如下: 官网教程 大佬提示 注意事项: 1.下载的av-weapp-min.js,需要放在当前项目名称的子目录pages下 2.如上述教程,需要注册leancloud和AppID,并写在a ...

  5. WordPress版微信小程序3.1.5版的新功能

    产品的完善是无止境,每过段时间就会发现产品的新问题,使用的人越多,提的需求也会越多,我听得最多的一句话就是:如果加上某某功能就完美了.其实,完美是不存在的,每个人的视角不一样,完美的定义也是不一样的. ...

  6. WordPress版微信小程序3.0版发布

    距离WordPress版微信小程序上一个版本的发布过去了一个月了.在此间,我的工作有些变化,加上正在开发新版本,目前开源版的完善和升级稍稍有些滞后. 虽然这个版本是3.0版,期间有个过渡的2.8版,不 ...

  7. WordPress版微信小程序2.6版发布

    WordPress版微信小程序的完善和升级的工作一直都在进行中,我争取保证一个月可以出一个版本,希望通过一点点的改进,让这个开源产品日趋完美. 同时,pro版WordPress微信小程序也在紧锣密鼓的 ...

  8. WordPress版微信小程序2.4版发布

    自从发布2017年9月16日WordPress版微信小程序2.2.8版本后,这个一个多月来,WordPress版微信小程序,在经过一些比较小的更新后,今天发布阶段性的版本:2.4版 .这版本主要是功能 ...

  9. WordPress版微信小程序2.2.8版发布

    距离上次更新已经一个月了,这期间对WordPress版微信小程序 做的不少小的更新和性能的优化,此次版本更新推出了两个比较重点的功能:点赞和赞赏.同时,优化了文章页面的功能布局,在评论区把常用的功能: ...

随机推荐

  1. Python网络_UDP编程

    本章将介绍UDP编程,更多内容请参考:Python学习指南 TCP是建立可靠连接,并且通信双方都可以以流的形式发送数据.相对TCP连接,UDP则是面向无连接的协议. 使用UDP协议时,不需要建立连接, ...

  2. Jmeter的NON-GUI模式

    一般来讲,Jmeter执行压测,都是用Jmeter的命令模式,脚本调试好, 测试脚本能够大大缩减所需要的系统资源. 1.1命令介绍: jmeter -n -t <testplan filenam ...

  3. AI三巨头获2018年图灵奖!

    ACM 宣布,2018 年图灵奖获得者是号称深度学习三巨头的 Yoshua Bengio, Yann LeCun 和 Geoffrey Hinton,得奖理由是:他们在概念和工程上取得的巨大突破,使得 ...

  4. 记一次挂马清除经历:处理一个利用thinkphp5远程代码执行漏洞挖矿的木马

    昨天发现 一台服务器突然慢了 top 显示 几个进程100%以上的cpu使用 执行命令为 : /tmp/php  -s /tmp/p2.conf 基本可以确定是被挂马了 下一步确定来源 last 没有 ...

  5. python实现切换代理ip

    大量的处理爬虫的时候,IP地址容易被封掉,这个时候可以使用代理IP来帮助完成接下来的任务了 使用Requests模块来完成请求,代码如下: import urllib.requestimport re ...

  6. Unicode与UTF-8

    以下内容转自网络 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称为”字节“.再后来,他们又做了一些可以处理这些 ...

  7. 菜鸟如何学习vue

    作为一个前端菜鸟,最近开始接触和学习vue. 以前用到的是bootstrap前端框架. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CS ...

  8. MySQL 5.7 Invalid default value for 'CREATE_TIME'报错的解决方法

    出处:http://blog.itpub.net/15498/viewspace-2136006/ 由于数据库的升级,今天在执行从MySQL 5.6导出来的SQL文件时报错: mysql> so ...

  9. Block Design 小技巧之添加RTL代码到block_design

    Block Design 小技巧之添加RTL代码到block_design 1.首先得打开Block Design,右击RTL文件,才会出现Add module to Block Design选项. ...

  10. eval 日期对象

    js中,eval相当于python中的eval(表达式)和exec(代码)的集合. var d = new Date();    #申明一个新的日期对象,方便之后调用,它的方法getDate();ge ...