小程序入门之 Markdown

原创

mob604757037cf3 2021-05-22 10:23:38 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mob604757037cf3的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章详情

Markdown 展示

因为我的博客都是 Markdown 写的，因此小程序也想做成 Markdown 格式的，这里用的第三方库 wemark，GitHub 地址：https://github.com/TooBug/wemark 。

集成步骤

1、下载 wemark 并拷贝到小程序根目录；

2、WXML 引入模板：<import src="../../wemark/wemark.wxml" />，并加入：

<view class="article">
<!-- data中的参数和上方确定的数据名称保持一致 -->
<template is="wemark" data="{{...wemark}}"></template>
</view>

3、WXSS 引用样式：@import '/wemark/wemark.wxss';

4、js 部分：

// pages/markdown/markdown.js
var wemark = require('../../wemark/wemark.js')
Page({

/**
   * 页面的初始数据
   */
data: {
// 确定一个数据名称
wemark: {},
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
var content = '# 吴小龙同學\n' +
'1. 个人博客：[http://wuxiaolong.me/](http://wuxiaolong.me/)\n' +
'2. 公众号：吴小龙同学';
wemark.parse(content, this, {
name: 'wemark'
})
},
})

OK，示例完成，请求接口，将 content 换成真实数据即可。

阅读量

进入文章详情，调接口给文章的阅读量 + 1，接口有判断，一个用户只能 + 1。

点赞、取消点赞

进入文章详情，首先需要判断用户是否已经点赞，可以点赞，可以取消点赞。

完整代码

detail.wxml


  

 
  
    


 
   
     阅读
     {{readNum}}
        
     {{likeNum}}
  

   
        留言
       留言
  


  

    
   
      
     
       
        {{item.nickname}}
      
       
        {{item.content}}

detail.wxss

@import '/wemark/wemark.wxss';

.article {
margin: 20rpx;
}

.likeRead {
display: flex;
flex-direction: row;
}

.likeImage {
width: 40rpx;
height: 40rpx;
margin-top: 5rpx;
margin-left: 50rpx;
}

.likeNum {
margin-left: 10rpx;
}

.readText {
margin-left: 20rpx;
}

.readNum {
margin-left: 10rpx;
}

.userLogin {
text-align: right;
margin-right: 20rpx;
border-radius: 50%;
color: #ffba00;
background-color: #fff;
/* background-image: '/images/cover.jpg' */
}

/*使用 button::after{ border: none; } 来去除边框*/

.userLogin::after {
border: none;
}

.addComment {
display: flex;
justify-content: flex-end;
align-items: flex-end;
margin-right: 20rpx;
color: #ffba00;
}

.line {
width: 100%;
height: 1rpx;
background: #e1e1e1;
margin-top: 10rpx;
margin-bottom: 10rpx;
}

.item {
display: flex;
}

.avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.comment {
flex-direction: row;
}

.nickname {
width: auto;
height: auto;
font-size: 35rpx;
margin-left: 20rpx;
margin-top: 20rpx;
margin-right: 20rpx;
}

.content {
margin-left: 20rpx;
margin-top: 20rpx;
margin-right: 20rpx;
font-size: 40rpx;
width: auto;
height: auto;
}

detail.js

var wemark = require('../../wemark/wemark.js')
//获取应用实例
const app = getApp()
Page({

/**
   * 页面的初始数据
   */
data: {
articleId: null,
userId: null,
readNum: 0,
likeNum: 0,
isLike: false,
likeImage: '/images/collect1.png',
hasUserInfo: false,
// 确定一个数据名称
wemark: {},
commentList: [],

},


/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
//options为页面路由过程中传递的参数
console.log('onLoad');
var self = this;
self.setData({
articleId: options.articleId,
mername: options.title
})
wx.setNavigationBarTitle({
title: self.data.mername//页面标题为路由参数
})
//获取用户ID
wx.getStorage({
key: "openId",
success: function (res) {
self.setData({
userId: res.data
})
}
})

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
hasUserInfo: true
})
}
//全局用户信息
if (app.globalData.userInfo) {
this.setData({
hasUserInfo: true
});
}

this.getArticleDetail()
this.queryLike()
this.addReadNum()

},
// 函数如何传参？
getArticleDetail: function () {
var self = this;
wx.request({
url: app.globalData.serveUrl + '/article/detail',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
//请求的参数
data: {
id: self.data.articleId
},
success: function (res) {
self.setData({
readNum: res.data.data.readNum,
likeNum: res.data.data.likeNum,
});
var content = res.data.data.content;
wemark.parse(content, self, {
// 新版小程序可自适应宽高
// imageWidth: wx.getSystemInfoSync().windowWidth - 40,
name: 'wemark'
})
},
fail: function () {

}
})
},
//评论列表
getCommentList: function () {
var self = this;
wx.request({
url: app.globalData.serveUrl + '/comment/list',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
articleId: self.data.articleId
},
success: function (res) {
var code = res.data.code;
if (code == 0) {
var datas = res.data.data;
self.setData({
commentList: datas,
});
} else {

}

},
fail: function () {

},

})


},

//查询当前用户是否对这篇文章进行了点赞
queryLike: function () {
var self = this;
wx.request({
url: app.globalData.serveUrl + '/likeNum/query',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
articleId: self.data.articleId,
userId: self.data.userId,
},
success: function (res) {
var code = res.data.code;
if (code == 0) {
//点赞过
self.setData({
isLike: true,
likeImage: '/images/collect1.png',
});
} else {
//没有点赞过
self.setData({
isLike: false,
likeImage: '/images/collect0.png',
});
}
},
fail: function () {

},

})


},

//点赞点击事件
addLikeClick: function () {
if (this.data.isLike) {
this.cancelLikeNum();
} else {
this.addLikeNum();
}
},

//调用点赞接口
addLikeNum: function () {
var self = this;
wx.request({
url: app.globalData.serveUrl + '/likeNum/add',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
articleId: self.data.articleId,
userId: self.data.userId,
},
success: function (res) {
var code = res.data.code;
if (code == 0) {
self.setData({
isLike: true,
likeImage: '/images/collect1.png',
likeNum: self.data.likeNum + 1
});
wx.showToast({
icon: 'success',
duration: 2000
})
} else {

}

},
fail: function () {

},
})
},

//调用取消点赞接口
cancelLikeNum: function () {
var self = this;
wx.request({
url: app.globalData.serveUrl + '/likeNum/cancel',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
articleId: self.data.articleId,
userId: self.data.userId,
},
success: function (res) {
var code = res.data.code;
if (code == 0) {
self.setData({
isLike: false,
likeImage: '/images/collect0.png',
likeNum: self.data.likeNum - 1
});
wx.showToast({
icon: 'success',
duration: 2000
})
} else {

}

},
fail: function () {

},

})


},

//增加阅读量接口
addReadNum: function () {
var self = this;
wx.request({
url: app.globalData.serveUrl + '/readNum/add',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
articleId: self.data.articleId,
userId: self.data.userId,
},
success: function (res) {
var code = res.data.code;
if (code == 0) {
self.setData({
readNum: self.data.readNum + 1
});
} else {

}

},
fail: function () {

},

})


},

//授权获取用户信息，如果没有登录，其实这里「留言」是一个按钮
getUserInfo: function (e) {
console.log('getUserInfo');
var self = this
// //调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
self.setData({
hasUserInfo: true
})
self.addComment();
})
},

//跳转到留言页面
addComment: function () {
console.log('addComment');
var self = this;
//跳转页面
wx.navigateTo({
url: '/pages/add-comment/add-comment?articleId=' +
self.data.articleId + '&title=' + self.data.mername,
})
},
/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {
console.log('onReady');
},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
console.log('onShow');
this.getCommentList();
},
})