把Zblog程序网站搭建成微信小程序【附带详细教程】

浩源博客 阅读:272 2022-04-20 06:46:19 评论:0

最近有朋友问我网站的小程序是怎么搭建的,觉得我很厉害,其实都是现成的程序,有手就会的,有一个微信小程序分享也比较方便,你发网址别人还不敢访问,小程序加载速度快,打开方便。所以就想这么写一个图文教程。

教你如何使用zblog微信小程序插件搭建属于自己小程序,不需要懂代码,只要会懂得基本操作看着步骤流程来基本都会。搭建前需要有一个使用Zblog程序搭建的网站,zblog微信小程序是基于zblog后端进行搭建的小程序,依赖zblog微信小程序插件,使用前请在应用商店下载安装zblog微信小程序插件。

01
注册微信小程序账号

首先我们要到微信公众平台注册一个小程序账号,注册完毕后添加自己的微信账号为管理员,之后就可以扫码登录,后续需要用这个账号登录微信开发者工具上传代码。

image.png

注册完毕后登录到后台,还需要到开发管理把自己网站的域名添加进去才能够正常使用。

image.png

02
安装插件

打开网站后台的应用中心安装zblog微信小程序插件,插件管理找到该插件启用,接着我们下载小程序前段代码,下载,下载到电脑本地。

image.png

接着打开插件,填写Appid与AppSecret;

image.png

Appid与AppSecret在微信小程序后台,开发管理-开发设置就可以查看的到

image.png

还需要在网站设置打开API协议,注意:ZBlog程序的版本需要为1.7.2以上

image.png

03
编译代码


然后我们下载微信开发者工具,需要用到这个软件编译代码,点我进入官网下载,下载后安装使用微信扫码登录。


打开软件,选择导入

image.png

导入后这个AppID记得要替换成自己的

image.png

Appid在微信小程序后台的设置里面可以看到。

image.png


找到project.config.json文件的第46行appid,修改为你的appid;如果已经是了,忽略即可

image.png

找到utils/api.js文件的第9行,修改域名为您的域名

image.png

接着先--清除缓存--全部清除--再点编译即可

image.png

编译完成后如果成功显示你网站的内容说明配置成功了image.png

接下来我们只要上传代码即可。

image.png

我们再打开小程序后台,点开版本管理,可以看到刚刚我们上传的小程序,点击提交审核即可。

image.png



注意:为了提交审核通过率,建议提交审核的时候先把网站的评论关闭,有些审核员看到个人的小程序带评论功能会拒绝。


怎么样你学会了吗


搭建好的小程序预览图

微信图片_20220327121328.jpg


以下说明引入插件作者的话

其他说明:

Q:为什么上线后图片文章不显示?

A:需要在微信开发者平台,开发管理--开发设置里,配置服务器域名,都填写您的域名;

Q:为什么绑定或者扫码没有二维码?

A:需要先将小程序上线,就是上传代码,然后审核,审核通过后,发布,到此后再测试扫码绑定;

Q:怎么关闭评论?

A:网站后台--评论设置--关闭评论;

Q:如何实现扫码登陆?

A:需要先在用户管理,在对应账号点击编辑,然后点击绑定账号,扫码绑定即可;

Q:怎么开启文章激励阅读?

A:如果在插件开启激励视频,则所有文章都开启激励阅读,关闭后,可在指定文章编辑页面,开启激励阅读,若文章编辑页面没有激励阅读开关,请先添加激励视频广告代码。

Q:怎么实现订阅更新?

A:先在微信开发者平台申请,订阅消息-公共模板库,搜索资讯更新提醒,然后选择新闻类型、新闻标题、新闻摘要即可,然后在我的模板里面,复制模板ID填写到插件;

Q:怎么调用主题的图片封面?

A:需要获取文章封面的字段,就是Meta.xxx,一般主题作者都知道,例如拓源主题是proimg,填写到插件里面即可;

Q:如何让文章支持复制功能?

A:修改pages/post/post.wxml文件,第19行修改为<mp-html selectable="force" content="{{content}}"/>即可。

大家可以扫码看看我搭建好的



有疑问可以在下方留言或者联系作者

「 欢迎使用小程序访问该文章 」


浩源博客有小程序版啦 欢迎扫码使用
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容

欢迎来到浩源博客

感谢您来到浩源博客,一份真诚带来一份希望,希望你能在这里得到自己想要的东西!

分享:

支付宝

微信