1.准备工作:HbuiderX  +  微信开发者工具下载安装+小程序账号申请开通(这里就不例举了,可以看同账号uniapp小程序开发准备)

2.创建项目

  新版本的HbuilderX点击新建项目——选择uni-app——选择默认模板——输入项目名称——选择Vue版本(此随笔是前后端分离开发,不使用UniCloud云开发)

3.目录有用介绍 

  里面基本包含

    pages文件夹——存放页面,等同于Vue中的view

    static文件夹——存放静态资源,类似于Vue中的assets

    App.vue存放每个页面的公共部分——像是下拉刷新或者分享小程序需要放在App.vue中的生命周期中

    index.html——根

    main.js——入口文件

   * manifest.json——项目配置文件(重要)在里面可以进行分享功能、小程序的Appid等重要功能配置

    pages.json——页面路由等配置(在创建文件的时候它会自动添加路由,如果使用到分包需要自己去进行修改、以及对整个小程序的表头或者TabBar等进行配置)

4.配置小程序开发者工具调试

  选择运行——运行到小程序模拟器——运行设置  找到小程序运行配置 —— 点击浏览选择微信开发者工具.exe 保存后即可

5.配置manifest.json文件

  将自己申请的小程序APPID填写到微信小程序配置中的微信小程序AppID中

6.启动项目
  选择运行——运行到小程序模拟器——微信开发者工具(第一次启动会有一些慢且需要自己扫码登陆,选择自己当前的小程序项目即可)

7.配置微信开发者工具

  右上角详情进行开发设置

  建议开启将JS编译为ES5、不校验合法域名其他自动开启的就不用关闭了

  在基本信息可以看到自己的发布状态和appid等信息

8.根据需求开发

 以上就是UniApp创建和运行小程序项目的步骤了

 小白第一次写博客,如有错误请指正,感谢

UniApp小程序开发项目创建与运行的更多相关文章

  1. (转)微信小程序开发项目——笑话大全

    此项目是学习完微信小程序后实现的一个demo,采用聚合数据的免费api获取最新的文本笑话和趣图(图片和gif图)   项目地址:https://github.com/zhijieeeeee/wecha ...

  2. 微信小程序开发项目过程中的一个要注意事项

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理, decode属性默认为false,不会解析我们的 ...

  3. 1-微信小程序开发(安装软件和运行第一个微信小程序)

    https://developers.weixin.qq.com/miniprogram/dev/ 我的 打开 上传成功后

  4. 这是一篇满载真诚的微信小程序开发干货

    1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录 ...

  5. 微信小程序开发注意事项(优化项)

    最近公司有一个小程序开发项目,自己也自学了不少,有一些开发小心得,记录在这里. 小程序开发中注意: 1,setData 小程序视图层和逻辑层在两个独立的模块,并不具备数据直接传递的,setData相当 ...

  6. 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?

    小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)? 自 2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web.iOS.Androi ...

  7. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

  8. uni-app 小程序从零开始的开发流程

    前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni- ...

  9. 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...

  10. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

随机推荐

  1. CMake指定的任务可执行文件"cmd.exe" 未能运行。System.IO.IOException:未能创建临时文件。临时文件夹已满或其路径不正确。对路径"......exec.cmd "的访问被拒绝

    我觉得是我使用VS2022的原因,网上也没有找到相同的问题.

  2. word多级标题自动编号设置

    1.选择段落 ->多级列表 ->定义新的多级列表 2.级别设置 ,这里操作比较繁琐,要多注意[输入编号的格式]要通过[包含的级别编号来自]这一项目来设定 标题1: 标题2 标题3: 标题4 ...

  3. [picoCTF]Scavenger Hunt write up

    http://mercury.picoctf.net:5080/,这个网站周围隐藏着一些有趣的信息.你能找到它吗? 根据提示: 您应该有足够的提示来查找文件,不要运行暴力破解程序. 点击链接,进入页面 ...

  4. 01.html大致主体格式

    <!DOCTYPE html> 不是HTML标签,就是文档声明标签 告诉浏览器使用哪种html版本来显示网页,其必须在文档中的最前面位置,要放在<html>标签之前, < ...

  5. 自动化兼容性测试工具——WeTest

    这个作业属于哪个课程 2021春软件工程实践|W班(福州大学) 这个作业要求在哪里 软件工程实践总结&个人技术博客 这个作业的目标 分享自动化兼容性测试工具的使用 其他参考文献 ... 目录 ...

  6. HTML-CSS常用代码

    注释标签:对代码进行说明<!-- 单行注释,也可以对多行文字进行注释 -->常用格式标签<b>加粗</b> <i>斜体</i> <u& ...

  7. linux sed 编辑

    只打印不修改内容 sed -n 's/sa/sa123/g' 1.txt  不加n是默认全部输出的意思 sed -n '1p' 1.txt  打印莫一行 sed a i c 表示追加 插入和替换 se ...

  8. TCP通信聊天服务端和客户端(C/C++语言开发)附完整源码

    距离上次学Python写的Python实现简单聊天室已经过去好久了,现在学c++又写了一遍,其实过程差不多,无非是语法的变化,目前仅实现最简单的一对一的通信,然后改就是了,接下来应该是多线程了,话不多 ...

  9. 大量数据的mysql分页查询

    优化之前 SELECT a, b FROM c LIMIT 800000,5000 优化之后 SELECT a, b FROM c WHERE id >= ( SELECT id FROM c ...

  10. HDF格式遥感影像批量转为TIFF格式:ArcPy实现

      本文介绍基于Python中ArcPy模块,实现大量HDF格式栅格图像文件批量转换为TIFF格式的方法.   首先,来看看我们想要实现的需求.   在一个名为HDF的文件夹下,有五个子文件夹:每一个 ...