如何搭建一个uni-app项目并运行
前言：
因项目需求，需要开发移动端项目，其中包含微信小程序和APP。而前端人员有限，所以需要一个人开发移动端，为了更好的提供用户体验，且有vue和微信小程序开发经验，所以准备上手用uni-app，咨询了小伙伴们，听说上手很快，而之前也只是了解阶段，所以，这次准备用这个项目来试试。
前期准备工作：
1.下载HBuildX HBuildX下载地址
微信开发者工具 微信开发者工具下载地址
2.安装IDE，并且IDE的安装不能放在如Program Files (x86)中带有特殊符号的目录下
3.安装微信开发者工具，先授权登录，然后打开设置，进入安全设置，开启服务端口。如下图所示
正式开工，创建uni-app项目：
1.打开IDE，点击文件---》新建---》项目---》uni-app---》填写项目名称、存放路径---》默认模板---》创建
2.创建好的项目路径如下图，主要的业务界面放在pages里
manifest.json是用来配置小程序appid，AppSDK等的文件
3.在pages中的index.vue文件中写入如下代码，则可在小程序和app端分别展示不同的数据
4.点击导航栏的运行，或者ctrl+r打开运行，选择微信开发者工具，运行小程序，下图是运行界面
点击运行---》运行到手机或模拟器，下图是运行界面
以上证明代码可以正常执行，并且能个实现小程序和APP展示不同的数据
5.发行
A.打包App，选择发行---》App云打包---》选择DCloud证书(或者选择自有证书，输入相应数据)
B.微信小程序，打开manifest.json文件---》选择微信小程序配置---》输入微信小程序AppID---》点击控制台右上角重新运行按钮---》然后就可以在微信开发者工具上面进行小程序的预览和发布
总结
大概走了一遍流程，uni-app上手蛮快的，操作起来也比较简单，后续可以写几个demo测试一下，或者选用uni-app的模板直接运行浏览查看
如何搭建一个uni-app项目并运行相关推荐
- radio切换控制div显示_React 项目实践——搭建一个温度控制 App
我们将搭建一个温度控制 App,帮助初学者学习 React state hook.handle 事件等等. 尝试自己搭建 如果你想先自己试着写这个项目,可以对照下列项目需求(你也可以参考下方的初始代码 ...
- 小程序教程1：初识小程序，快速搭建一个小程序项目
前言: 打算整理一个小程序系列的资料.如何快速搭建一个小程序项目,以及一个小程序项目应该有哪些内容. 相关资料: 微信公众平台微信公众平台,给个人.企业和组织提供业务服务与用户管理能力的全新服务平台. ...
- 教大家搭建一个手机app软件导航网
今天教大家搭建一个手机app软件导航网 1.服务器基础环境 服务器宝塔界面安装Nginx 1.20.1 + php 5.6 +mysql 5.6.50 2.上传手机app软件导航网源码,源码上传后解 ...
- [纯代码] Swift+UIKit · 搭建第一个iOS APP项目
本文目录 前言 创建一个纯代码编辑的Swift + UIKit项目 创建一个Swift + UIKit项目 让它变成纯代码编辑的 让你的APP打开指定的ViewController 创建一个窗口 编辑 ...
- 几步教你轻松搭建一个Java Web项目
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 作者:张丰哲 www.jianshu.com/p/ab6a9eaa ...
- 手动搭建一个Spring Boot项目
Spring Boot如果在电脑联网的情况下可以使用在线插件进行自动搭建,没有插件的情况可以手动搭建. 以下是eclispe手动搭建的流程: Eclipse→File→New→Maven Projec ...
- 如何利用qiankun快速搭建一个微前端项目
前言 小伙伴们大家好.前一篇文章跟大家分享了一些关于微前端的知识点,包括什么是微前端,为什么要用微前端以及如何实现一个微前端,在文章的最后我们还提到了能够实现微前端的两个库:single-spa和qi ...
- 如何搭建一个集群项目
一.集群项目是什么? 搭建项目之前首先要明白什么样的项目才叫集群项目,那么什么叫集群呢?说的简单一点,集群就是很多对象集合在一起,集群项目就是很多一摸一样的项目放在一起运行嘛. 二.集群项目有什么用? ...
- 用idea搭建一个Spring Cloud项目（含代码）
目录 目标 相关术语介绍 实战 搭建父工程(聚合工程) 搭建注册中心微服务 搭建生产者和消费者微服务 新增Eureka用户认证 新增健康检测 手动维护注册列表 剔除微服务 up微服务 down微服务 ...
- 创建第一个Flutter App项目
上篇,我们讲了Flutter在Windows下开发环境的配置,并创建一个新的Flutter项目.这篇我们来讲,创建Flutter App项目. 看下我们最终实现的效果: 第1步: 创建 Flutter ...
最新文章
- python语法总结-Python and、or以及and-or语法总结
- jQuery：localStorage用法
- .Net Core Nuget还原失败
- Windows Azure Storage论文解读
- SQL Server timeout分析和总结
- java格式化输出双精度小数,用Java格式化双精度类型
- 【转】从头说catalan数及笔试面试里那些相关的问题
- base32解码工具_[随波逐流]CTF编码工具 V1.0
- HDU1976 Software Version【水题】
- python读取配置文件 分段_python配置文件读取
- VS C#/C++ 诊断工具找回 诊断工具打开 诊断工具发现
- python圣经是哪本_我的圣经：17年前的那本《Python 2.1 宝典》
- 计算机网络中的ping什么意思,PING命令是什么？PING使用方法和参数详解
- Mac 安装brew+unrar解压rar
- 蚂蚁区块链第2课 如何申请获得100万创新大赛参赛资格？
- 梅西明明有高薪为什么还努力踢球？
- linux升级失败无法启动应用程序,Ubuntu升级后无法启动 kernel panic - not syncing
- 2021年中国一次性血压计袖带市场趋势报告、技术动态创新及2027年市场预测
- Linux磁盘管理：磁盘分区的分配和格式化磁盘
- foxmail 发不出邮件，被电脑管家云查杀引擎检测出带有病毒：Win32.Trojan.Agent.hryf