Uni-APP之微信小程序01-初始化项目

柔光的暖阳◎ 2023-05-28 05:05 7阅读 0赞

> 前言： 如果你是第一次上手UNi-app时你可以在新建时选择一些模板，这样在做项目的时候就可以参考模板中的代码，这样更容易上手

![在这里插入图片描述][20200904142721683.png_pic_center]  
（**点开新建时会出现很多的模板 都可以新建一遍并都查看下，做实际项目有可能会用到一些类似的地方就可以参考**了）

在上手Uni-app时，请先完整的看一遍[官方文档][Link 1]

uni-app设置默认页面就是将pages.json路由写在最前面

*  打开HBuilderX新建一个uni-app项目（自定义项目名称和路径，一定要要选中uni-app）  
    （[官方教程][Link 2]）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]  
    \-熟悉文件结构，方便文件的编写  
    （这个图是在hbuilderX中创建出来的目录结构）  
    ![在这里插入图片描述][20200327151443959.png]  
    （[这是官方的目录结构][Link 3]）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]  
    以上两张图的比较可以看出自己创建的项目相比官方的项目结构图要少一些文件，那么我们可以自己手动的添加一些需要文件夹，没必要全部照搬，只需要新建一些我们在实际项目用的文件夹即可。  
    以我需要的项目为例，我就自己新建了  
    **components**文件夹用来存放公共可复用的组件；  
    **common**文件夹用来存放公共的CSS,SCSS,LESS等公共样式文件和一些公共JS文件  
    **stroe**文件夹类似vue的vuex公共厂库（以后会有一篇专门的文章记录如何使用store厂库）  
    **wxcomponents**这个是用用到vant-ui中的按钮所以在官方案例中复制过来的

这样大致的基础部分就弄好了，一定要明白每个文件夹的用处和意义这样才方便以后西项目的开展（[指路官方文档][Link 3]）

*  **配置manifest.json的参数**  
    ![在这里插入图片描述][20200818144618200.png_pic_center]  
    **配置appid很重要**：[在微信公众平台里][Link 4]获取APPid  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70_pic_center]

微信开发者工具里的appid也要保持一致  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70_pic_center 1]

*  按照以上两个步骤其实一个初始化项目就可以运行了，运行快捷键选中要运行的文件目录然后Ctrl+r  
    （自己截图不能截菜单项就去官方偷图啦）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]
 *  点击Ctrl+r就会跳出相对相应的运行菜单，如果之前没有配置微信小程序的运行的话，点击运行不会成功运行的，**需要配置微信开发者工具**
    
    1.找到hbuilderx的菜单栏选中工具项然后点击设置 就会弹出一个页面然后选中运行配置再选到小程序运行配置然后将你安装好的[微信小程序开发工具][Link 5]  
    的安装路径复制到微信开发者工具路径这个配置选项下  
    **工具→设置 →运行配置 →小程序运行配置 →微信开发者工具路径**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]  
    2.打开微信开发工具-–>设置—>安全—>开启服务端口（微信开发者工具最新版）  
    3.以上配置好后就可以Ctrl+r快捷运行了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 4]

[20200904142721683.png_pic_center]: /images/20230528/c6d3c2907b1c4329b367fc004168b9ca.png
[Link 1]: https://uniapp.dcloud.io/
[Link 2]: https://uniapp.dcloud.io/quickstart?id=%E5%88%9B%E5%BB%BAuni-app
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20230528/ce8363e1926b480697f41a7409d8a9b3.png
[20200327151443959.png]: /images/20230528/f7710c0a004c4606864930015e14ec17.png
[Link 3]: https://uniapp.dcloud.io/frame?id=%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20230528/264a75fc4faf4d499c05f9752618ad8b.png
[20200818144618200.png_pic_center]: /images/20230528/47a42c953b364b25bb1b7dcfc3f917d6.png
[Link 4]: https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1732455314&lang=zh_CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/3e150743ce5c44b8a6c49e8ee93e9653.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/fc20bd965dab4ba88118d4a052a6a925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20230528/31fccbaf0e3441ada60a529882c96533.png
[Link 5]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]: /images/20230528/34858ef4e2ce489894f804c8dcf50b68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 4]: /images/20230528/22fb72f342a849b5b34e7bfbcb994a6b.png