基于Wordpress的微信小程序建立
分类:折腾 ; 热度:4783 ; 最后更新于2020 年 02 月 14 日
最近访问本站的朋友可能注意到了文章下方都被我加上了一条微信小程序的BANNER,没错,本站的微信小程序已经正式上线了。摆脱浏览器输入网址的麻烦,直接微信急速清爽访问本站点内容。 微信小程序搜一搜:林澈思的茶。为什么叫“林澈思的茶”,细心的朋友可能注意到本站的备案信息上网站名字写的“澈思中文网”,自然而然的“林澈思的茶”也就不奇怪了。您可以用微信扫描下方的小程序码访问本站小程序,也可以通过微信搜一搜关键词“林澈思的茶”来进入。推荐您将本站小程序加入我的小程序列表。
下面我来讲解小程序的建立过程,与遇到的问题及其解决办法。首先非常感谢守望轩提供的开源微信小程序代码的支持,如果大家也想将自己的WP博客上线小程序可以访问这位大牛的网站,他的网站里会有很详细的搭建过程以及小技巧提示。
小程序搭建过程
首先需要下载 微信开发者工具下载安装完成后运行,选择下载并解压后的 winxin-app-watch-life.net 工程文件,此时由于开发者 AppID 不正确无法修改,我们只需要将解压后的项目配置文件(project.config.json )中的 appid 参数改成自己的就可以了。然后进入开发者工具,将(utils/config.js)里面的基础内容按照备注修改完毕后基本上就可以正常运行了。因为是开源代码,其他想修改的内容大家可以自由发挥。
问题一:海报分享功能失效及其解决办法
由于小程序的开发者的海报功能也没有得到完善,他找到了GitHub上的一种开源方法来解决海报分享问题。作者备注了以下信息:
1)downloadfile域名设置
需要在微信小程序的管理后台设置downloadfile域名,域名需要包括以下三个域名:
A) wx.qlogo.cn :用于显示转发者的头像
B)首图地址的域名 :用首图作为转发的图片,必须设置首图的地址的域名。
C)特色图片地址的域名:用特色图片作为转发的图片,必须设置特色图片的地址的域名。
如果上述域名设置错误或没有设置,将会导致生成海报失败。
如果需要修改海报里的文字、图片样式、布局等,请看detail.js里的creatArticlePoster方法
而我测试后发现仅仅在微信小程序的管理后台设置downloadfile域名是不够的,需要在utils/config.js相应位置也加上这写域名,设置图如下:
上传测试后可以正常生成海报,这里要注意的是,由于这个开源的方法里面内置用到了一种插件,你需要保持‘rest-api-to-miniprogram’里的‘qrcode’文件夹具有可读写属性。最终效果图如下:
问题二:打赏页面无法使用
由于我当时注册小程序时选择的是个人程序,因而无法进行认证,所以打赏功能无法使用。建议有需要的朋友在注册时可以选择个体经商户这一项,然后在微信商家那里获取支付的ID即可。
问题三:SSL证书的两个问题
由于微信小程序的限制,小程序的服务器地址必须采用安全模式,即https,所以本站现在已完全启用安全模式,并获得了小绿锁。在SSL证书设置中遇到了两个问题,其一是ssl证书认证后,并没有小绿锁,谷歌浏览器显示的不安全,如图:
用F12开启浏览器的开发者模式,Ctrl+F寻找‘http’字符,找到页面中有一张图片仍然使用的http协议,换掉这张图片即可,此时显示出小绿锁,并达到安全状态,如图:
截止到此时,在微信开发者工具里预览,以及本人的IOS设备上预览已经基本没问题了,于是我提交了第一个1.0.0的demo版本审核,但是被退回了,原因是某Android手机不能正常连接。后来我又找了几个朋友用他们的手机测试(很不辛的是我到现在都没反应过来这几个朋友的设备均为ios),均可以正常访问,所以提交了新版本送审,结果又被同样的理由打回。我很奇怪,然后我用开发者工具箱里的NEXUS机型进行模拟依旧正常运行,于是再次送审,结果又被驳回。至此,我用某安卓手机测试,发现连不上网站信息,另一台也是,我怀疑可能安卓手机全部访问不了,遂百度寻找原因。得到的答案是可能是SSL证书的中间证书丢失,导致安卓平台不信任网站的协议,禁止访问。于是通过Myssl网站进行检测,发现中间证书断开。遂用在线工具进行了中间证书的修补,上传但是还是不可以。我反应过来我的服务器是Apache,而我的证书用的Ngiax类型,遂更换版本,但是上传完毕开启ssl时出现了如下错误:
且此时访问网站提示隐私不安全,禁止访问,我找不到原因,遂向我的主机上提交了工单,找到原因是证书的格式后缀不对。我的证书为TrustAsia提供的,Apache版本的下载下来有三个文件,分别为‘linches.cn.cer’、‘linches.cn.key’、‘linches.cn.crt’。师傅说把‘linches.cn.cer’的后缀改为'crt'就可以了,更改后证书建立连接完整,如图:
问题四:CDN插件开启后无法正常访问
这个问题原作者的解答是这样的:
1.如果WordPress网站安装了水煮鱼的WPJAM Basic插件,在该插件的设置项里有个选项:
如果你的博客没有客户端,建议屏蔽 REST API 功能。
不要勾选这个选项,如果勾选了,json将无法访问。
如果你通过其他的方式屏蔽了json的访问,也要取消。
我考虑到静态文件其实很小,也没有必要非要托管,图片文件以及直接上传到七牛了,遂直接关闭了该插件。
其他的问题及其解决
除了修改开源代买里的基本信息外,我们可能还需要修改下utils 文件夹下的 api.js 文件中的 REST API 的请求地址,如果没有对URL 进行重写,那么WordPress REST API 的访问URL 应该是这样的:
https://www.youdomain.com/index.php/wp-json/wp/v2/
所以我们只需要在 /wp-json 前面添加上 /index.php 即可。配置完成后上传小程序即可开始体验了。
仍然存在的Bug
由于原作者对于url重定向的设置没有完善,现在文章里的超链接在小程序里点击时,可能会跳转到任意的文章页面,本站由于文章已经被收录就没有做修复,而不担心收录问题的朋友可以把文章的重定向url静态地址改写为:
https://www.gxuzf.com/%category%/%post_id%.html
原作者说的是目前只能很好的兼容这一种静态地址。
改到这里,问题基本上都解决了,建议把小程序的评论功能和首页图片轮播功能关闭掉再送审,通过后再开启。关于小程序的文章以后应该还会继续更新,大家还有什么问题可以直接留言问我,我能回答的尽量回答大家。最后欢迎大家扫码访问我的小程序。
已有 6 条评论
2019年09月19日
我才看到你五月份就写了这个文章诶~~来学习一下怎么搞~
2019年09月04日
博主原来是做技术的啊,文章写得不错,思路很清晰
2019年09月23日
8是做技术,做个技术的测试搬运工罢辽
2019年06月09日
文章不错支持一下
2019年06月11日
谢谢您的支持
2019年05月30日
刚刚发出去就记起来还有问题emmmm...下次发合集吧