Weapp影视评分项目开发（02）：初始化项目本篇文章介绍如何初始化一个微信小程序项目，并做好项目基础框架的搭建。你能学

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

本篇文章介绍如何初始化一个微信小程序项目，并做好项目基础框架的搭建。

你能学到

初始化微信小程序项目 在微信小程序中使用 sass git 仓库的使用

一、初始化小程序

1. 新建小程序模板

按如下图所示方式创建一个模板小程序

2. 基础设置

开启自动热更新

代码在保存时可以避免小程序重新编译，减少开发等待时间。但热更新功能并不稳定与全面，当保存却无效果或者是组件保存时，需要点“编译”按钮重新编译。

开启不校验合法域名

后续接口对接时需要不校验域名，如果是使用自己申请的小程序AppID，则把接口地址配置到小程序管理后台，不开启不校验也无关系。

删除初始化生成的项目模板文件

删除模板中 pages/index、pages/logs、utils 文件夹，并在 app.json 中将对应的 page 引入删除。

QQ截图20221126230737.png

二、设置项目目录

按以下目录格式初始化项目的结构，对于一般规模的小程序项目，扩展性足够：

├── api                              // 接口文件目录
├── components                       // 全局组件目录
├── http                             // 
│   └── index.js                     // wx.request 封装
├── images                           // 项目图片文件夹
├── mixins                           // 全局混入
├── pages                            // 项目页面
│   └── home                         // 主页
├── static                           // 静态文件
├── utils                            // 
│   └── index.js                     // 工具函数
├── app.js                           // 小程序全局逻辑
├── app.json                         // 小程序公共配置
├── app.wxss                         // 小程序公共样式表
├── config.js                        // 接口等配置
├── package.json                     // 三方包管理(安装包时自动生成)
├── project.config.json              // 小程序项目配置
├── project.private.config.json      // 私有的小程序项目配置
└── ...                              // 其它

三、开启 `sass` 支持

小程序开发者工具已经支持 .scss 文件，我们只需要在 project.config.json 文件中加入相关支持即可。useCompilerPlugins 目前支持 less、sass 与 typescript。

"setting": {
  "useCompilerPlugins": [
    "sass"
  ],
  ...
}

后续无论是通过 app.json 的 pages 数组中新增页面地址，还是在开发者工具的编辑器中右键新建 page 页，都会生成 index.scss 而非 index.wxss 文件。
主目录中 app.wxss 也支持改为 app.scss 文件。

注意：目前开发者工具不支持 app.scss 中设置变量，在其它页面或组件中直接使用。

四、app.json 设置

首先，我们生成项目的 tabBar 相关页面，本项目有如下图所示四个 tabBar，相关图标放在 /images/tabbar 文件夹下：

// app.json
{
  // 在该数组中写入路径并保存，小程序会自动创建相应目录与文件
  "pages":[
    "pages/home/index",
    "pages/category/index",
    "pages/video/index",
    "pages/profile/index"
  ],
  // 页面顶部的窗口信息，设置项目名称与背景色等
  "window": {
    "navigationBarBackgroundColor": "#e54847",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "慕影网",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark"
  },
  // tabbar 相关配置
  "tabBar": {
    "borderStyle": "black",
    "color": "#b7bac3",
    "selectedColor": "#e54847",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页",
        "iconPath": "/images/tabbar/home.png",
        "selectedIconPath": "/images/tabbar/home-active.png"
      },
      // 更多
      ...
    ]
  },
  "sitemapLocation": "sitemap.json"
}

至此，小程序初始化已完成，接下来我们将当前代码提交到远程仓库中。

五、代码提交到仓库

本次项目为方便用户访问，使用了国内仓库 gitee 。仓库的选择不是重点，主要是要了解一些 git 的基本操作。
关于 gitee 的注册与使用，过程较为简单，在此不做赘述。

初始化 git 仓库

git init

在项目下新建一个 .gitignore 文件，里面存放不需要被 git 跟踪变更的文件。我们将 project.private.config.json 文件名称写入进去，因为该文件为小程序个人的配置，多人项目中提交了会影响他人的配置。

将所有改动文件添加到暂存区

git add .

将暂存区内容添加到本地仓库中

git commit -m "初始化项目"

本地仓库关联到远程库

git remote add origin https://gitee.com/ixook/muying-weapp-study.git

拉取远程库代码与本地合并

git pull --rebase origin master

将本地仓库代码推送到远程仓库，首次执行该命令会要求输入用户名、密码进行账号校验

git push -u origin master

至此，我们已经将初始化后的小程序代码提交到了远程仓库。

之后每篇文章涉及的源码，我会按照模块创建对应的仓库分支，以方便对照阅读。

源码

本篇文章对应源码：仓库地址

问答

问：为什么不新建代码仓库 clone 到本地后再建项目？
答：开发者工具新建项目时，如果选择已经存在的文件夹，则无法选择小程序模板。
问：为什么不使用开发者工具自带的 git 仓库？
答：个人习惯，最终选择了我常用且用户较多的国内仓库。

注意

如果开发者工具中代码无故报错或者未实现预期效果，请点击 清缓存->全部清除 菜单，若还是无效，关闭开发者工具再重新打开项目。
本地设置中的调试基础库版本，请选择 2.+ 版本，过低版本较多特性不支持。

最后

本篇文章主要讲微信小程序的初始化与代码仓库的使用，其对应代码如有建议或疑问，请留言。

Weapp影视评分项目开发（02）：初始化项目

前言