imwty

专注大前端Web应用开发实践

0%

uni-app开发小程序系列--项目搭建

发表于
很多新手在使用uniapp进行微信小程序开发时都会在搭建项目阶段就面临各种问题，本篇博客便是新手小白都能快速上手的项目搭建流程

搭建步骤

1. 安装HBuilder编辑器

HBuilder是uni-app官方团队专门定制的编辑器，它对Vue做了大量优化投入，且支持uni-app官方库Api的智能提示和推断，同时，我们也可以在通过编辑器快速的创建各种场景下的项目模板，总之HBuilder是用uni-app进行应用开发的首选编辑器，可以访问其官网进行下载安装，点击如下链接可直接跳转：
Hbuilder官方下载地址

2. 初始化项目

安装好HBuilder后，打开编辑器，点击左上角菜单“文件”->”新建”，选择“项目”，即可进入初始化项目的设置界面，界面大概如下：
image.png

  1. 选择项目类型：按默认选uni-app就行了，其他几种类型基本上和做小程序都无关，我们不用关心；
  2. 填写项目名称：建议用英文命名（当然非要用中文应该也不是不可以）；
  3. 选择项目所在路径：建议选一个自己经常记得清楚的目录，免得日后找项目所在位置麻烦；
  4. 选择模板：uniapp提供了很多针对不同场景的示例模板，新手的话，建议默认模板就好了，内容少一点，我们可以慢慢加减功能；
  5. Vue版本选择：都2023年了，当然选择Vue3了，毕竟Vue3是兼容Vue2的；
  6. 启用UniCloud：这个是Uniapp集成的云开发，新手可以不开启；
  7. 上传代码到托管平台：也就是将项目源码进行git托管，这里也可以不用选择，需要托管的话，我们可以后续再自己选择。

配置完后，点击确定，项目就生成好了，可以看到生成的项目目录如下：
image.png
最核心的目录pages内，可以看到只有一个页面index, 那么怎么运行呢？因为我们是要开发一个微信小程序，而微信小程序官方是有提供一个开发和调试工具的，所以如果需要让项目跑起来，我们还得安装一下这个微信开发者工具。

3. 安装并配置微信开发者工具

微信官方提供的小程序开发文档中有提供微信开发者工具的下载地址，点击如下链接可直接跳转：
微信开发者工具下载地址
选择一个对应自己操作系统的版本安装就好了。
image.png
安装好后，打开软件左上角菜单中的设置，选择安全设置
image.png
然后把服务端口设为开启状态。
image.png开启服务端口是便于HBuilder能自动帮我们打开微信开发者工具的，很多新手也会卡在这一步，发现运行项目的时候没有反应，其实就是因为这里的服务端口未开启。

4.启动项目

微信开发者工具配置好后，我们切会HBuilder，选择左上角菜单区的“运行”->”运行到小程序模拟器”->”微信开发者工具”。或者直接点下边的运行图标，选择微信开发者工具。点击后等一会，微信开发者工具就会自动被打开且加载我们的项目。
image.png
注意：第一次运行时由于会安装一些依赖文件，会提示让我们重新运行。这时重新点击一次就可以了。正常启动后，控制台显示大致如下：
image.png
微信开发者工具中，也能看到这个模板项目的界面模样:
image.png
我们可以尝试找到pages/index/index.vue文件，将data中的title设置为“Hello World”。编辑好后保存，再切回微信开发者工具，可以看到页面也会进行热更新的变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello World'
      }
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

HBuilder配置

修改缩进长度

为了更加的方便开发，我们可以对HBuilder做一些让开发体验更好的设置。笔者喜欢2个空格的缩进，HBuilder默认是四个空格的。我们可以在左上方菜单中找到“偏好设置”->“常用设置”，再找到制表符长度，将4设置为2。
image.png

保存时自动格式化代码

HBuilder自带了代码风格的格式化功能，默认未开启保存时自动格式化。我们可以在“偏好设置”->“编辑器配置”中找到「保存时自动格式化」，勾选上
image.png

设置大括号保存不换行

笔者试图将Script中代码修改为Vue3的setup写法，如下：
image.png
可以看到，缩进配置和保存后自动格式化都已经生效了，但是导入ref的那行代码，大括号自动换行了。这是因为HBuilder内的代码格式化插件jsbeautify默认设置的效果。我们可以修改它来让他保存不换行。
我们可以在“偏好设置”->“插件配置”中找到「打开文件jsbeautifyrc.js」，点击打开，然后找到brace_style属性，把值改为"brace_style": "collapse,preserve-inline"
image.png
然后保存回到原页面，将大括号的缩进去掉再保存，可以发现自动格式化就不会让大括号再换行了。
image.png
接下来，我们即可舒舒服服的编写代码啦！

关于笔者

计算机专业科班出身，8年+Web开发经验，多年深耕Vue2,Vue3技术栈。全栈开发经验丰富，技能树覆盖从前端工程搭建到部署上线全链路流程。紧跟技术潮流，一直关注着各种新兴技术趋势并积极进行实践探索，追求优雅的开发体验，极致的开发效率，高标准的开发质量。可提供前端简历修改，面试指导，前端新人开发指导，前端收徒，协助完成开发任务等服务。

联系我：imwty2023（微信）