在学习了微信小程序之后,我使用wxml页面可以做出唐诗的内容了。结合wxss,我可以定义好看的布局。在小程序需要备案时,因为唐诗需要资质,而我个人无法满足这些条件,所以我需要开发新的项目。恰好最近在为我的技术笔记发愁。我希望有一个可以展示我笔记内容的工具。
我的最初想法非常简单:
1,可以更新文章内容而不需要升级小程序。
2,需要在小程序端进行展示,并且需要美观。
3,能够根据标题或者关键字进行搜索文章内容。
经过一番研究后,我决定小程序使用原生开发,界面 UI 使用 WeUI,内容渲染使用Markdown。
小程序页面架构是列表+详情。列表作为首页,首页页面非常简单,一个标题和描述,用来解释小程序干什么?一个搜索框用来搜索内容,三个快捷按钮用于快速查找内容。 这个也是为了小程序审核,避免成为资讯类主题。
在完成之后,我发现这套架构可以通用,用来渲染动态内容。像列表页面以及WEUI使用,熟悉前端的非常容易理解实现。下面是一些核心介绍,主要介绍Markdown的渲染实现。
在小程序中,无法直接展示 Markdown 数据,我们需要将 Markdown 转换为 WXML,网上的大神很多,有多款 Markdown 转 WXML 库,我使用的是 TOWXML 库。我使用Markdown主要是因为更新内容不用升级小程序,这是动态渲染的最大优点。当然它还有其它一些优势,比如容易编辑,支持数学公式,布局美观等。
下面是Markdown具体实现,不感兴趣可以跳过。可以看技术下面的架构思考。
1,按照 towxml 库的说明文档,我们将编译后的 towxml 复制到我们的项目中,然后在 app.js 文件中引入这个组件。
App({ towxml: require('./towxml/index'), 2,按照首页的步骤,我们添加文章详情页面。
"pages/article/index" 在 index.wxml 文件中,我们添加页面布局,这个很简单,显示渲染后的内容即可。
<!--pages/article/index.wxml--> <view class="page"> <!--使用towxml--> <towxml nodes="{{article}}" /> </view> 3,注意,我们还需要在 index.json 中添加组件引入。
{ "usingComponents": { "towxml": "../../towxml/towxml" } } 4,在 js 文件中,我们需要调用 Markdown 数据。
onLoad(options) { const _ts = this; wx.showLoading({ title: '加载中', }) httpGet('/artd', { uuid: options.guid, }).then((res) => { const result = res.data; if (result.code == 1) { let content = result.data; let obj = app.towxml(content, 'markdown', { theme: 'light', events: { tap: (e) => { console.log('tap', e); } } }); _ts.setData({ article: obj, }); wx.hideLoading({ success: (res) => { }, }) } else { wx.hideLoading() } }).catch((err) => { console.log(err); wx.hideLoading() wx.showToast({ title: '网络异常请重试', }) }) }, 我们在 onLoad 中加载函数,这样页面启动就会自动网络请求,然后渲染 Markdown 数据。在请求数据时,我们注意到 guid,这个参数是上一个页面即首页,点击文章列表项带过来的数据。 你也可以使用其它参数,它能唯一代表从服务器拉取哪篇文章的Markdown内容。
...