微信小程序开发（原生和uniapp）DOM标签对比介绍

已于 2022-06-08 18:30:50 修改
阅读量1.6k 收藏 6
点赞数 2
分类专栏： 前端 文章标签： 微信小程序 小程序
于 2022-06-08 18:11:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39921970/article/details/125183582
版权

时间线

vue 2014年对外发布

uniapp 2015年对外发布

微信小程序，2017公测，对外发布

题主2013年毕业，从事互联网开发，这几个刚好碰上。从前后端不分离到分离，Html4到html5时代。

技术栈

作为前端技术，核心为html+css+js，html+css没啥难度，各百来个单词，之前的文系美工就能做的，俗称“页面仔”，上手方便。现在叫“前端工程师”，主要是前后端分离时代。

html+css+js扎实，对于很多开源的UI框架，如WeUi（腾讯官方UI）、UViev、TouchUI WX、IView（TalkingData）、lin-ui、vant（有赞），colorUI、TaroUI（京东）、WuxUI、MinUI（蘑菇街）

开发就区分两种：

原生小程序和uniapp搭配上面的UI框架。

DOM标签对比

标签        微信小程序uniappHtml5备注
块标签viewview、divdiv、section、【dl，dt】、【ol，li】【ul、li】、【h1-h6】微信小程序和uniapp比较少和SEO有关系（除了移动端h5）没有html那么多的花里胡哨
行内标签texttextspan、em、strong、a、font

通用span，微信和uniapp的text就够用，html5比较花哨，<aaa></aaa><bbb></bbb>都可以，基于语义化，常用几个标签即可

一般的，块元素包行内元素，行内元素不包行块元素、行内元素

链接导航<navigator url="/pages/index/index" hover-class=“none” open-type="navigate" ></navigator><navigator url="../component/Header" ” ></navigator><a href="url"></a>

原生和uniapp的一样

hover-class=“none” 默认去点击（hover）的样式

open-type="navigate"

跳转方式，对应js的wx.switchTab、wx.navigateto、wx.redirectTo

uniapp的就是

uni.switchTab，uni.redirectTo，uni.redirectTo

这个三个区别就是一个跳非自定义底部菜单tabbar，一个是最多跳10次的，再点就点不动，对应返回

一个是redirectTo，直接一次层级，不存在返回

图片imageimageimg原生和uniapp一样，提供mode13个情况，图片的显示方式，图片变形的low表现方式，总有一个适合的，看业主接受方式
表单form、button、lable、input、checkbox、radio、picker、picker-view、slider、switch、textareaform、button、lable、input、checkbox、radio、picker、picker-view、slider、switch、textareainput、button、textarea、label大致相同差异较多
外嵌web-viewweb-viewiframe
滑动标签scroll-viewscroll-view-支持横向竖向滑动
轮播swiperswiper-
拖动movable-areamovable-area-一个按钮全屏拖动，侧边拖动效果
媒体标签audio、map、video、canvas、camera、live-player、live-pusher、void-roomaudio、map、video、canvas、camera、live-player、live-pusher、void-roomvideo、audio、enbed、source、trackimg也是媒体标签，频率高放上面了
覆盖原生的视图

cover-view

cover-image

cover-view

cover-image

-

想做个按钮覆盖video，小程序和uniapp的这个标签就上场了

map、video、canvas、camera、live-player、live-pusher

开放数据-关注公众号official-accountofficial-account-

关注公众号组件

基于扫码场景，不扫码就没有展示这个组件

开放数据-广告ad-customad-custom-广告模板
微信客服<button open-type="contact"></button> <button open-type="contact"></button> -需要微信小程序后台设置才能收到用户发的消息

uniapp开发微信小程序
weixin_43952341的博客
02-15 2352
pages.json配置easycom “custom”// 以 Xxx 开头的组件，在 components 文件夹中查找引入（需要重启服务器） "^Xxx(.*)" : "@/components/Xtx$1.vue"配置类型声明，创建components.d.ts(统一放到types文件夹下)// 组件实例类型。
uniApp+Vue3+Vite微信小程序开发指南
青柠豆腐
06-01 6874
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。可查阅官方文档：https://vue-macros.dev/features/reactivity-transform.html。webstorm 下载地址：https://www.jetbrains.com/webstorm/
微信小程序开发
CSSAJBQ_的博客
06-21 1426
微信小程序开发，运行以及api使用
微信小程序标签和html标签对比,微信小程序的标签和html标签比较
weixin_34808718的博客
06-09 736
微信小程序的标签和html标签比较html微信小程序.... {{area[index]}} wxss选择器html微信小程序div(标签选择器)view、text、icon、input、image、navigator(标签选择器)class(类选择器)classid(id选择器)(效率最高)id(效率最高)element,element(层级选择器)element,element(层级选择器)：...
微信小程序和uniapp对比区别
最新发布
2301_81449444的博客
04-23 863
注意：UniApp 不仅支持编译到微信小程序，还支持其他平台如 H5、App 等，因此在某些方面会比微信小程序更加灵活和强大。微信小程序：pages, utils, app.js, app.json, app.wxss。微信小程序：wx.setStorageSync, wx.getStorageSync。微信小程序：.wxml, .wxss, .js, .json。微信小程序：wx:if, wx:elif, wx:else。微信小程序：wx:for, wx:key。微信小程序：app.json。
原生微信小程序
呆呆狗
05-08 1416
原生微信小程序
uniapp使用uni.createSelectorQuery()获取微信小程序元素
qq_35818188的博客
06-08 4319
解决方案：因为我是基于vue3+ts写的所以要给上面代码加上in方法，如:vue2写法in(this)，vue3写法如下 添加以上代码就能拿到canvas
uniapp写微信小程序，获取openId、unionId
m0_56597737的博客
06-18 9154
使用uniapp写微信小程序，获取openId，获取unionId
原生微信小程序详解
weixin_52799068的博客
11-06 932
通信模型运行机制组件API样式组件样式隔离app.wxss中的全局样式对组件无效只有class选择器有样式隔离，id、属性、标签选择器无样式隔离注：在组件个引用组件的页面中使用class选择器，不要使用id、属性、标签修改组件样式隔离选项通过 styleIsolation 属性修改// 在组件的.js文件中新增如下配置// 修改样式隔离options:{})// 或在组件的.json文件中新增如下配置styleIsolation的可选项可选项默认值描述。
基于springboot、vue、layui、微信小程序原生js、uniapp、node、云开发等开发，项目均用目前主流架构
03-06
标题中的“基于springboot、vue、layui、微信小程序原生js、uniapp、node、云开发等开发，项目均用目前主流架构”揭示了多个关键的技术栈，这些技术在当前IT行业中占据了重要的地位，尤其在Web开发领域。下面将详细...
uniapp微信小程序使用echarts
03-27
由于微信小程序本身并不直接支持原生的canvas元素，uni-ec-canvas作为桥梁，实现了ECharts与微信小程序环境的对接。 **安装ECharts和uni-ec-canvas** 要在uni-app项目中使用uni-ec-canvas，你需要先安装ECharts和...
微信小程序开发中常用的组件介绍
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-01 1168
组件概述示例一：视图容器组件视图容器组件的作用示例代码解释示例二：表单组件表单组件的作用示例代码解释示例三：媒体组件媒体组件的作用示例代码解释示例四：导航组件导航组件的作用示例代码解释示例五：列表和卡片组件列表和卡片组件的作用示例代码解释实际开发中的使用技巧在微信小程序的开发过程中，掌握各种基础和高级组件的使用方法至关重要。本文将详细介绍一些常用组件的基本概念、作用以及实现细节，并提供丰富的代码示例和实用技巧，帮助开发者更好地理解和运用这些组件。
uniapp vue3微信小程序如何获取dom元素
weixin_40323532的博客
07-10 5361
第一种方式在vue2中是可以获取到的，但是在vue3 setup中是没有this的（需要通过getCurrentInstance方法获取当前组件实例），所以这种方式排除。上面这种方式，只适合在非子组件的情况下使用，如果当前组件时作为子组件，需要通过下面的方式。这是为了更好地管理组件实例，确保组件在不同环境中的正确渲染和状态管理。第二种方式在阅览器端是可以获取到的，但是在小程序端是获取不到的，所以这种方式也排除。因为在 Vue 3 中，子组件实例不再直接暴露给全局或者父组件，而是需要通过。
微信小程序关于使用原生标签渲染问题
weixin_43812068的博客
09-18 572
wxParse转换 刚接到这个需求的时候还有点蒙蒙的，特地还去翻了一下文档，但并没找到相关的，然后到网上搜了一下，直接就出来了,这里说一下自己用的过程吧 到git下个源码先 wxParse 然后在把 wxParse里面的wxParse文件拷贝 （也可以不要里面的emojis文件） 把拷贝的文件放到你的项目中去，位置随你，默认utils吧； 然后在你需要用到的页面进行引入就好了 js引入 ...
uniapp+微信小程序获取openId，获取access_token，订阅消息模板，java后台发送消息
cl29676的博客
08-03 1431
1.前期准备2.用户订阅消息3.获取openId（uniapp）4.获取access_token5.发送消息6.请求的代码Springboot（自己写有发送请求方法的可以不用看）
【微信小程序实战教程】之微信小程序原生开发详解
柯晓楠
07-24 4146
在实际的项目开发中，小程序的内置组件不一定能满足所有的需求，为了实现更高效的代码复用，小程序还允许开发者自行扩充组件，这些由开发者自行设计的组件被称为自定义组件。在小程序中，每个组件都具有独立的逻辑空间，分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中，Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器，自定义组件使用的是Component构造器。
原生小程序踩坑
qq_42972187的博客
08-06 320
1、小程序、vue都不可以进行原生dom操作没要获取元素需要用自定义指令。data-XX指令可以，通过e.currentTagrget.dataset.xx来获取； 2、小程序原生在data里面定义的属性，要通过this.data.属性名来调用 3、小程序属性里面的值修改要通过 wx.setData({}) 4、存储到本地用同步wx.setStorageSync(“key”, 值) 5、用哪try...
微信小程序之渲染标签使用
该用户还没想到好的昵称的博客
07-01 1961
一、条件渲染 wx:if：在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：          在小程序里面识别boolean值时，只要属性的值不为空时boolean就判断为真，就算里面随便几个字符，例如 wx:if="11223" ，也判断为真， 如果需要为false,就必须采用数据绑定的方式{{false}}或者绑定字符串...
wxParse无法解析strong标签
weixin_40762926的博客
09-11 1533
今天有人向我反映 小程序详情 ，后台富文本加粗没效果，测试了下，果真如此； 让后查资料 替换成了Parser 就解决了。小程序代码也变小了 Parser 微信小程序富文本插件 功能介绍 支持解析<style>标签中的全局样式（.和#两种方式） 示例： <style> .demo1{ text-align:center; } #demo2{ color:blue; } </style> <div class="demo1"&gt...
兼容微信小程序，给出uniapp代码
04-18
<think>嗯，用户现在想要在UniApp中实现@人功能，而且还要兼容微信小程序。之前我已经给过一个方案，但用户现在特别提到了微信小程序的兼容性，可能需要调整代码，因为微信小程序的限制比较多。比如，微信小程序不支持contenteditable的div，所以必须用原生的editor组件。 首先，我得回忆一下之前的回答。在之前的回答里，用户可能使用了contenteditable的div，并配合用户列表弹窗来实现@功能。但现在微信小程序不支持这个，所以得用微信的editor组件。这个组件有自己的一套API，比如editorContext，用来操作输入内容。 然后，用户提到输入框输入@后弹出用户列表，选择后插入HTML，并处理删除。但是在微信小程序中，editor组件不能直接插入HTML，只能通过insertText或insertDiv等方法插入内容。所以需要找到一种方式，既能显示@用户的样式，又能记录用户信息。 接下来，数据结构的设计也很重要。可能需要维护一个数组，记录所有被@的用户及其位置，这样在删除的时候可以正确找到并更新数据。同时，插入的内容在微信中可能需要用特殊符号或占位符来表示，比如使用@[用户名称]，并附加data-userid属性，但微信的editor是否支持自定义属性呢？可能需要用其他方式，比如用JSON存储用户信息，或者通过正则匹配。 另外，获取和设置光标位置在微信小程序中也是一个挑战。微信的editorContext提供了getSelectionRange和setSelectionRange的方法，可以获取和设置光标位置。当用户输入@时，需要记录当前的光标位置，然后在用户选择后插入对应的内容，并调整光标到正确的位置。 删除处理也需要特别注意。在微信中，当用户按下删除键时，需要检测当前光标位置是否在@的内容附近，如果是的话，可能需要删除整个@块，而不仅仅是单个字符。这可能需要监听键盘事件，或者在内容变化时检查是否有@块被删除。 还有，用户列表的显示位置需要根据光标的位置动态调整。在微信小程序中，可以通过editorContext的getSelectionRange获取光标的位置，然后计算弹窗的显示位置。可能需要使用uni.createSelectorQuery来获取编辑器元素的位置，再结合光标的位置进行计算。 兼容性处理方面，可能需要条件编译，区分微信小程序和其他平台。比如在H5端使用contenteditable，而在微信小程序中使用editor组件。同时，插入的内容也需要根据平台做不同的处理，比如在微信中用insertText插入带有特殊标记的文本，并维护一个数据数组来记录被@的用户。 最后，测试各个平台的兼容性，确保在H5、微信小程序等环境下都能正常工作。可能需要处理不同平台的事件差异，比如微信中的bindinput和H5中的input事件可能有不同的行为，需要统一处理。 总结一下，关键点包括：使用editor组件替代contenteditable、处理插入内容的结构和样式、维护用户数据、动态调整弹窗位置、处理删除事件以及多平台兼容性。需要分步骤实现，确保每个功能模块在不同平台下都能正常运行。</think>基于微信小程序平台特性及UniApp跨端要求，这里提供兼容性实现方案： ### 一、核心实现思路 1. **双平台兼容策略**： - H5/APP端使用`contenteditable`实现富文本 - 微信小程序使用`<editor>`组件（需注意微信限制：`v-html`无效、不支持自定义DOM结构） 2. **数据结构同步**： ```javascript data() { return { content: "", // 纯文本内容 mentions: new Map(), // 被@用户映射表（结构：{位置索引: {id,name}}） showUserList: false, lastAtPos: -1 // 最后@符号位置 } } ``` ### 二、微信小程序专用代码 ```html <!-- 微信小程序专用编辑器 --> <editor v-if="isWeixin" id="msgEditor" :placeholder="placeholder" @input="handleWeixinInput" @keydown="handleWeixinKeydown" :show-confirm-bar="false" class="editor-box"> </editor> ``` ### 三、跨平台输入处理 ```javascript // 统一输入处理 async handleWeixinInput(e) { const { text, keyCode } = e.detail const { content, lastAtPos } = this // 检测@触发 if (text === '@' || (keyCode === 229 && content.endsWith('@'))) { this.showUserList = true const context = await this.getEditorContext() const res = await context.getSelectionRange() this.lastAtPos = res.start } // 同步纯文本内容 this.content = e.detail.text } // 获取编辑器实例 getEditorContext() { return new Promise(resolve => { const editor = uni.createSelectorQuery().select('#msgEditor') editor.context(res => resolve(res.context)).exec() }) } ``` ### 四、用户选择处理（微信小程序） ```javascript // 插入@用户 async insertWeixinMention(user) { const context = await this.getEditorContext() const mentionText = `@${user.name}` // 插入特殊格式文本 await context.insertText({ text: mentionText, style: { color: '#07c160', backgroundColor: '#e0f7e9' } }) // 记录被@用户 const selection = await context.getSelectionRange() this.mentions.set(selection.start - mentionText.length, { id: user.id, name: user.name, length: mentionText.length }) // 插入空格并聚焦 await context.insertText({ text: ' ' }) context.focus() } ``` ### 五、删除逻辑处理 ```javascript // 微信删除处理 async handleWeixinKeydown(e) { if (e.detail.keyCode !== 8) return const context = await this.getEditorContext() const selection = await context.getSelectionRange() // 检测是否删除@内容 for (const [pos, user] of this.mentions) { if (selection.start >= pos && selection.start <= pos + user.length) { // 删除整个@块 await context.deleteText({ start: pos, end: pos + user.length + 1 // 包含后续空格 }) this.mentions.delete(pos) break } } } ``` ### 六、H5/APP端兼容代码 ```html <!-- 通用富文本编辑器 --> <div v-if="!isWeixin" class="rich-editor" contenteditable @input="handleRichInput" @keydown="handleRichKeydown" ref="richEditor" v-html="richContent"> </div> ``` ```javascript // 富文本插入逻辑 handleSelectUser(user) { if (this.isWeixin) { this.insertWeixinMention(user) } else { const html = `<span class="mention" data-userid="${user.id}">@${user.name}</span>` document.execCommand('insertHTML', false, html) this.$refs.richEditor.focus() } } ``` ### 七、最终数据结构转换 ```javascript // 提交时生成结构化数据 generateFinalContent() { if (this.isWeixin) { return { text: this.content, mentions: Array.from(this.mentions.values()) } } else { return { html: this.richContent, mentions: [...this.$refs.richEditor.querySelectorAll('.mention')] .map(el => ({ id: el.dataset.userid, name: el.innerText.slice(1) })) } } } ``` **注意事项**： 1. 微信小程序需在`manifest.json`配置： ```json "mp-weixin": { "usingComponents": true, "permission": { "scope.userFuzzyLocation": { "desc": "用于定位附近用户" } } } ``` 2. 样式兼容方案： ```css /* 微信专用样式 */ #ifdef MP-WEIXIN .editor-box { min-height: 120rpx; padding: 20rpx; border: 1rpx solid #eee; } #endif ``` --相关问题--: 1. 如何实现@用户后的消息推送功能？ 2. 在微信小程序中如何优化编辑器性能？ 3. 如何将富文本内容转换为微信小程序支持的格式？ 4. 怎样实现跨平台的表情插入功能？[^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

··零··

您的鼓励，是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值