uni-app官网介绍的 通过 HBuilderX 可视化界面

跟着小颖来创建一个自己的小程序

创建小程序

依次点击HBuilderx 左上方的按钮：文件->新建->项目

然后打开该界面，输入项目名称，点击 浏览 按钮，可以选择项目保存的目录，这些完成后点击 创建 按钮就好了

比如小颖的项目名叫 ：test-ying

如果大家第一次运行到微信小程序模拟器的话，需要配置下它的信息

配置微信小程序运行地址

依次点击按钮：运行->运行到小程序模拟器->运行设置（s）（这个是菜单里最后一个，就找最后一个就好啦），然后就看到了下面的界面：

小颖圈起来的地方就是要去配置微信开发者工具路径的地方。

运行小程序

一切准备就绪后，那就开始运行吧，先选中你的项目，然后依次点击按钮：运行->运行到小程序模拟器->微信开发者工具（记得压缩代码哦：要点一下：运行时是否压缩代码）

然后微信开发者工具就会自己打开啦

虽然开发者工具中能看到小程序的样子，但如果想拿手机看下效果，发现小颖圈起来的地方是禁用的哦，这时候怎么办嘞，看提示说：登录用户不是该小程序的开发者，那就配置开发者账号，将自己的微信小程序AppID配置给我们创建的小程序就好啦

配置微信小程序AppID

manifest.json 配置

打开 manifest.json 文件，找到 微信小程序配置，填写 微信小程序AppID，此 AppID 必须是本人有权限的 ID。具体配置如下图。

获取 AppID

登录 微信公众平台，点击 开发管理 -> 开发设置，即可查看。

然后将 AppID 复制粘贴到  manifest.json  中，然后我们再重新运行小程序，这时就发现它就可以预览、真机调试啦

手机预览

点击微信开发者工具中的 预览 按钮，然后用自己的手机扫描二维码，然后就可以在手机上看到小程序的样子啦

题外话

当我们运行小程序时，在微信开发者工具的右下角有个 代码质量

这个我们在 HBuilderx 中点击项目的  manifest.json  ->源码视图（最后一个）

给其加入  "lazyCodeLoading": "requiredComponents",  然后重新运行小程序，然后在代码质量那里点击  重新扫描 ，如果重新扫描没反应，就把微信开发者工具关了，停止运行，然后再重新运行，在新进入的界面里点击重新扫描就好啦。

掘金地址：HBuilderx 创建 、运行uniapp项目

HBuilderx 创建 、运行uniapp项目的更多相关文章

  1. [Intellij] 在IntelliJ IDEA 中创建运行web项目

    安装工具 1.JDK7+ 2.IntelliJ Idea 工具(下载安装后,网上找注册码破解即可) 3.tomcat7+ 解压缩版 明确两个概念: 1.Project:类似于eclipse的works ...

  2. java创建运行以及项目结构

    一 创建java project 再src下添加class,选择一个class添加main方法作为程序的入口 二.项目结构: src下添加不同的包,命名方法为com.jikexueyuan.hello ...

  3. idea 创建运行web项目时,报错: Can not issue executeUpdate() for SELECTs解决方案

    最近在做一个Web课程设计的时候遇到了如下的问题. java.sql.SQLException: java.lang.RuntimeException: java.sql.SQLException: ...

  4. 使用uni-app(Vue.js)创建运行微信小程序项目步骤

    使用uni-app(Vue.js)开发微信小程序项目步骤 1. 新建一个uni-app项目   创建完成后的目录结构 2. 打开微信小程序开发工具端的端口调试功能 3. 运行创建的项目 效果

  5. hbuilderX创建vue项目之添加router路由（前端萌新）

    作为一个刚刚接触前端不久的新人来说,熟悉了一种目录结构或者项目创建方法以后,恨不得一辈子不会变! 可是人要生活,就要工作,既然是打工,当然要满足雇佣者的要求. 今天我来说说 hbuilderX 这个开 ...

  6. 在命令行中运行eclipse中创建的java项目

    在命令行中运行eclipse中创建的java项目 博客分类: java相关 javaeclipse命令行  由于项目要求,需要对eclipse中的项目进行打包,似的可以在客户机上不装eclipse的情 ...

  7. 使用cmd命令创建maven(web)项目+项目转换成IDEA项目+项目打包+Jetty运行Web项目

    3条件:配置好环境 配置环境教程:https://www.cnblogs.com/weibanggang/p/9623705.html 第一步:查看版本信息,在cmd输入mvn –version,如果 ...

  8. 创建springboot2.1项目运行报错

    刚创建好一个项目,运行就报错:in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/logging ...

  9. Linux04 /创建虚拟环境、在linux环境运行Python项目

    Linux04 /创建虚拟环境.在linux环境运行Python项目 目录 Linux04 /创建虚拟环境.在linux环境运行Python项目 1. 大体流程 2. linux环境安装python3 ...

  10. 【有问必答】搭建uniapp项目流程手把手教学

    前言 缘由 博友有问,狗哥必答 前段时间,博友加本狗微信,询问uniapp的学习方法.本狗资历浅薄,没有专门学过uniapp,只能将自己日常开发uniapp的基本流程和步骤进行分享,希望可以略尽绵薄之 ...

随机推荐

  1. 4.2 C++ Boost 内存池管理库

    Boost 库是一个由C/C++语言的开发者创建并更新维护的开源类库,其提供了许多功能强大的程序库和工具,用于开发高质量.可移植.高效的C应用程序.Boost库可以作为标准C库的后备,通常被称为准标准 ...

  2. torch.nn基础学习教程 | PyTorch nn Basic Tutorial

    基于torch.nn搭建神经网络的基础教程大纲: 1. 引言 在我们开始深入探讨torch.nn之前,我们首先需要理解PyTorch及其神经网络库的基础知识.这一部分的内容将帮助你对PyTorch有一 ...

  3. MySQL允许远程登录的授权方法

    泛授权方式 数据库本地直接登录上数据库: mysql -h localhost -u root 然后执行以下命令,授权完后直接就可以远程连接上.mysql>GRANT ALL PRIVILEGE ...

  4. textarea自动适应高度

    textarea自动适应高度,兼容IE/Firefox.chrome 代码:<textarea name="textarea" id="textarea" ...

  5. Java程序员学vue3最好的方式就是搭建后台管理模板

    前言 作为Java程序员,vue3还是有必要学的,毕竟是国内最受欢迎的前端JS框架,你现在接手的项目,前端部分几乎都会和vue沾边,尤其是中小企业. vue3作为新的大版本,相较于vue2改动还是很多 ...

  6. C#希尔排序算法

    前言 希尔排序简单的来说就是一种改进的插入排序算法,它通过将待排序的元素分成若干个子序列,然后对每个子序列进行插入排序,最终逐步缩小子序列的间隔,直到整个序列变得有序.希尔排序的主要思想是通过插入排序 ...

  7. Solution Set -「ARC 124」

    「ARC 124A」LR Constraints Link. 我们可以把 \(1\sim n\) 个盒子里能放的球的编号集合全部求出来.然后就直接来. 注意题目已经给出了 \(k\) 个球的位置,所以 ...

  8. Redis 命令工具

    --- Redis 命令工具 --- redis-server Redis 服务器启动命令 redis-cli shutdown 停止服务 redis-benchmark:性能测试工具,用于检测 Re ...

  9. pbjs 无法编码 bytes 类型数据问题的解决方案

    问题背景 之前写过一篇<使用脚本收发 protobuf 协议数据>,通过 pbjs 命令可以将 protobuf 二进制数据转换为 json: > pbjs msg.proto -- ...

  10. 中国科教工作者协会与CCF PTA联合认证学习须知

    中国科教工作者协会与CCF PTA联合认证学习须知 1.参与认证人员需在科技学堂(www.sciclass.cn)上进行课程学习,然后在PTA官网(pta.ccf.org.cn)报名并参加认证考试,考 ...