今天分享一下我在uni-app创建并运行微信小程序项目时遇到的问题和解决办法,分两步给大家说明,第一步是没有任何报错下的流程,第二部是遇到的问题和解决办法;

一、正常情况(无报错)下的流程:

1、打开HBuilder X,点击文件,选择新建一个项目


创建成功后选中项目

2、点击HBuilder X菜单栏工具下面的 设置,然后在运行配置里面设置微信开发者工具的安装路径

3、在微信开发者工具中,点击 设置 下面的 安全设置,然后开启服务端口



4、最后在HBuilder X运行配置中填写web服务调用URL(本地IP+端口号),可查看如何查看电脑ip和端口
5、然后在HBuilder X点击运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可正确运行

运行成功!!!

二、有报错情况下的流程

1、第一次运行时提示缺少sass插件
解决办法:https://ext.dcloud.net.cn/plugin?id=2046 下载sass插件

下载后,将zip包解压到HBuilderX plugins目录。(注意:解压后,目录名必须为compile-node-sass)

试了半天这个办法在我这不生效,只能再试试另一种办法了!
因为我的HBuilder X版本较高所以可以使用插件导入

等导入成功之后需要重启HBuilder X,然后重新运行项目;
在我认为要成功的时候又报错了,真的很头疼~

2、提示说是服务端口关闭,根据提示去打开服务端口

打开服务端口之后端口号为空,百度上找了半天别人的都有端口号,就我的没有,很纳闷,唉ε=(´ο`*)));接着想办法呗还能怎么着呢

我查了半天有说是端口号被占用了的,我就试着自己改了一下端口号,最后还是没有什么用;
我在微信开发工具中看了一眼控制台,说是没有app.json文件,我说要不先解决这个,说不准那个就好了呢,然后查了半天资料说是app.josn文件在uniapp运行时会自动生成,我就运行到浏览器随便运行了一下

然后生成一个unpackage文件,在mp-weixin文件夹中有一个app.josn文件;

然后将这个app.josn文件复制到外部文件中

然后重新运行到小程序模拟器,

然后再打开微信开发工具中的服务端口,端口号就有了

以上就是我在创建uni-app项目中遇到的问题和解决办法,感谢大家的观看,有什么问题可以留言交流!!!

uni-app创建并运行微信小程序项目相关推荐

  1. HBuilder X运行微信小程序项目至微信开发者工具失败

    在HBuilder X中运行微信小程序项目时,此步于以下过程,无法进一步打开界面 解决方案:导入项目即可,但是需要注意导入项目的路径信息. 需要是当前项目unpackage==>dist==&g ...

  2. 第一次使用HbuilderX运行微信小程序项目

    1. 首先配置微信开发者工具路径 点击设置 再点击运行配置,找到小程序运行配置,设置自己对应的路径 如果没有配置路径,则会报错:  2 .设置微信开发者工具打开服务端口 3. 再HbuilderX项目 ...

  3. HBuilder X下载安装,运行微信小程序教程(官网)

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE. [1] HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写. ...

  4. uniapp微信小程序项目启动步骤

    如何创建项目就不说了,可以参考该链接: 如何创建开发uniapp微信小程序项目?链接: link 这里主要记录的是,从代码仓库拉取到本地后, 本地启动运行项目,遇到的问题. 1.下载项目 使用git ...

  5. uni-app(Vue.js)创建运行微信小程序

    uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...

  6. 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案

    主要是跟vue2相关的开发环境与框架. 本人选型方案 结合自身知识系统(vue2,webstorm),综上相关框架了解,选择了以下方案: 开发环境:HBuilder X  + Webstorm 框  ...

  7. APP 抓包和微信小程序抓包-Charles 的精简使用教程

    APP 抓包和微信小程序抓包-Charles 的精简使用教程 2021-09-25 更新 2019-07-10 更新 目标 教程 一.安装 Charles 二.Charles 简介 (1)Charle ...

  8. 新手创建第一个微信小程序教程

    在本地已有小程序开发环境的基础上,新手如何使用开发者工具.以及开发第一个微信小程序具体步骤和实施方法.本篇开发教程将详解新手入门时开发第一个微信小程序具体实施过程. 在安装完"微信Web开发 ...

  9. 微信小程序开发教程(二)创建第一个微信小程序

    在安装完"微信Web开发者工具"之后,通过开发者的微信扫码进入后,如图. 点击"添加项目",填入之前获得的AppID(无AppID可忽略),输入项目名称&quo ...

  10. 使用HBuilderX下载插件及运行微信小程序

    一,使用HBuilderX下载插件 使用HBuilderX开发项目,运行uniapp的过程中,会报错显示需要安装一些插件. 1,打开HBuilderX,选择工具>点击插件安装: 2,出现小弹框, ...

最新文章

  1. 使用fscanf读取文本文件
  2. 6,bash入门,for 循环, 编写最简单的脚本
  3. 使用OClint进行iOS项目的静态代码扫描
  4. 在实践中重试HTTP标头
  5. 一步步编写操作系统 60 cpu的IO特权级2 什么是驱动程序
  6. 视达配色教程2 好的配色的第一条件是什么
  7. Linux系统下的多线程编程入门
  8. 2018.12.27|区块链技术头条
  9. linux未找到make命令,linux中无make命令的问题(make: *** 没有指明目标并且找不到 makefile及make命令安装方法)...
  10. PyCharm中直接使用Anaconda已安装的库
  11. 动态代理和静态代理的区别_动态代理与静态代理
  12. Sentinel SuperPro加密锁编程开发
  13. error C2664: 'atof' : cannot convert parameter 1 from 'int' to 'const char *'
  14. 蚂蚁区块链大杀器首度亮相,速来围观!丨蚂蚁区块链创新大赛站
  15. JAVA程序包装成桌面应用程序
  16. stlink故障修复
  17. 禁用计算机usb设备,电脑如何设置禁止使用USB设备以及电脑怎样屏蔽U盘使用功能...
  18. 【转】 bio 与块设备驱动
  19. Apples Prologue(吃苹果问题) C++
  20. 现今中国大学生就业现状

热门文章

  1. 我的梦想是成为一名计算机程序员英语怎么说,我梦想将来成为一名程序员英语作文...
  2. 【推荐系统】逻辑回归(LR)在推荐系统中的使用
  3. 【无人机驾照】无人机驾驶员考试题库选择题1060道(带答案)
  4. js 微信端 信息一键导入 通讯录
  5. crmeb多商户二开crmeb类库二开文档services服务类【5】
  6. 家谱排版一般用什么软件
  7. 中文查重原理 及算法实例(python)
  8. 内网计算机ip地址查询,内网ip地址怎么查看_怎么查看内网ip地址_如何查看电脑的内网IP地址...
  9. 【SSL证书】如何使用 FreeSSL (V2.8.0) 申请免费证书及安装
  10. 锁定计算机怎么设密码忘记了怎么办,如何设置笔记本电脑指纹密码忘了怎么办...