uniapp的简单入门

图片

快捷开发神器

因为uniapp是一个框架,所以很多的功能都已经写好,类似vue,例如页面路由,各种组件在新建项目时已经帮你下载好了,也不需要再注册组件等操作,直接引用即可。

图片

01下载编辑器

下载uniapp官方编辑器HbuiderX,注册登陆。

02新建uniapp项目

进去编辑器,新建,项目,uniapp项目,命名项目,选带ui的模板,点击创建,此时项目已经创建完毕。

03配置浏览器

该编辑器支持配置Google,火狐浏览器,将电脑的Google浏览器路径填上就行了。配置是为了预览项目。

04下载插件

插件是为了支持项目更好的运行,下载内置浏览器,sass插件,因为插件市场有些插件需要sass编译css。

05写项目

打开项目中的index.vue,开始写页面内容,可以打开官网,复制用到的组件代码直接用,也可以直接在页面内输入u,就会弹出内置组件,按上下方向键即可选择对应的组件,回车即可复制到内容中。

每个页都一样,要几个页,就新建几个页面,点击新建,页面,vue页面。

实现每个页面之间的切换,用底部导航,和微信小程序一样,去官网复制tabbar代码,这个代码要写在配置页pages.json中,有几个页面,就设置几个选项,官网说的很清楚,然后在配置各个页面的路径,这一步做完之后就可以实现切换页面。

06打包成app

点击项目中的mainfast.json,基础,点击获取Appid,版本号填1。

配置app图标,启动图等,这些图片要遵循规定的标准尺寸。

点击编辑器的菜单,发行,云打包,选安卓,写包名,格式为**.**,选公用证书,去掉广告,点击打包。

等待打包完成,编辑器的控制台,会输出一个下载地址,点击这个地址,复制这个地址,发送到手机。手机上点击下载安装,

图片

有些组件做不了的东西,可以使用flex布局和css以及js实现。

       ----      关于插件市场的使用      ----

01

下载,解压,有两个文件,一个静态资源,一个页面文件,把静态资源文件夹拷贝到static目录下,把页面文件拷贝到pages目录下,在pages.json中添加这个页面路径,在tabbar中地址配好,其实就实现了通过tabbar切换一个单页,不过这个单页是复制来的。

02

下载,解压,只有一个文件,把这个文件拷贝到项目的components目录下,和局部组件一样,import引入,再通过组件介绍配置这个组件的相关js即可使用。

  • 9
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值