慕尚花坊小程序开发---day1

在第一天的的工作里，我分别完成了项目的创建与初始化，自定义构建npm+集成Scss。

一.项目的创建与初始化

1.创建项目

首先打开微信开发者工具，在进去的页面左侧找到小程序项目，因为我们的项目类型为小程序，所以选择【小程序】。

点击之后，右侧出现【+】，点击它开始创建项目。最后在弹出的页面里，需要我们出入项目的相关信息。

项目名称看个人选择，目录选择你容易记住的位置，AppID输入自己的 ，开发模式选择小程序，后端服务我们选择不使用云服务

模板选择JS-基础模板，最后点击确定就可以了。

2.项目初始化

完成项目创建之后，它会有一些基本的内容，这些内容有些予我们项目不相关，无用，所以我们需要进行项目初始化。

首先找到app.js，将App({})里面的代码全部删除。

删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。

重置 app.wxss 中的代码。

删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。

删除 components 中的⾃定义组件。

重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。

更新 utils 下 util.js 的⽂件名为 formatTime.js。

二.自定义构建npm+集成Sass

在之后的工作里，随着项目的功能越来越多、项目越来越复杂，文件目录也变的很繁琐，为了方便进行项目的开发，开发人员通常会对目录结构进行调整优化，在慕尚花坊项目中， 我们就需要将小程序源码放到 miniprogram 目录下。

1.自定义构建

首先在project.config.json 配置 miniprogramRoot 选项，指定小程序源码的目录。

1 "miniprogramRoot": "miniprogram/"

然后配置 project.config.json 的 setting.packNpmManually 为 true。  

1 "setting": {
2 "packNpmManually":true,
3 ...
4 },

初始化项目

在终端里输入以下代码

1 npm init -y
2
3 //⽣成package.json⽂件

最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置。

1 "setting": {
2 "packNpmManually":true,
3 "packNpmRelationList": [
4 {
5 "packageJsonPath": "./package.json",
6 "miniprogramNpmDistDir": "./miniprogram"
7 }
8 ],
9 },
10
11 // packageJsonPath 表示 node_modules 源对应的 package.json
12 // miniprogramNpmDistDir 表示 node_modules 的构建结果⽬标位置

安装 vant ，然后进行 npm 构建 ，测试是否能够正常 vant 构建成功。

1 npm i @vant/weapp

“⼯具”-“构建npm”。

2.集成Sass

在 project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开 启⼯具内置的 sass 编译插件。

1 "setting": {
2 "packNpmManually": true,
3 "packNpmRelationList": [
4 {
5 "packageJsonPath": "./package.json",
6 "miniprogramNpmDistDir": "./miniprogram"
7 }
8 ],
9 "useCompilerPlugins":[
10 "sass"
11 ],
12 ...
13 },

更改wxss后缀名为sass，关闭并重新打开项目。

通过第一天的学习与开发，我学习了采用小程序内置组件，结合Vant组件库实现页面结构的搭建。

与以往不同此次使用的是css拓展语言Scss绘制页面的结构。

在本次的开发当中，我最大的感受就是开发变得简便了，代码的书写效率变得更高了，使用组件大大方便了开发。很多东西不用自己想，有现成的直接使用。