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

前言

官网（搭建指南）：https://uniapp.dcloud.io/quickstart-cli

在上手开发小程序之前，先去uni-app官网浏览下，熟悉下官网。然后重点来了，阅读大佬的文章，可以少走很多弯路，传送门：uni-app小程序手把手项目实战
源码：https://github.com/zengxiaozeng/hello-uni-app

一、使用 cli 命令行创建 uni-app 项目：

打开 git 命令行工具：
全局安装vue-cli：npm install -g @vue/cli

1、创建项目：执行命令：项目名称是 longjiang-task-management
vue create -p dcloudio/uni-preset-vue longjiang-task-management
2、选择默认模板（直接回车）

3、项目搭建成功后，进入项目目录： cd my-project-template

4、执行命令：npm run dev:mp-weixin

5、打开微信开发者工具：
(1) 点击 “ 导入 ”

(2) 将项目的 dist 文件夹下的 dev --> mp-weixin 文件夹导入

(3) 填写小程序的 AppId

即可进入页面：

二、默认模板目录结构

.
├─ node_modules/                  # 库文件
├─ public/                        # 公用工具库文件
├─ src/                           # uni-app组件目录
│  ├─ pages/                      # 业务页面文件存放的目录
│  │  ├─ index
│  │  │  ├─ index.vue             # 页面组件
│  ├─ static/                     # 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│  ├─ App.vue                     # 应用配置，用来配置App全局样式以及监听
│  ├─ main.js                     # Vue初始化入口文件
│  ├─ manifest.json               # 配置应用名称、appid、logo、版本等打包信息
│  ├─ pages.json                  #
│  ├─ uni.scss                    # 内置的sass变量，可以直接使用
├─ .gitignore                     #
├─ babel.config.js                #
├─ package.json                   # 配置页面路由、导航条、选项卡等页面类信息
├─ package.jsonpostcss.config.js  #
├─ README.md                      #
├─ tsconfig.json                  #
├─ yarn.lock                      #

三、创建项目开发目录及分包

1、uniapp目录变量命名开发规范：
https://blog.csdn.net/weixin_44575130/article/details/116738675

2、uni-app项目生命周期及组件API：
https://blog.csdn.net/weixin_43602502/article/details/121629274

3、注意：由于uni-app的插件使用的都是sass，我还是去换用了sass，不然使用插件的时候还是会报错

uniapp 引入全局 sass 预处理器：
参考：https://www.jianshu.com/p/a3ccd0ab0b65
注意：依赖安装在 dependencies 还是 devDependencies 文件目录下

深入理解package.json中dependencies和devDependencies 的区别：

现在很多前端框架项目中都需要使用到依赖，但是安装依赖的时候到底应该使用  --save或-S（简写）   还是  --save-dev或-D（简写） 呢，所以需要对dependencies和devDependencies 有清楚的认识。dependencies：生产和开发都会用到的依赖，最后会被打包到项目中。eg：npm i jquery -S
devDependencies ：只在开发环境中使用的依赖，最后不会被打包到项目中。eg：npm i webpack -D知道了这两者的定义，那么到底什么时候用哪种呢？下面给出具体说明：如果这个依赖从开发到上线（生产）都需要使用，那么就使用--save或-S，例如，jquery、vue、axios、html2canvas等
如果这个依赖只是开发的时候要用，上线之后就不需要了，就可以使用--save-dev或-D，这样做有利于减小项目体积。例如开发项目中要用到的webpack及其插件，各种加载器如url-loader、sass-loader，各种babel转译插件如babel-core ......。这些依赖只是开发时候用到的工具，生产环境下就不需要了

步骤：
安装：
（1） 首先安装node-sass，因为sass-loader依赖于它。npm install node-sass --save-dev
此时报错：

这个错误的出现是因为 sas s安装时获取源的问题，修改 sass 安装的源。
解决办法：使用 taobao 的 npm：
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
回车后，再输入npm install node-sass --save-dev

（2） 安装sass-loader
npm install sass-loader --save-dev

出现报错：

解决方法：
打开 package.json 文件 → 找到 “sass-loader”，修改版本（例如改为 "sass-loader": "^9.0.2", ）保存文件，然后 npm install 安装对应版本。

此时项目运行起来，还是报错：
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
原因： Node Sass7.0.1版本与^4.0.0不兼容
解决方法：
卸载 node-sass： npm uninstall node-sass --save-dev
安装 sass： npm i -D sass

（3） 修改style标签，声明使用sass，单个页面使用

<style lang="scss" scoped></style>

（4） 如果需要在App.vue全局引入sass，需要补上lang="scss"标签

<style lang="scss">@import "./common/base.scss";
</style>

到这里，本来是可以正常使用 sass 的时候，但是在实际开发中在微信小程序开发工具中看的时候，总是显示 Node Sass7.0.1版本与^4.0.0不兼容 报错，一会儿正常一会儿报错，此时返回去看 package.json ：

sass和 sass-loader 安装在 devDependencies 中，神操作来了，，，我将其全部卸载，在 dependencies 中写入对应的版本，用上了 less。。。。。npm install 之后就可以正常使用了。

4、安装 moment 插件（专门针对日期格式转换的插件）

安装 npm install moment
引入：在 main.js 中写下这段代码

import moment from "moment";
Vue.prototype.$moment = moment;

在页面中的应用：

this.$moment(this.createTime).format("YYYY-MM-DD");

备注： moment.js 文档：https://itbilu.com/nodejs/npm/VkCir3rge.html

5、注意： uniapp的样式，sass使用，全局样式，字体的使用

1. rpx 即响应式px，一种 根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准， 750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。比如如果你想设定宽度是屏幕的一半的话，宽度要设置为375rpx。2. 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束3. 支持基本常用的选择器class、 id、 element等4. 在uni-app中不能使用*选择器。5. page 相当于| body 节点6. 定义在App.vue中的样式为全局样式，作用于每一一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。7. uni-app |支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点:字体文件小于40kb， uni-app 会自动将其转化为base64格式;字体文件大于等于40kb， 需开发者自己转换，否则使用将不生效;字体文件的引用路径推荐使用以~@开头的绝对路径。@font-face {font-family: test1- icon;src: url('~@/static/iconfont.ttf');}● 使用scss或者less等工具需要再菜单栏的 工具- 插件安装 中下载