美文网首页
从零搭建一个uni-app项目

从零搭建一个uni-app项目

作者: 壹家全栈 | 来源:发表于2020-12-23 14:41 被阅读0次

第一步:准备好HbuilderX工具哦。

uni-app官网有相关的介绍,另外也可以参考我的那篇HbuilderX安装的文章。

要下载app开发版本的HbuilderX工具哦。

第二步:新建一个uni-app的项目,选择空项目。

当然,如果你是新手的话,可以去新建uni-ui项目或者Hello uni-app项目看一看。

新建项目

uni-app的默认模板项目里面文件夹结构是这样的:

默认文件夹

在项目的过程中,我目前用到最多的文件夹有:api、common、components

其中components文件夹是用来安装组件,放组件使用的。

新建的文件夹

在api文件夹下,新建一个api.js的文件,用来存放将来要调用的接口路径。

在common文件夹下,你可以新建 util.js用来存放你常用的方法,新建request.js去存放你封装好的request方法。

在main.js中,可以去调用你的引入使用的js和配置。这个跟vue类似。

四、运行项目

打开你项目的文件夹的任何一个文件,然后点击HbuilderX上面的运行,运行到小程序模拟器即可运行, 注意,使用小程序模拟器运行,需要安装微信开发者工具。

你也可以h5运行到浏览器,也可以查看。如果您的项目是小程序项目最好使用小程序开发者工具去运行,这样能更好的看到最后的效果。

小程序在某些地方,和h5端表现不太一致,需要做样式上的调整,这一点可以去官网搜索。

五、发布项目

当您已经被加入到小程序的开发者中,拥有开发者权限之后,即可配置你的appID,然后点击发行--》小程序-微信。然后会在微信开发者工具中运行起来你的项目,点击上传即可。

配置AppID

作者笔:

在最后,希望各位朋友可以多看看uni-app的官网,最好从头到尾看一遍。然后熟悉它的api特性,了解它的缓存弹框各种工具组件的使用,不懂的时候就去官网找,都可以找到哦。

快速开发小程序,并且支持各种小程序端和app端、H5等,uni-app一定是你不会后悔的选择。

相关文章

  • 从零搭建一个uni-app项目

    第一步:准备好HbuilderX工具哦。 uni-app官网有相关的介绍,另外也可以参考我的那篇HbuilderX...

  • uniapp 为什么嵌入web-view页面空白

    搭建了一个项目uni-app项目,嵌入了web-view,按照教程来搭建,src 引入文件和路径都没有问题,可是页...

  • 从零搭建通用项目-基础框架

    从零搭建通用项目-基础框架 前言:由于公司项目众多,每次新项目开始都从零搭建项目既费时,又效率低下。这个时候就需要...

  • SpringCloud项目之Feign搭建

    从零搭建一个SpringCloud项目之Feign搭建 工程简述 目的:实现trade服务通过feign调用use...

  • 从零搭建VUE项目

    引用原型,快速搭建一个原型,应用webpack-simple模板;用vue-cli来支持一个项目: 以上是正常的安...

  • 从零搭建Vue项目

    一、安装node环境 点击链接,在官网下载。https://nodejs.org/zh-cn/download/ ...

  • 从零搭建Vue项目

    1,搭建Node环境(此处就省略了,可自行百度)2,搭建Vue项目环境全局安装vue-cli(Vue脚手架):cn...

  • 从零搭建一个vue项目

    最近感觉自己越来越像一个API调用程序员,很多基础的原理以及项目构建都没实际操作过,所以这里动手自己去搭建了一个v...

  • PHP后端该如何组织项目结构

    这是 后端开发者从零做一个移动应用 的后端部分第二篇。介绍下一个新项目,后端该如何从零去搭建。我们先假设这个项目由...

  • 搭建 uni-app ts 项目

    本文介绍一下如何使用搭建 typeScript uni-app 项目。注意,本文使用vue-cli在 VSCode...

网友评论

      本文标题:从零搭建一个uni-app项目

      本文链接:https://www.haomeiwen.com/subject/zagynktx.html