当前位置:首页 > web实践 > 正文内容

zblog搭建微信小程序

唐朝2年前 (2024-12-03)web实践1091

本教程适用于《zblog微信小程序1.1.8》版本。

zblog微信小程序是基于zblog后端进行搭建的小程序,依赖zblog微信小程序插件,使用前请在应用商店下载安装zblog微信小程序插件。

准备工作:

1、确保自己的域名有正常开启https;

2、自己的zblog网站后台有正常安装下载《zblog微信小程序》插件;

应用中心如不是1.1.8及其以上版本,请通过下方链接下载

cat_xcx_1.1.8_2024-12-03.zba

3、自己电脑上有《微信开发者工具》。下载 / 稳定版更新日志

4、zblog微信小程序对应的小程序前台代码。

应用中心如不是1.1.8及其以上版本,请通过下方链接下载

xcx.zip

5、《微信公众号》官网,https://mp.weixin.qq.com

步骤:

1、在zblog网站后台安装并启用插件;

2、在网站后台开启api,位置:网站设置--API设置--启用API协议--提交;

3、在电脑端打开微信开发者工具,用微信号进行扫码登录;

4、导入项目。在appid处选择自己的应用id,如没有应用ID,点击后面的测试号,会自动创建一个。

5、在project.config.json文件里面找到appid,如appid的值不是你的值请改为你的appid;

6、在utils文件夹下面的api.js文件的第9行,修改域名为您的域名;

7、开发者工具--清除缓存--全部清除--编译即可。

8、在微信的《微信公众号》官方网站,用微信扫码,登录你的微信小程序(点击测试号,会有一个测试号的应用)。

9、在《微信公众号》平台,配置《服务器域名》,request合法域名添加上自己的网站、

10、在《微信公众号》平台,配置《业务域名》,添加上自己的网站。

11、在《微信开发者工具》,点击《预览》按钮,即可通过微信扫码查看真机最终效果。

12、在插件的配置管理界面,配置小程序信息,配置完成后返回第7步,调整完成为止。

13、完。

常见问题:

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

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

Q:怎么关闭评论?

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

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

A:在新建文章页面,点击《缩略图》后面的文本输入框,右键,检查,在显示的代码框里找到《name="meta_****"》,例如拓源主题是《name="meta_proimg》,把proimg填写到插件里面即可;

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

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

    文档如有描述不清楚、错误或者过时的地方,欢迎留言指出。

    文档、教程内容会不定时更新,转载请标明原帖链接,以免让过时的教程流入网络。

    分享给朋友:

    “zblog搭建微信小程序” 的相关文章

    99乘法表梯形

    99乘法表梯形

    在html用js输出99乘法表,并对9乘法表的样式进行美化。一、js输出99乘法表1、初始化HTML基础框架使用!DOCTYPE html声明文档类型,并通过html:5的快捷代码创建HTML5的基础结构:<!DOCTYPE html> <html lang=...

    后台地址与找回密码

    网站默认后台地址:域名/zb_system/login.php如何修改后台地址在应用中心下载并安装插件《后台快捷方式》,即可自定义后台地址。下次访问的时候直接使用自己的自定义地址即可找回密码下载重置文件《https://update.zblogcn.com/tools/nologin.zip》,解压...

    如何在zblog网站引用第三方视频

    如何在zblog网站引用第三方视频

    启用插件后,在文章编辑页面右侧栏中找到“添加 iframe 视频”按钮,点击后弹出对话框,在对话框中粘贴复制好的 iframe 代码,选择要展示的宽高比例、以及是否进行 HTML5 格式化,点击“插入”即可。如果无法预览视频,请到设置中添加对应的 CSP 域名。展示宽高比例是指 iframe 的宽高...

    zblog的伪静态怎么开启

    zblog的伪静态怎么开启

    伪静态可以自定义URL,简洁明了的URL结构让用户更容易理解和记忆,提升了用户的浏览体验。本案例采用的是nginx环境。操作步骤如下:1、在应用中心找到《静态管理中心》插件并开启开启;2、点击《静态管理中心》的管理配置按钮;3、在《配置界面》的静态化选项-使用伪静态前必须确认主机是否支持处,选择伪静...

    EServer-HTML本地环境安装

    在进行Web静态代码开发时,最终目标是将项目部署到互联网上供用户访问。为了更好地模拟线上环境并确保项目的无缝迁移,这里我讲大家怎么使用本地开发环境。通过本地环境开发,可以确保项目在上传至服务器后能够直接运行,减少部署过程中可能出现的问题。安装步骤1、在资源里面下载本地环境安装包(EServer)2、...