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

  • UniApp小程序开发项目创建与运行已关闭评论
  • 165 次浏览
  • A+
所属分类:Web前端
摘要

1.准备工作:HbuiderX  +  微信开发者工具下载安装+小程序账号申请开通(这里就不例举了,可以看同账号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创建和运行小程序项目的步骤了

 

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