能够使用微信小程序提供的富文本组件及引入的第三方富文本组件
掌握使用微信小程序的表单组件
掌握使用微信小程序的form表单及如何提交数据
掌握使用微信小程序的导航及跳转组件

一、基础内容组件

1.1 rich-text

富文本显示组件

js中定义一个html文本

使用组件显示富文本

但是发现，图片有裁切情况，所以一般项目中不用

1.2 wxparse 第3方组件

显示富文本

GitHub - icindy/wxParse: wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

下载对应的源码

git clone https://github.com/icindy/wxParse.git

引入必要文件

// 导入到js逻辑文件中var WxParse = require('../../wxParse/wxParse.js');// 导入必须的样式文件@import "/wxParse/wxParse.wxss";

数据绑定

var articleHtml = '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)  在wxml中调用的名称
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
WxParse.wxParse('article', 'html', articleHtml, this, 5);

引入模板

<import src="/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

复制相关源码到项目目录中

删除无用的emojis

js引用

导入样式

js中实现数组绑定

模板引用

优化

注释掉wxparse插件中的console.log输出  html2json.js 和 wxParse.js文件

1.3 表单组件

1.3.1 按钮 button

button | 微信开放文档

自定义分享功能的实现，开发能力 open-type=”share”

wxml中实现自定义分享能力

js指定自定义分享

1.3.2 input

input | 微信开放文档

联想搜索功能的实现

wxml

wxss

效果

1.3.3 form使用

form | 微信开放文档

表单组件，当点击 <form> 表单中 form-type 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，通过onsubmit事件来接受提交过来的信息值，注意的是需要在表单组件中加上 name属性

wxml添加用户的表单

js获取数据

效果

1.4 导航

navigator 页面链接就是和html中的a标签一样的功能

wxml组件实现跳转

js实现跳转

微信小程序富文本组件使用相关推荐

微信小程序富文本组件mp-html
功能介绍支持在多个主流的小程序平台和 uni-app 中使用支持丰富的标签(包括 table.video.svg 等) 支持丰富的事件效果(自动预览图片.链接处理等) 支持设置占位图(加载中.出错 ...
微信小程序富文本组件wxParse
项目地址:https://github.com/icindy/wxParse 1 打开项目地址,下载项目文件 2 将wxParse文件夹粘贴到项目 3 新建页面 "pages/home/ri ...
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效给rich-text标签加css 样式 white-space: pre;
微信小程序富文本修改图片的大小
一.先言有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用replace方法全局替换图片img标签的style样式,修改其宽度样式. 二. ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...

微信小程序富文本组件使用

一、基础内容组件

1.1 rich-text

1.2 wxparse 第3方组件

1.3 表单组件

1.4 导航

微信小程序富文本组件使用相关推荐

最新文章

热门文章

微信小程序 富文本组件使用

一、基础内容组件

1.1 rich-text

1.2 wxparse 第3方组件

1.3 表单组件

1.4 导航

微信小程序 富文本组件使用相关推荐

最新文章

热门文章

微信小程序富文本组件使用

微信小程序富文本组件使用相关推荐