使用 Vue3 开发小程序
前言
9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,「One Piece」的代号也昭示了其开拓伟大航路的野心。
Vue3 的新特性主要有 Composition API
、Teleport
、Fragments
和 <script setup /> & <style vars />
等。我们是否也可以在小程序开发中使用这些特性呢?在 Taro 的文档里我们找到了关于 Vue3 的章节,事不宜迟,让我们开始尝试吧。
Vue3 部分新特性
还没了解过 Vue3 的同学也别急,先了解下 Vue3 的新特性吧:
1. Composition API
Vue2.x 基于 Option API(选项 API )
构建组件,一般来说组件拥有 data、methods、computed 等选项。这是一种属性相互隔离的模式,好处是各属性内容分离开,对于新手来说比较友好;但对于大型项目来说,为了修改某个功能,可能需要在一个文件中来回翻页。Vue3 增加了 Composition API 方式(组合 API )
,基于 reactivity(响应式)
的思想进行组件构建,将逻辑封装到函数中,可以实现类似 React Hooks 的逻辑组合和重用。对于大型项目,代码按照具体功能划分,而不是分散在不同的生命周期中,逻辑更加一目了然。
2. Teleport(传入)
Teleport 功能,使得我们可以将全屏的组件(例如 Toast)移到 Vue APP 节点外,而不需要在 UI 界面上修改其他组件样式,方便实现全屏蒙层、浮层弹窗等效果。
3. Fragments(碎片)
Vue2.x 版本中,<template />
标签下不支持放置多个组件,这个限制在 Vue3 中不再存在。这点比较好理解,下述组件设计在 Vue3 中是没有问题的:
<!-- Layout.vue -->
<template><header>...</header><main v-bind="$attrs">...</main><footer>...</footer>
</template>
4. 实验性质的语法糖<script setup>、<style vars>
a.<script setup>
:用于在 SFC 中使用 Composition API
的语法糖,改善在单个文件组件中使用 Composition API 时的体验。
b.<style vars>
: SFC 中状态驱动的 CSS 变量,它提供了直接的 CSS 配置和封装,支持将组件状态驱动的CSS变量注入到“单个文件组件”样式中。
除了以上 4 点之外,Vue3 还提供了自定义渲染,详细可以参考文末的推荐阅读文章。
如何在 Taro 里使用 Vue3
Vue3 带来的新特性可以让我们更加优雅和高效地进行开发,现在,来开启我们在 Taro 里使用 Vue3 的体验之旅吧。
Taro 已经默认安装 Taro3 ,所以正常安装即可:
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
安装完成之后,使用 taro --version
查看一下是否安装成功,如果输出版本号说明安装成功。 安装成功后,初始化一个项目
$ taro init
将出现如下图的一些选型:
如上图:
- 请输入项目名称?输入项目名称
vuedemo
- 请输入项目介绍?输入项目介绍
a demo project
- 请选择框架?当然是
Vue3
啦 - 余下选项,如上面 3 个选项,根据自己的需要选择就好,不会有什么问题
一般情况下,依照提示选型好以后, Taro 会自动安装依赖。如果由于网络问题导致安装不成功,就需要手动在项目路径下进行安装。
# 使用 yarn 安装依赖
$ yarn
# OR 使用 cnpm 安装依赖
$ cnpm install
# OR 使用 npm 安装依赖
$ npm install
安装后目录结构:
app
默认代码如下,我们注意到,Taro3 在新建 Vue3 项目时已经修改了入口组件写法。
import { createApp } from 'vue'
import './app.scss'
const App = createApp({onShow (options) {},// 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
})
export default App
page/index
目录下 index
文件示例如下:
<template><view class="index"><text>{{ msg }}</text></view>
</template><script>
import { ref } from 'vue'
import './index.scss'
export default {setup () {const msg = ref('Hello world')return {msg}}
}
</script>
编译运行微信小程序
npm run dev:weapp
编译后,打开微信开发者工具导入编译后的 dist
目录,首页内容和编译成 H5 的表现都如下图:
验证Taro3对Vue3的支持度
Composition API
写个比较简单的 todolist 计数组件,假设目前已有 4 项代办事项,点击后将新增一项。这里会使用到 Composition API
思路,以及 computed
计算属性。
在用户点击时,第二行“当前操作新增”会根据点击次数递增,总计条数会在 4 的基础上累加。
<template><button @tap="increment">增加 1</button><view>当前todolist事项已有:{{ existCount }}条;</view><view>当前操作已新增:{{ count }} ,共有{{ total }}条。</view>
</template>
<script>
import { ref, computed, onMounted, toRefs, watch } from 'vue'
export default {name: 'case1',setup(props) {// ref响应式变量const count = ref(0)const existCount = ref(4)// computed方法,在count的value发生改变时,会触发计算totalconst total = computed(() => count.value + existCount.value )function increment() {count.value++}onMounted(() => console.log('component mounted!'))return {// 返回increment方法,existCount、count、total属性,供模板中调用increment,existCount,count,total,}}
}
</script>
页面表现如下所示,可见对于 Composition API
的支持的还是不错的。
Teleport
写个初次登录用户的欢迎弹窗。用户名从 index.vue
传入。首页代码如下:
<template><view class="index"><Toast :user = username /><view id="teleportToast"></view></view>
</template>
在 Toast.vue
中,我们会写个属性 to 为 teleportToast
的 Teleport
组件,代码如下:
<template><button @tap="showToast" class="btn">打开弹窗</button> <!-- to和index.html中的view id一致 --><teleport to="#teleportToast"><view v-if="toastFlag" class="toast__wrap" @tap="hideToast"><view class="h2">弹窗标题:</view><view class="toast__wrap--msg">欢迎{{ user }},点击关闭</view></view></teleport>
</template>
<script>
import { ref,toRefs } from 'vue';
export default {props:{user: {type: String}},setup(props) {// 获取用户名const { user } = toRefs(props)// Toast:显示flagconst toastFlag = ref(false)let timerconst showToast = ()=>{toastFlag.value = true}const hideToast = ()=>{toastFlag.value = false}return {user,toastFlag,showToast,hideToast,}}
}
</script>
<style lang="scss">
.toast__wrap{position: fixed;width:100%;height: 100%;background: rgba(0,0,0,.8);top: 0;left: 0;z-index: 101;color: #fff;.h2{margin: 20px;}&--msg{text-align: center;}
}
</style>
在 H5 下是正常显示的,弹窗展示以及关闭功能效果如下;在小程序上却报错了,Taro 团队还需要加把劲:
Fragments
Fragments
特性已经在上面的例子中得到验证,使用没有问题。
script setup 语法糖
我们尝试一下 <script setup>
,组件里的代码如下:
<template><view><view>count:{{ count }},msg:{{ info }}</view><button @tap="incAndChangeInfo">增加 1修改msg</button></view>
</template>
<script setup=" props ">import { ref, toRefs } from 'vue'export default{props: {msg: String,},}export const count = ref(0)export const info = ref(props.msg)export const incAndChangeInfo = () => {count.value++info.value = "change hello" + count.value}
</script>
上述 script
标签里的代码效果等同于下面:
<script>
import { ref, toRefs } from 'vue'
export default {props: {msg: String,},setup(props) {const count = ref(0)const info = ref(props.msg)const incAndChangeInfo = () => {count.value++info.value = "change hello" + count.value}return {count,info,incAndChangeInfo,}}
}
</script>
调用它的代码传入 mgs 如下:
<Setup msg="hello"/>
运行后,小程序和 H5 都是支持的,页面整体表现如下:
可以看到,运用新特性进行开发,代码书写更加便捷,逻辑更清晰。
style vars 语法糖
<style vars>
,组件里的代码如下:
<template><view class="text">文字颜色为{{ color }},点击后变为红色</view>
</template>
<script>
import { ref,toRefs } from 'vue'
export default {props:{color: {type: String}},data(props) {return {color: ref(props) //'red'}},setup(props){const { color } = toRefs(props)return {color,}}
}
</script>
<style vars="{ color }">
.text {color: var(--color);
}
</style>
调用它的页面里的代码如下:
<template><view class="index"><Styledemo :color = color @tap="changeColor"/></view>
</template>
<script>
import { ref, computed, onMounted, toRefs, watch } from 'vue'
import Styledemo from "@/floors/styledemo"
export default {components:{Styledemo},setup () {const color = ref('blue')const changeColor = ()=>{color.value = 'red'}return {changeColor,color}}
}
</script>
小程序和 H5 都没有问题,功能效果如下:
结语
我们将上述几个 Demo 整合在一个项目中,放在Github上,有兴趣的同学可以看看。在线预览地址在这里。
经过验证,Taro3 支持使用最新的 Vue3 开发多端应用,相比之下 H5 的支持度更好一些。
值得一提的是,Taro 团队在技术上一直保持进取,在 Taro 2.0 版本支持了 React Hooks ;根据Taro RFCS,早在 2020-06-03
也已经打算支持 Vue3 了。截至目前,Taro 对 Vue3 的支持在小程序端的稍有补足,希望 Taro 团队可以早日补足这个短板。
推荐文章:
- Vue3 和 React Hooks对比
- SWR
- 自定义渲染器的应用
参考文章:
- [1]Compsition API
- [2]Teleport
- [3]
<script setup>
- [4]
<style vars>
- [5]Taro3安装及使用
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:
使用 Vue3 开发小程序相关推荐
- oauth2.0 学习案例demo_Vue3教程:用 Vue3 开发小程序,这里有一份实际的代码案例!...
寻寻觅觅冷冷清清,凄凄惨惨戚戚. Vue 3 发布以后,最近也在学习和写一些 Vue3 的 demo 和项目,我也一直想着什么时候能在小程序里使用新特性? 于是我翻遍了市面上的小程序框架,如 uni- ...
- uniapp + vue3微信小程序开发(4)身份信息认证
微信是无法获取用户的身份证信息,那么我们可以自己通过上传或者拍摄身份证,然后结合ocr进行识别,那么最后为了保证准确性,再通过人脸识别来比对,辨别是不是本人,关于人脸识别,在我这篇博客里介绍了 uni ...
- uniapp + vue3微信小程序开发(1)框架搭建
uniapp内置vue2,很多小伙伴喜欢用,但是作为首批吃螃蟹的人,肯定会想用vue3来开发,那么会遇到哪些问题呢? 1.编辑器等工具 Hbuilder X 3.4.6版本及以上(编辑器也在不断更新, ...
- uniapp + vue3微信小程序开发(5)授权
不知道大家在小程序授权的时候,会不会点击拒绝授权,然后第二次进来,哦豁..授权框就在也出不来了,这种问题,在很多线上正在使用的小程序也会出现的问题,所以说,大家貌似都不太注意这方面问题,下面就是我对这 ...
- uni-app开发小程序以及项目部署流程
作者也是刚开始接触小程序开发,本次小程序开发使用的uni-app,记录下小程序的开发过程. 前期准备工作 作者使用的开发工具:HBuilder x.微信开发者工具. 创建uni-app项目 详细步骤可 ...
- 用python可以开发小程序吗,python可以小程序开发吗
python可以开发小程序吗 谷歌人工智能写作项目:小发猫 怎样用python 写小程序 你好,python不适合做小程序的前端需要学typescript.1.微信官方为小程序提供了大量的接口api ...
- 用什么服务器开发小程序,开发小程序用什么服务器系统
开发小程序用什么服务器系统 内容精选 换一换 按照翻译方式的不同,高级语言通常可以分为两类:一类是编译翻译,一类是解释翻译,分别对应着编译型语言和解释型语言.编译型语言典型的如C.C++语言,都属于编 ...
- flutter开发小程序_为什么我认为Flutter是移动应用程序开发的未来
flutter开发小程序 I dabbled a bit in Android and iOS development quite a few years back using Java and Ob ...
- mpvue开发小程序所遇问题及h5转化方案
项目结构 |---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex储存|---utils|---请 ...
最新文章
- PHP简单实现一言 / 随机一句功能
- centos 下载为firefox安装flash插件
- Graph Neural Networks: A Review of Methods and Applications(Semantic Segmentation应用解读)
- MySQL中的自适应哈希索引
- leetcode 611. Valid Triangle Number | 611. 有效三角形的个数(Java)
- python对象_查找Python对象具有的方法
- @synchronized (object)使用详解
- 公招网报照片审核处理工具_消防员招录报名照片处理工具使用说明
- python列表购物
- 3月20日 表单
- 提高短线操作成功率的诀窍!
- python制作无限弹窗_Python无限弹窗,开机启动,打包为exe程序
- pic单片机用c语言怎么编程,手把手教你学PIC单片机C语言指导教程.pdf
- 提高 Mac OS X 速度的 52 个方法
- 使用BetterTouchTool自定义你的touchBar
- 程序员租房福利! 最新 2018年上海公积金提取 租房提取
- 【博客之星】坚持,是一种信仰
- 拿到软考高级证书就是高级职称了吗?
- 合全药业完成收购百时美施贵宝瑞士库威生产基地;百济神州计划在美国建新的生产和临床研发中心 | 医药健闻...
- Python基于监控摄像头实现制作延时拍摄视频源码,Python使用摄像头制作延时拍摄视频源码
热门文章
- PMP考试报名被抽查怎么办?
- 【Unity】超简单特效 - 烟雾
- 小米8可以用鸿蒙系统吗,有小米鸿蒙系统刷机包吗_小米手机怎么刷鸿蒙系统_小米鸿蒙系统合集-浏览器家园...
- php生成复杂url,php – 生成SEO友好URL(slugs)
- 计算机控制技术苏小,计算机控制技术步进电机工作原理.ppt
- 剑指offer 32. 从上到下打印二叉树
- pcb外观维修_电路板维修技巧_电路板维修的三个方法
- 最近电脑常见问题分享
- 目标检测 YOLOv5 - YOLOv5:v6版本多机多卡训练出现的错误及解决方案
- 网站面临的主要漏洞和安全研究员发现问题