uniapp开发小程序插件（uniapp 小程序开发）

本文目录一览：

• 1、七夕uniapp多应用WordPress小程序发布

• 2、uniapp技巧-滚动组件

• 3、uni-app 项目小程序端支持 vue3 介绍

• 4、uni-app App端中使用 原生插件引入

• 5、混合开发之uni-app

• 6、uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

七夕uniapp多应用WordPress小程序发布

uniapp多应用

说了这么久uniapp，到底什么是uniapp了？懂得自然懂不知道的也不要紧这么为大家科普下。

简单的来说就是一个基于vue.js写的跨多端的前端应用框架，一套代码可以编译多个平台应用程序，如我们常见的App、web、H5、小程序等，为开发工作大大提高的了效率。

看官方解释如下：

历时一个星期，丸子先用开源版给大家做了一款uniapp框架的开源程序，基于开源的WordPress系统以及丸子开发的Mini Program API插件对接网站数据到uniapp丸子开源资讯博客程序。

大家可以在WordPress后台插件搜索Mini Program API进行安装，完全免费开源。

目前这款应用支持下面平台：

多端编译会有一些兼容问题，这个问题不可能做到绝对的完美，只能出现问题根据对应问题解决，大家遇到了可以及时反馈给我们，以便及时处理。

问题反馈我写完文章放在后面大家看反馈入口。

此版本是使用uniapp应用框架来打通WordPress注册登录的多端应用程序，多端数据打通，一套代码，一个数据后台控制多个应用平台程序。

目前丸子使用WordPress结合uniapp应用框架开发到注册登录到数据打通，丸子率先踩坑，希望更多的开发者朋友跟丸子一起来开发完善程序，可以是开发者也可以是知名的WordPress站长或者WordPress使用者。

我也想做这个程序

目前丸子Beta第一版已经上架到了dcloud插件市场，大家可以直接搜索丸子小程序-安装，记住需要用HBuliderX这个开发者工具编译。

开发工具-(复制到浏览器打开)

丸子uniapp插件地址 (复制到浏览器打开)

使用问题反馈

大家-安装完插件，就可以在插件页面的评论里面直接反馈使用出现的问题，以及一些建议。

uniapp技巧-滚动组件

最近的项目做了一个信息展示，客户的需求改了，因为一屏展示太多了，想多屏，还不加分页，只能增加滚动。

查询了好多资料，也测试了好多组件，最后选定了一种滚动组件。使用方法如下：

1、找到uniapp的组件插件市场

搜索滚动

在里面找到MAOUI的滚动组件

2、点击进入组件信息页面，选择hbuilder导入插件自动安装

3、查看需要添加的工程中是否已经添加该组件

4、需要使用的页面引用组件

import maoScroll from '@/components/mao-scroll/mao-scroll.vue';

export default {

components: {

maoScroll

},

5、在需要使用的页面对应需要的数据和设置项

在这里可用界面里面的动态数据的例子测试，如果是静态例子，评论里面的设置方法

【有些人可能直接写静态数据去测，会以为显示不出来（因为组件内部缺少）。 data:{ immediate: true, handler(nVal, oVal) { this.init(); } }】

这一段没有看明白，有明白的大神给解释一下。我是用这种方法解决的：

mounted() {

this.init();

},

然后在页面的data部分：

data() {

return{

data: this.datas,//这个是提前写好的需要滚动显示的静态数据

count: 30,

showNum: 5,

lineHeight: 60,

animationScroll: 800,

animation: 2000,

}

}

页面部分：

maoScroll :data="data" :showNum="showNum" :lineHeight="lineHeight" :animationScroll="animationScroll" :animation="animation"

template v-slot="{line}"

view class="line"

view class="col1"{{line.col1}}/view

view class="col2"{{line.col2}}/view

view class="col3"{{line.col3}}/view

/view

/template

/maoScroll

6、设置样式

可以根据自己的需要修改，这个样式主要针对的h5版本，所以采用的px

style

.col3{ width: 60px; text-align: center; display: inline-block;font-size: 12px; line-height: 20px;overflow: hidden; white-space:nowrap;}

.col1{ width: 60px; text-align: center; display: inline-block; font-size: 12px;line-height: 20px;overflow: hidden;white-space:nowrap;}

.col2{ width: 60px; text-align: center; display: inline-block; font-size: 12px;line-height: 20px; overflow: hidden;white-space:nowrap;}

/style

7、成功

这是官方的成品图，借来用用

中间碰到的问题终于找到解决方法，还是挺开心的，积累积累。

相关链接：

uni-app 项目小程序端支持 vue3 介绍

随着 vue3 的发布， uni-app 也逐步支持 vue3 。

目前小程序平台已支持，h5、App 平台暂不支持。

除支持 vue3 语法特性外， uni-app 特有的生命周期钩子支持 Composition API ，如 onLaunch ， onShow ， onLoad …

下面介绍创建支持 vue3 的 uni-app 项目的流程，以及使用中的一些注意事项。vue3 相关问题请关注vue官方文档 vue3 中文文档。

目前仅支持 cli 方式创建支持 vue3 默认模板项目。

如果你之前没有使用过 vue-cli 方式创建过项目，需要先安装 vue-cli ，若已安装则跳过步骤 1。

步骤 1: 全局安装vue-cli

步骤 2: 用如下的命令创建vue3工程

步骤 3: 创建好工程后，进入对应目录

步骤 4: 将项目跑到微信平台

需要将编译后的文件 dist/dev/mp-weixin 导入微信开发者工具运行，也可将项目拖入 HbuildX 中运行，方便运行到各个平台。

欢迎开发者反馈使用该版本遇到的问题，我们将积极收集意见。

后续：

DCloud之所以不支持vue3的h5和app版，主要是因为vue3的组件中很多语法的写法发生变化，这导致uni-app的h5版基础组件库和app版基础组件库的写法与vue3不兼容。

当然除了基础组件，插件市场的所有插件（包括uni ui），都不支持vue3。即便是uni-app已经推出的vue3的小程序版，也不支持插件市场的插件。

考虑到生态兼容的重要性，vue官方（尤雨溪）计划2021年4月中下旬推出新版，对vue2的语法做兼容，届时uni-app的h5版和app版将同时推出，并且插件市场的众多插件也将自动适配vue3版的uni-app。

uni-app App端中使用 原生插件引入

1.点击购买（0元）for云打包

2.选择需要使用原生插件的项目

3.选择项目后 ， 需要绑定app打包时的包名

4.点击下一步即可

1.在项目当中找的 manifest.json 文件 进行app原生插件绑定

2.页面引入原生插件 使用 uni.requireNativePlugin 方法引入 原生插件

3.插件id 如图

4.完成以上步骤 ，就引入成功了

混合开发之uni-app

uni-app App端内置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一个前端框架 。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力，使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。而 nvue 解决了这个大问题，让前端工程师可以直接开发完整 App，并提供原生插件的市场交易和云打包。这些组合方案，开发者切实的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那么建议你仍然以使用 vue 为主，在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充：

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现（注意manifest中需开启新编译器，即自定义组件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 时，一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。

注意：旧编译器（非自定义组件模式）不支持 plus.globalEvent 这个对象。

uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序操作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。

项目地址：

uniapp插件市场：

editor富文本编辑器组件官方文档：

否则会受到小程序css影响。小程序本身editor标签有css样式：

editor {

display: block;

position: relative;

box-sizing: border-box;

-webkit-user-select: text;

user-select: text;

outline: 0;

overflow: hidden;

width: 100%;

height: 200px;

min-height: 200px;

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目标文字时，将值设为\n'，可以实现换行

this.editorCtx.insertText({ text: '\n' });

参考：请问editor组件控制拉起键盘操作支持吗？

小程序技术专员-sanford 2019-09-20

不支持的。iOS无法通过接口拉起键盘，必须用户点击；安卓则可以。所以，终究是不一致，不行。。

该组件主要为微信editor组件的api调用集成封装，因此受到的限制同文档描述一致，即编辑器内支持部分 HTML 标签和内联样式，不支持class和id，支持的标签详见： 。

不满足的标签会被忽略，div会被转行为p储存。

这也是为什么在做富文本解析时，仅仅用rich-text组件无法有效还原html内容，在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。

所以，开发者需要自行权衡在做富文本编辑开发时，是否使用微信自带的editor组件，或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。

小程序富文本编辑器editor初体验：( )

如果是微信原生开发，将demo组件中的相关dom元素标签和api换成微信原生即可。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。