小程序入门 之 Markdown

2018-10-22 07:49:09 织梦安装使用
  • 文章介绍
吴小龙同學 吴小龙同学

本文是《小程序入门》其中的一节,关于文章详情的,分享一下。

文章详情

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 = # 吴小龙同學 +
1. 个人博客:[http://wuxiaolong.me/](http://wuxiaolong.me/) +
2. 公众号:吴小龙同学;
wemark.parse(content, this, {
name: wemark
})
},
})

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

阅读量

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

点赞、取消点赞

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

完整代码

detail.wxml

<!--pages/detail/detail.wxml-->
<!-- 引入模板 -->
<import src="../../wemark/wemark.wxml" />

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

<view class="likeRead">
<view style="flex-basis: 40%;">
<text class="readText">阅读</text>
<text class="readNum">{{readNum}}</text>
<image class="likeImage" src="{{likeImage}}" bindtap=addLikeClick />
<text class="likeNum">{{likeNum}}</text>
</view>

<view style="flex-basis: 60%;">
<button class="userLogin" wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">留言</button>
<view wx:else class="addComment" bindtap=addComment>留言</view>
</view>
</view>

<view class=line />

<view wx:for="{{commentList}}" wx:key="commentList" bindtap=onItemClick data-index="{{index}}">
<view class=item>
<image class=avatar src={{item.avatar}}></image>
<view class=comment>
<view class=nickname>
<text>{{item.nickname}}</text>
</view>
<view class=content>
<text>{{item.content}}</text>
</view>
</view>
</view>
</view>

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();
},
})


    上一篇: 独家丨教你如何突破微信小程序模板..

    下一篇: 【第1362期】微信小程序30分钟从陌..

    相关文档推荐

    精品模板推荐

     2020-07-29   18166  0金币下载

     2020-07-27   65338  0金币下载

     2020-07-27   65333  0金币下载

     2020-06-22   57995  0金币下载

     2020-06-13   62585  0金币下载

     2020-06-13   62587  0金币下载

    专业的织梦模板定制下载站,在线购买后即可下载!

    商业源码

    跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

    立刻开启你的建站之旅
    
    QQ在线客服

    服务热线

    织梦建站咨询