最近刚入门看了下uni-app的内容,上手测试下


第一步肯定是参照官方文档操作,一步步傻瓜式来,建立你第一个helloworld。

官网教学:https://uniapp.dcloud.net.cn/quickstart-hx.html

根据官网一步步去操作,直到要运行的时候,为何我运行的时候是这样的:

uni-app新手入门手把手解决疑惑_官网

第一个问题来了:

怎么显示这个,什么在代码区键入字幕U,啥的,都试了,都是这个页面,对于新手的我来说,第一、uni-app怎么是这样显示,正常不应该是一个页面么,感觉这个是错误的提示。第二、如果要写代码从哪里开始?

解决问题:

所以就要看看这推荐看看这篇文章了:https://blog.csdn.net/m0_46651458/article/details/130957867

uni-app新手入门手把手解决疑惑_.net_02

就是随便加一些内容,看看现实如何,这就解决了第一个问题,原来uni-app首次显示就是如此,那么第二个问题,在哪里编写呢?

uni-app新手入门手把手解决疑惑_官网_03

如上图所示,这就测试出来了,原来主页就是这个,刚开始还以为是:

uni-app新手入门手把手解决疑惑_uni-app_04


有前端vue基础的、或者html、js、css基础的,就可以开始你们的编码旅程了。


第二步就是要了解控件啥的如何添加,这个uni-app难道需要要自己写控件或者其他的?

当然不是,uni-app官网有提供插件市场:https://ext.dcloud.net.cn/

供你使用,看看有没有适合你的?

第二个问题来了:

如何引入插件?

解决问题:

随便选择一个插件:

uni-app新手入门手把手解决疑惑_官网_05


肯定先点击选择右上角的:

uni-app新手入门手把手解决疑惑_uni-app_06

我才你肯定要问,为何不选择蓝色那个,蓝色那个是它单独的一个项目,类似github的源码,类似这样:


uni-app新手入门手把手解决疑惑_uni-app_07


所以我们选择的是第一个绿色的。

要求你先看段广告,然后免费使用

uni-app新手入门手把手解决疑惑_uni-app_08

广告看完后,引入的插件就跟vue的类似,这里会有它的包。

uni-app新手入门手把手解决疑惑_官网_09


关于代码可以看看它的介绍:

uni-app新手入门手把手解决疑惑_官网_10

就基础的很快就上手,跟平时用vue插件没有什么区别。


搞定后就是调式了,这个官网有描述,我这里就不在重复。


最后,如果用vue或者其他框架习惯的朋友,你用vscode或者其他IDE,uni-app也提供了cli的方式,就跟你npm install xxx类似,就是先拉取uni-app,在拉你需要的插件等。

只不过官方提供的HBuilderX比较适合新手使用,学习成本低。