WeChat applet Markdown rendering library
1. Preparation:
Download and copy the wemark directory to the root directory of the mini program
Reference style in WXSS: @import '../wemark/wemark.wxss'
Reference structure in WXML: <import src="../wemark/wemark.wxml"/>
Reference wemark in JS: var wemark = require('wemark')
2. JS part
First, you need to determine a data name for wemark rendering (wemark by default), and then specify it in the data of the page:
page({
data:{ // Determine a data name wemark:{}
}
});
Next, in the Page's life cycle function (such as onReady), call wemark.parse(md, this, options).
Specific parameter description:
md, required, Markdown string that needs to be rendered
this, required, Page instance
options, other parameters
imageWidth, the width of the image. If it contains an image, it is required, in px. The new version of the mini program images can adapt to the width and height
name, corresponding to the data name specified above, the default is wemark
3. WXML part
//The parameters in data are consistent with the data names determined above
<template is="wemark" data="{{...wemark}}"></template>
Example
//Introduce wemark var wemark = require('../wemark/wemark'); // Markdown text that needs to be rendered var md = '# hello, world\n\nI love you, wemark!'; Page({
data: { // Determine a data name wemark:{}
}, onReady: function(){ wemark.parse(md, this, { // The new version of the applet can adapt to the width and height // imageWidth: wx.getSystemInfoSync().windowWidth - 40, name: 'wemark' })
}
});
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
01 May 2017
WeChat mini program rich text parsing custom component, supports HTML and markdown parsing, may be the first WeChat mini program rich text parsing component
29 Jul 2016
Mini program: Mini program is a simple PHP multi-image upload mini program code: first upload the source code, you can copy it to your own computer to run ~ Copy the code as follows: <html> <meta http-equiv="Content-Type" c method="post" enctype="multipart/form-data"> <input type="file" name="img[]" /><br /> <input type
26 Jan 2021
Mini program development tutorial: This article shares with you the ideas and source code for implementing a calendar mini program. It has certain reference value and I hope it can be helpful to everyone.
31 Mar 2023
Gitee is a very good open source platform that not only supports code hosting, but also has many functions such as Wiki, blog, email, CI/CD, etc. For mini program developers, Gitee also provides mini program settings. Today we will explain in detail the steps to set up the Gitee applet. ## Step one: Create a new mini program. First, we need to create a new mini program on Gitee. Open the Gitee homepage, click "New Warehouse", and select "Mini Program" in "Warehouse Type": ![New Mini Program](https://img
06 Nov 2019
PHP source code can be downloaded from the PHP Chinese website download site, including back-end templates, mini program source codes, Discuz templates, wordpress templates, phpcms template source codes, etc.
03 Jun 2020
Mini program publishing method: first purchase a server and configure the production environment of the mini program; then put the back-end source code on the server to run; then purchase a domain name and manage it with the back-end server address; finally publish and submit for review in the mini program management background That’s it.
23 Mar 2018
This time I bring you the template rendering of the WeChat applet. What are the precautions for using the template rendering of the WeChat applet? The following is a practical case, let's take a look.
04 Jan 2022
The mini program code is fixed. As long as the mini program APPID remains unchanged, the mini program code will not change; developers can obtain the mini program code for any page of the mini program through the background interface.
23 Jun 2018
This article mainly introduces the relevant information of the WeChat mini program Amap and simple examples (source code download). Friends in need can refer to it.
Hot Tools
WeChat mini program demo: imitation mall
WeChat mini program demo: imitating a mall, easy to get started, and has a good introduction to some basic functions of the mall
Takeaway: Implement anchor-like functionality
It is the similar anchor function that everyone needs. In addition, it also implements the typical ordering functions of some takeout apps. It is recommended to study and study;
WeChat mini program demo: Lezhu
WeChat mini program demo: Lezhu: similar to location-based; helpful application, somewhat similar to the spirit of Zhang Xiaolong’s mini program.
WeChat mini program game demo selects different color blocks
WeChat mini program game demo selects different color blocks
WeChat applet demo: carousel image transformation
Carousel chart style change, a simple carousel chart implemented with a small program, easy to write