zblog博客接入小程序教程

:2019-02-14    :260 次   :2441 字   

[更新日志]


v1.5 20180528 

更新小程序输出数据,减少不必要内容;

本次更新,源码和服务器均有更新,可以分开更新;

小程序源码更新内容:富文本转换器类型选择,1为默认的转换器,2为wxParse的修改版;

v1.4 20180525 

更新小程序富文本转换处理,服务器端新增文章链接输出;

本次更新,源码和服务器端都要更新;

小程序源码更新文件:pages/article/*、modules/wxParse/html2json.js

v1.3 20180521 

更新小程序授权更改的问题,重新下载小程序源码;[更新文件: pages/user/login.wxml、pages/user/login.js]

v1.3 20180425 

PHP插件缩略图问题;

v1.2 20180424 

登录权限可能出现的BUG;

v1.1 20180323 

更新类名冲突问题;

v1.1 20180319 

更新首页过滤BUG;


教程:


【第一步】下载安装最新版的服务端

https://www.os369.com/app/item/os_wxapp_one

可在上面这个地址里面获取服务端的最新下载地址(一般会服务在ZBlogPHP的应用市场)


【第二步】配置你的微信小程序appid和secret

20180312155532152084133276948.png


如果你没有这两样东西,请前往https://mp.weixin.qq.com/ 申请一个对应的小程序账户,当然您也可以直接使用认证公众号快速申请。


【第三步】下载安装最新版的小程序开发工具,*如果已安装,请忽略此步骤;

前往工具下载地址 


【第四步】下载最新版本的小程序源代码

点击下载

下载后,将其解压您硬盘上的某个位置;不建议您存放在桌面上;

a.进入源代码目录,在config目录下,找到 index.backup.js ,复制一份,将其修改为 index.js;

使用代码编辑器(例如:Notepad++)打开index.js;进行提供数据服务的网站地址配置;

假如您不知道什么是代码编辑器,建议关闭本页面,退出浏览器,千万不要使用我提供的任何插件,也不要来询问我为什么,谢谢您的合作。


20180312160949152084218917628.png


关于name,这里会在小程序首页的导航栏显示、可以分享的页面中显示、用户绑定网站账户的时候,也会显示;不建议超过8个汉字的长度;

关于host,这是您的ZBlogPHP的首页地址,例如本站的 https://www.os369.com/ ;根据微信小程序的规定,上线应用必须有支持https,且TSL版本不低于1.2;如果您本地预览,可以在开发工具中,关闭https证书验证;

关于system,请不要修改;

关于urlrule,这是获取api的地址规则设定,如果您的网站支持伪静态访问,请填写0;如果您的网站不支持伪静态访问,请填写1;不确认的情况下,推荐填写1;注意!!!二级目录的ZBP站,请填写1,否则会导致api监听失败。嗯,懒,写不来二级监听。。。

关于新增parse_type,文章富文本的转换器选择,如果不需要查看文章的大图,用默认的"1"即可;如果需要查看文章的大图,填写“2”即可;

b.在应用目录中,复制一份app.backup.json,修改为app.json;



【第五步】打开微信开发者工具

20180312162158152084291863749.png

放这么大的图标,你不会认错了吧……



20180312162956152084339610369.png

登录开发者工具


20180312162956152084339625395.png

选择小程序项目


20180312162956152084339655371.png


点击右下角的加号,添加项目


20180312162956152084339631415.png


选择小程序源代码的路径,如果要体验登录功能,务必填写AppID;


20180312162956152084339626833.png



这里可以查看你的小程序信息,如果是本地测试,请开启不校验;



20180312162956152084339637842.png


如果想要预览,请点击预览按钮;如果是本地地址,请保证填写的地址手机上能够访问;

【特别提示】请在小程序后台》设置》开发设置 中,将request合法域名添加好,这样才能保证小程序请求可以正常访问。


【第六步】正式上线发布流程,请前往查看微信相关的最新教程,点击此处前往


【如何配置您的小程序】


20180312163526152084372629860.png


关于“首页推荐文章”,如果不填写此栏,小程序首页的推荐阅读为自动抓取的365天内最热门的4篇文章;为保证浏览效果,这里会自动过滤掉奇数的文章,例如设置了3篇,只会显示2篇;

关于“首页过滤分类”,你不想要某些分类在首页的文章列表中显示,就在这里输入过滤的分类ID;

关于“首页过滤文章”,你不想要某些文章在首页的文章列表中显示,就在这里输入过滤的文章ID;

关于“分类阅读中心”,是tabbar导航中“分类”显示的分类列表,仅支持一级目录;如果不填写,自动获取所有的一级分类;如果只是不想某个一级分类在这里显示,在分类ID前加一个负号,例:分类ID:1,填写 -1;负数ID过滤,不限于一级分类,子分类也可以过滤;


20180312164231152084415112641.png

首页的swiper,也就是默认的那张地球图片,是在此处进行配置;

关于“图片地址”,图片的尺寸大小以750px * 400px为最适宜,如果为了保证清晰度,可以考虑等比例放大图片 例如 1125px*600px;

关于“关联类型”,目前分为“不关联”,“文章”,“单页”,“搜索”,此处与关联内容有关;

关于“关联内容”,若关联类型为不关联,此处填写无效;若为文章或单页,请填写对应的数字ID,不支持别名;若为搜索,请填写搜索关键词;如果乱填,会导致用户在点击时报错;

关于“排序数值”,按大到小的降序排列,200在前,100在后;

关于“是否启用”,如果不启用,小程序不现实此条信息;

由于本人疏忽,暂时忘了设置自动切换等相关功能,将会在后续版本中添加。


如有反馈,请下面留言:支持二次开发。

Github项目地址:

【小程序代码】https://github.com/ossso/wxapp_one

【ZBP插件】https://github.com/ossso/os_wxapp_one




需要定制小程序样板的可以联系博主,导航栏点击联系我

成功案例:https://blog.xygeng.cn/post/89.html

    •   官方微信
       发布于 2019-01-22 23:23:24  回复该评论
    • 有个问题,小程序端是不是不支持使用富文本编辑器自己编写,只能通过接入外部文章用wxparse解析。今天看了一下午基本没看到有人能在小程序端使用富文本编辑器的。
×