微信小程序开发markdown博客

最新推荐文章于 2025-07-14 09:00:09 发布

yma16

最新推荐文章于 2025-07-14 09:00:09 发布

阅读量3.6w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序_原生文章标签：微信小程序小程序

yma16

本文链接：https://blog.youkuaiyun.com/qq_38870145/article/details/127293290

微信小程序_原生专栏收录该内容

11 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用微信小程序开发一个能与个人网站数据互通的Markdown博客。文章详细讲解了利用towxml组件将Markdown转换为小程序可显示的格式，包括子组件与父组件的交互，事件触发和生命周期的管理。提供了相关的开发链接和源码仓库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序开发markdown博客

背景

小程序使用微信服务器自动部署，比服务器部署便捷，浏览方便无需打开浏览器，
所以打算打造一个和个人网站数据互通的小程序

效果

入口
在这里插入图片描述
效果

实现

小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

使用towxml组件

github地址：https://github.com/sbfkcel/towxml
打包dist文件改名为towxml

app.js引入

   // 引入`towxml3.0`解析方法
  towxml:require('/towxml/index'),

组件引入

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

wxml使用：

<towxml nodes="{{article}}" class="blog-container"/>

数据格式处理

const app = getApp();


      const markdownText = app.towxml(articleStr,'markdown',{
               theme:'light', //主题 dark 黑色，light白色，不填默认light
               events:{ //为元素绑定的事件方法
                 tap:e => {
                   console.log('tap',e);
                 },
                 change:e => {
                   console.log('todo',e);
                 }
               }
             });
      this.setData({
        isLoading:false,
        article:markdownText
      })

在这里插入图片描述
从后端获取数据即可，效果

子组件触发父组件的事件

子组件：

          // 触发父组件事件
          this.triggerEvent('updateArticleMenu', articleTitle)

标签：

 <blog class='home-content-class' id="blog-id" wx:if="{{bottomBtn==='blog'}}" bind:updateArticleMenu="updateArticleMenu"></blog>

父组件声明函数：获取element的attribute参数
在这里插入图片描述

父组件调用子组件方法

父组件：通过element调用method的方法
父组件：=this.selectComponent(‘#blog-id’) 调用setLoading
在这里插入图片描述
子组件：声明setLoading

总结：

小程序使用triggerEvent冒泡事件，vue使用$emit冒泡事件。
小程序使用selectComponent获取element调用子组件的事件，vue使用$refs获取element调用子组件事件

生命周期

小程序的页面生命周期
在这里插入图片描述

vue的生命周期
在这里插入图片描述

仓库

地址：https://gitcode.net/qq_38870145/yma16_miniprogram
在这里插入图片描述