UniApp小程序开发项目创建与运行

这篇具有很好参考价值的文章主要介绍了UniApp小程序开发项目创建与运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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创建和运行小程序项目的步骤了

 

 小白第一次写博客,如有错误请指正,感谢文章来源地址https://www.toymoban.com/news/detail-411274.html

到了这里,关于UniApp小程序开发项目创建与运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 企业小程序开发步骤【教你创建小程序】

    随着移动互联网的兴起,微信已经成为了很多企业和商家必备的平台,而其中,微信小程序是一个非常重要的工具。本文将为大家介绍小程序开发步骤,教你创建小程序。 步骤一、注册小程序账号 先准备一个小程序账号,在微信公众平台的网站上注册即可。注册时要注意,

    2024年02月11日
    浏览(42)
  • uniapp小程序开发|基于微信小程序实现小型比赛自动编排系统

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月11日
    浏览(49)
  • 微信小程序开发 | 音乐小程序项目

    2023年04月20日
    浏览(45)
  • 微信小程序开发系列(三)·微信小程序页面的创建、小程序如何更改调试基础库

    零基础手把手教你创建微信小程序(一)·微信小程序开发账号的注册以及开发者工具的安装和使用-CSDN博客 零基础手把手教你创建微信小程序(二)·创建第一个微信小程序以及了解小程序代码的构成-CSDN博客 目录 1.  小程序页面的创建 1.1  方法一 1.2  方法二 2.  小程序如

    2024年04月26日
    浏览(57)
  • 小程序开发——小程序项目的配置与生命周期

    app.json配置属性   app的页面配置指的是pages属性, pages数组的第一个页面将默认作为小程序的启动页。利用开发工具新建页面时,则pages属性对应的数组将自动添加该页面的路径,若是在硬盘中添加文件的形式则不会触发该效果。pages属性配置示例代码如下所示: 上述代码中

    2024年02月07日
    浏览(41)
  • 微信小程序开发15 项目实战 基于云开发开发一个在线商城小程序

    在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识。在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识和能力。而第 4 个模块里,我带你认识了微信小程序的云

    2024年02月11日
    浏览(57)
  • uniapp开发小程序-pc端小程序下载后端接口的二进制流文件

    fileName 包含文件名+后缀名,比如 test.png 这种格式 api.DownloadTmtFile 后端接口返回的是文件的二进制流 值得注意的是,微信开发者工具中是测试不了 wx.saveFileToDisk 的,需要真机或者体验版测试

    2024年02月04日
    浏览(64)
  • 【小程序】零基础微信小程序开发+实战项目

    如何拥有一款属于你自己的小程序,惊喜就在下面! 目前,小程序行业已经成为互联网营销的热门黑马之一,依托于各大流量平台,小程序行业具有天然的用户基础和得天独厚的资源优势,凭借其方便快捷的操作以及简单通俗的模式,仅短短一年的时间,就迎来了爆发性的增

    2024年02月11日
    浏览(50)
  • uniapp项目从Hbuilder Vscode运行到小程序模拟器 微信开发者工具后没有反应,进不去!其实保姆级答案只需要三步

    先看问题如下图:uniapp项目从Hbuilder 或者Vscode点击运行到小程序模拟器 微信开发者工具后没有反应,进不去 只能在最外面如下图: 如何解决: 如果不知道如何查看自己的微信小程序AppID请看我的另一篇文章,下方是文章链接 如何查看自己的appid以及在微信开发者工具中查看

    2024年02月11日
    浏览(110)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用,印象中需要小程序ID,去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载,我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包