创建一个uni-app项目并运行再浏览器及微信小程序

uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；到此这篇关于微信小程序使用uni-app开发小程序及部分功能实现的文章就介绍到这了,更多相关微信小程序用uni-app开发小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

参考uni-app官网提供了HBuilderX可视化创建和vue cli命令两种方式创建项目，由于HBuilder和它都是DCloud公司的产品，使用它创建项目可以很方便的下载插件什么的。4.编辑器里点击微信开发者工具运行，等待一会会儿编译完后，微信开发者工具就会自动打开显示出页面。下载HBuilderX，然后参照这个文档点两下选择你需要的模版，就能建好一个项目啦！运行在内置浏览器是直接按照文档点击运行即可，但是会占用编辑器的空间。2.和浏览器运行一样需要在‘配置web服务器‘中 配置小程序的路径。

02 【uni-app起步】

uni-app实现了一套代码，同时运行到多个平台。一套代码，同时运行到iOS模拟器、Android模拟器、web、微信开发者工具、支付宝小程序Studio、百度开发者工具、抖音开发者工具、QQ开发者工具（底部每个终端选项卡，代表1个终端模拟器）。本次展示，运行在h5页面、微信开发者工具、mumu模拟器

1、首先需要下载HBuilderX软件（app开发版）; 2、下载成功之后就可以开始创建项目；选择文件–>新建–>项目，选择uni-app选项；点击创建； 3、然后选择运行–>运行到浏览器–>Chrome，查看项目是否可以正常运行； 4、然后发现有两个运行地址，本地和网络地址，两个都可以运行就表示成功了； 5、然后点击工具–>设置–>运行配置； 6、然...

1、安装HbiderX （1） 输入网址https://www.dcloud.io/，直接官网上下载 （2） 进入官网后选择下载对应操作系统的版本，一个是正式版，一个是Alpha版本。区别在于正式版稳定，Alpha具有更多的功能，但是可能有bug。在这里根据的需要下载。一般正式版就可。 然后我们可以看到不同操作系统又有2个，一个是体积小的标准版，没有太多插件，一个是App开发版。这...

第一章：uni-app框架介绍及环境配置 学习目标 了解uni-app的发展背景 掌握uni-app开发环境配置 掌握uni-app项目目录结构及功能 掌握uni-app应用如何运行在不同平台 掌握uni-app如何打包 了解uni-app应用如何发布 1.1 uni-app的发展历程 uni-app是什么？可以用来做什么？ uni,读作youni,统一的意思。DCloud（数字天堂（北京）网络技术有限公司）基于Vue.js开发的前端应用框架，开发者写一套代码，就能发布到iOS. Android、 H

3、在uni-app开发工具中点击运行微信开发者工具，微信开发工具运行成功。服务端口要是没有开启，会报 × initialize。2、检查微信小程序开发工具是否开启了服务端口。1、设置微信小程序开发工具路径。

注：uniapp中如果使用生命周期钩子函数，建议使用哪种?1）点击菜单栏 运行 --> 运行到终端 --> 运行设置。1）打开 微信开发者工具 点击 设置 --> 安全设置。如：想要运行到浏览器，也可以配置 浏览器 路径。如：微信小程序不自动弹出，需要导入项目到 微信小程序 即可。2）填写 微信开发者工具 路径。5. 安全设置（不开启没法运行，产生错误）3. 点击 微信小程序配置 进行内容填写。2. 右击侧边栏点击新建，选择项目。3. 填写项目名，点击创建即可。4. 运行设置（否则没法关联）

在Hbuilder中选择【运行】->【运行到浏览器】->【配置web服务器】->【浏览器运行配置】 ->【chrome浏览器安装路径】-> 【浏览】->【选择浏览器】在Hbuilder中选择【运行】->【运行到浏览器】-> 【chrome】

注册微信小程序、如何运行微信小程序

2.按回车键->显示命令‘already connected to 127.0.0.1:62001’（表示已经连接成功）->如果显示的是不能连接的英文,则需要我们打开夜神模拟器软件->继续输入adb devices指令->点击HBuliderX页面导航条中的‘工具’选项->点击‘设置’选项->进入设置页面,选中‘运行配置’3.编译uni-app项目即打开并选中uni-app项目中的pages文件夹下的文件夹中的vue文件。2.打开uni-app项目,选中其中pages文件夹下的文件夹中的vue文件。

页面中，你应该能看到已连接的设备列表以及该设备上运行的webview页面。找到你的应用程序对应的页面条目并点击“inspect”按钮，即可打开一个新的Chrome DevTools窗口对应用进行实时调试。对于H5环境，在应用成功运行后，IDE通常会自动弹出一个新窗口，这个窗口就是基于Chrome内核的浏览器窗口，并且已经连接了开发者工具。使用HBuilderX IDE，点击顶部菜单栏的“运行”按钮，选择“运行到手机或模拟器”，确保选择了开启“显示Webview控制台”。进入Chrome开发者工具页面。

这篇文章主要就是记录uniApp运行到小程序的过程。

uni-app是一个使用Vue.js开发所有前端应用的框架，允许开发者编写一套代码，即可发布到iOS、Android、Web（H5）、以及各种小程序（微信、支付宝、百度、字节跳动等）平台上。它由DCloud公司开发，整合了自家的5+ Runtime和各种小程序API，使得跨平台开发更加便捷。UniApp的目录结构遵循Vue.js项目的基本布局，并且针对跨平台开发进行了优化。

顶部菜单 → 运行 → 运行到小程序模拟器 → 微信开发者工具。手动打开微信开发者工具 → 设置 → 安全 → 开启服务端口。打开HBuilderX → 文件 → 新建 → 项目。HBuilderX → 顶部菜单 → 工具 → 设置。建议开启微信开发者工具的"不校验合法域名"用于调试。获取微信小程序AppID（需要注册小程序账号）→ 默认模板 → 输入项目名称 → 创建。填写微信小程序AppID（没有可用测试号）在微信开发者工具 → 工具 → 构建npm。等待自动编译（首次编译需要2-5分钟）

这篇文章主要针对刚开始接触混合开发的小伙伴，全文使用uniapp框架，使用HBuilderX结合微信小程序开发工具作为开发环境。搭建一个简单的入手项目，主要是对搭建项目的流程做一个简单介绍提示：以下是本篇文章正文内容，下面案例可供参考不用关心适配问题，css布局使用rpx作为单位，完美避开不同分辨率适配问题。多端融合，不仅可以发布到H5，还可以发布到各大平台的小程序，也支持安卓和ios原生APP使用Vue.js语法开发，相对其他混合开发框架上手比较容易。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅。