uniapp甘特图

本文目录一览：

• 1、新手怎么用uniapp制作图中小程序的样式？
• 2、uni-app 入门到精通 （二）
• 3、uni-app 项目小程序端支持 vue3 介绍
• 4、uniapp面试题必问有哪些?
• 5、uniapp多久能上手
• 6、uni-app怎么进行上线？

新手怎么用uniapp制作图中小程序的样式？

很多新手在开始制作小程序的时候都想快速做一个功能看起来不错的小程序，那么怎么做呢？下面小编给大家分享一下。

方法/步骤

首先大家要下载按照Hbuilder软件，点击新建下面的项目

接着项目类型里面选择uni-app，然后选择一个模板，如下图所示

然后就创建好了项目的目录，如下图所示

接着打开Hbuilder的设置界面，配置小程序开发工具的路径，如下图所示

然后打开小程序开发工具，选择安全设置

接着开启服务端口，如下图所示

接下来我们点击Hbuilder的运行菜单，选择运行到小程序模拟器的微信开发者工具上，如下图所示

最后就可以看到一个小程序就快速制作完成了，如下图所示

uni-app 入门到精通 （二）

18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。

这一篇文章主要分享一下内容

uniapp 模板项目有两种初始化方式

由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化项目， HBuilderX 大家可以参照官方文档

这种方式是可以通过 vue 脚手架命令指定模板，这个是 dcloudio 的官方提供模板

我们选择默认模板即可，

成功后我们执行

打开浏览器地址，直接运行即可。

一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，

当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。

通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。

rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准， 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：

uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

2.uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

3.uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide

4.uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

5.uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

5.uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

以上路由API 已经满足我们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置

而进行具体路由跳转我们需要如下，需要多加一个 /

需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

uniapp 提供网络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值

不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。

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。

uniapp面试题必问有哪些?

ni-app面试考试有几个题是必问的：uni-app收费吗？跨端会造成功能受限制吗？以及uni-app的手机端用户体验如何？

1、uni-app收费吗？

uni-app是免费产品，DCloud公司不会向开发者收取任何费用，大家可以放心使用。

DCloud提供的所有开发工具都是免费的，也不会有什么陷阱。

DCloud的盈利点在帮助开发者进行推广和流量变现上，而不在开发工具收费上。

2、跨端会造成功能受限制吗？

uni-app在跨平台的过程中，不牺牲平台特色，不限制平台的能力使用。

应用开发中，80%的常规开发，比如界面组件、联网等api，uni-app封装为可跨多端的API。

其余的，uni-app引入条件编译。可以优雅的在一个项目里调用不同平台的特色能力。比如push，微信小程序里不支持，但可以在App里使用，还有很多原生sdk，在App时难免涉及，这些都可以正常的在uni-app框架下使用。

3、uni-app的手机端用户体验如何？

使用uni-app开发的微信小程序，和直接开发微信小程序相比性能没有明显差别，因为uni-app输出到微信时也是编译为wxml格式。uni-app编译到微信使用的是mpvue框架，这个是业内广泛使用的成熟框架。

uni-app打包成App后的体验和微信小程序一样好，在某些场景下更好；微信小程序的Hybrid应用框架是业内体验上的标杆，实践证明这种体验足以承载一线互联网开发商获得上亿用户。

uni-app内置预载机制，加载新页面速度极快，可实现无白屏极速渲染。

uni-app在App端还支持weex原生渲染（nvue），左右拖动长列表等复杂场景依然可实现高流畅性。

uniapp多久能上手

主要看个人学习能力和学习时间决定

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。uni-app 继承自 Vue.js，提供了完整的 Vue.js 开发体验。uni-app 组件规范和扩展api与微信小程序基本相同。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ，开发出兼容多端的应用。uni-app提供了条件编译优化，可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。

uni-app怎么进行上线？

提前申请和准备要要用的证书

用HBuilderX打正式包。

1）要在manifest.json里面配置App图标和启动图片

2）App图标尺寸：png 格式图片 256*256

启动图片尺寸：png 格式图片 480762 7201242 1080*1882

3. app上架材料梳理：

一般看个人要求，在腾讯、华为、小米各个平台上线。

每个平台都要注册开发者账号，用企业信息注册，注意开发者账号公司和软著要一致，否则华为、腾讯会让你重新按软著上的公司名称注册开发者账号。小米要提供一个代理授权书。

1）共同提交的材料：

1.公司名称

2.公司营业执照、其中百度需要营业执照复印件并且在文字的地方加盖公章。

3.企业法人身份证照片（正反两面），其中百度另外要求上传手持身份证照片（正反两面）。

4.企业对公账号，其中华为和小米打钱验证，利用金额进行验证。

5.企业地址。

2） 提交应用审核资料：

1.软著，jpg,png,pdf，3种格式。

2.企业营业执照，pg,png,pdf，种格式。

3.图标，尺寸不一致。216216 jpg 512512 jpg

4.应用内截图，多截几张，最后用测试账号截图。

5.应用简介和应用描述。

9.icp备案截图。

7.如果软著公司和开发者账号不一致，需要提供代理授权书，签字盖章。

8.隐私政策网址。

上架成功后需要在各个商城自行下载。