专栏首页web秀Uni-App项目搭建以及准备工作

Uni-App项目搭建以及准备工作

准备工作

Uni-App项目开发,需要“定制化IDE”,也就是“HBuilderX”工具,主要是因为模拟运行调试一块,其他IDE不具备,其他功能和VS code、Submit Text 基本一致。

所以我们第一步我们下载工具:HBuilderX

下载App开发版,可开箱即用;如下载标准版,在运行或发行uni-app时,会提示安装uni-app插件,插件下载完成后方可使用。如使用cli方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了。

如果需要开发小程序,当然就要成为小程序端的开发者,所以第二步就是注册成为小程序端的开发者,拥有appid。

第三步,如果开发ios app,还需要去申请证书,方便后面上架App Store做准备。

创建 Uni-App

在点击工具栏里的文件 -> 新建 -> 项目:

选择uni-app,输入工程名,并且你可以从模板里的 你喜欢的模板 即可体验官方示例。最后点击创建,即可成功创建 uni-app 项目。

官方模板地址:DCloud 插件市场

创建完成后目录结构如下

目录结构介绍

注意:

static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。

cssless/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。

HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。

运行uni-app项目

浏览器运行:进入项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。

同理,还可以运行到手机模拟器,小程序模拟器等。

运行后,目录会多一个,这里就是各端编译后的文件,如下图:app-plus(ios端),mp-toutiao(头条小程序端),mp-weixin(微信小程序端)

注意: 如何你“微信小程序模拟”,需要打开微信开发工具,然后 设置 -> 安全 -> 服务端口 -> 开启。否则连接接不上。

头条小程序,先模拟运行,然后打开头条小程序开发工具,导入项目,选择上图的mu-toutiao目录,后面更改文件,就好自动更新编译过去了。

总结

项目搭建是非常快速的,和vue脚手架一样便利。同时,需要注意上面标注的"注意"事项,这样搭建,以致后面开发会更简单、轻松一些。

最后,谢谢大家支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js 一套代码,发布到iOS、Android、H5、以及各种小程序

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/...

    Javanx
  • 你不知道的高性能实现深拷贝的方式

    JS 中有个重要的类型叫做引用类型。这种类型在使用的过程中,因为传递的值是引用,所以很容易发生一些副作用,比如:

    Javanx
  • UniApp实战:动态数据(uni.request封装、uni.getLocation获取定位等)

    有人肯定会问,人家uni.request()已经挺好的了,为什么非的在封装一次了?

    Javanx
  • 想跨端开发小程序?这个最流行的跨端框架一定要学习!

    从最早发布的微信小程序,到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢?

    极乐君
  • iOS-UITableView 之 重写 loadView 导致程序崩溃

    用户1890628
  • uni-app开发小程序入门到崩溃

    最近一段时间公司要做一个小程序项目,还要支持,微信小程序,头条小程序,百度小程序。一套代码,实现三个平台。当时接到这个任务,就不知道怎么去下手,一套代码,分别要...

    小周sri的码农
  • 数据运营的三重门,你可知晓?

    近年来,“大数据”日益成为国家基础性战略资源,其所蕴藏的巨大潜力和能量在各行各业不断积蓄的同时,整个数据行业的技术基础和实践能力也获得了长足的提升,对于数据的分...

    iCDO互联网数据官
  • 【DB笔试面试745】在Oracle中,RAC环境下的Redo文件可以放在节点本地吗?

    不能。同单实例的系统一样,在RAC环境中,每个节点实例都需要至少两组Redo日志文件,且每个节点实例有自己独立的Redo日志线程(由初始化参数THREAD定义)...

    小麦苗DBA宝典
  • Facebook 开源 FAISS;MIT 开发机器学习数据合成系统 SDV | 开发者头条

    更高效的聚类、相似性搜索算法库,Facebook 开源 FAISS MIT 黑科技,合成数据也能用于机器学习 机器学习算法成功预测人造地震 每日推荐阅读 Vi...

    AI研习社
  • 谷歌新研究:基于数据共享的神经网络快速训练方法

    网络训练速度的提升对神经网络的发展至关重要。过去的研究着重于如何在 GPU 和更专业的硬件设备上进行矩阵和张量的相关运算,从而代替 CPU 进行网络训练。GPU...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券