代码编织梦想

简介

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

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

除支持 vue3 语法特性外,uni-app 特有的生命周期钩子支持 Composition API,如 onLaunchonShowonLoad

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

创建支持 vue3 的 uni-app 项目流程

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

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

步骤 1: 全局安装vue-cli

npm install -g @vue/cli

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

vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project

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

cd my-vue3-project

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

npm run dev:mp-weixin

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

注意事项

  • vue3 响应式基于 Proxy 实现,不支持iOS9和ie11。尤其注意iOS9上,不管是App、H5还是各家小程序,均不支持。vue3自身计划在第四季度开始解决这方面的问题。
  • 暂不支持新增的 Teleport,Suspense 组件
  • 暂不支持 template 下存在多个根节点

欢迎开发者反馈使用该版本遇到的问题,我们将积极收集意见。经过一定量用户的反馈后,官方会将其集成到HBuilderX中并适配H5和App。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/dcloudio/article/details/109607742

uniapp H5 JSSDK封装使用-爱代码爱编程

先看效果吧, 封装以后使用很方便,两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ,如果返回 true 就标识执行了ready , 可以调用JSSDK的 API 了,如下图示例代码: this.$common.Init.call(this); this.wxjssdkInti().

uni-app H5跨域问题解决方案(CORS、Cross-Origin)-爱代码爱编程

什么是跨域 跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码,请求了B站点的数据,就是跨域。 A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行)、相同域名、和相同端口号(port)。 如果你是做App、小程序等非H5平台,是不涉及跨域问题的。 稍微例外的是iOS的wkWebview,在5

uni-app的H5版使用注意事项-爱代码爱编程

HBuilderX 1.2开始包含了H5平台支持。 使用方式 打开uni-app项目下的vue文件点击菜单 运行->运行到浏览器->Chrome [attach]26917[/attach]在Chrome內打开调试模式(右键->检查)开启设备模拟,模拟移动设备(如果UI变形刷新即可) [attach]26920[/attach]HBu

基于colorUI+uniapp+vue-py.js实现的通讯录人名排序功能-爱代码爱编程

准备工作 1.vue-py.js 链接:点击这里跳百度网盘 提取码:n5d1 2.colorUI通过hbuilderX引入到页面中 3.将vue-py.js里的文件路径改成自己的引入路径 <template> <view> <scroll-view scroll-y class="indexes" :scroll

uni-app 页面显示hello world的方法-爱代码爱编程

直接写在view中用插值表达式将data中的内容渲染在结构中{{text}}使用v-html绑定到view中使用v-text绑定到view中一、v-text 用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。 {{message}} export default { data () { return { me

uni-app canvas绘制图片和文字-爱代码爱编程

canvas画布 绘制远程图片绘制文字 前言 前一段时间我们老师让我写一个关于画布功能的一个海报,这个海报是由图片和文字组成,刚开始我是不太了解这个画布的,后来各种百度… 首先需要在结构层设置的画布宽高以及画布id <view class="indeximg"> <canvas style="width: 100%;

微信小程序实现吸顶效果-爱代码爱编程

微信小程序实现吸顶效果 这篇文章主要为大家详细介绍了微信小程序实现吸顶效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层。

java微信支付api的Demo-爱代码爱编程

在公司中用到微信支付,根据业务选择的是jsapi支付主要是应对微信小程序里面支付,下面是我的一些总结1.首先根据业务进行正常的保存订单的功能 2.在支付的时候需要用到订单的id以及金额 支付的流程:1.1获取微信支付的预支付id,这个需要返回给前端进行调用 上代码: private WeixinPay getPackage(PayModel orderP

微信小程序之,转发到朋友圈-爱代码爱编程

一、微信小程序转发到朋友圈有限制条件,只有安卓手机才可以使用。 二、需满足两个条件参考文档 设置分享状态 小程序页面默认不可被分享到朋友圈,开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈,需满足两个条件: 1、首先,页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档 2、满足条件 1 后,页面需设置允

小程序页面生命周期函数-爱代码爱编程

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow:

小程序进阶学习01-爱代码爱编程

vue项目稍后再GitHub上进行更新,现在一起来学习小程序!! 一、微信小程序 1.微信公众平台 网址: https://mp.weixin.qq.com 1.介绍 微信公众平台,简称公众号,是开发者通过公众号为用户提供咨询和服务的平台 2.账号分类 (1)订阅号 订阅号:为媒体和个人提供一种新的信息传播方式,主要功能是

小程序进阶学习02-爱代码爱编程

一、小程序逻辑层 1.逻辑层的介绍 小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。 在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发: 增加 App 和 Page 方法,进行程序注册和页面注册。 增加 getApp 和 g