第一周笔记（补）

序：在项目设计中我们需要用到的技术堆栈：

⼩程序内置组件：采⽤⼩程序内置组件，结合 Vant 组件库实现⻚⾯结构的搭建。

项⽬中使⽤了 css 拓展语⾔ Scss 绘制⻚⾯的结构。

⼩程序内置 API ：交互、⽀付、⽂件上传、地图定位、⽹络请求、预览图⽚、本地存储等。

⼩程序分包加载：降低⼩程序的启动时间、包的体积，提升⽤户体验度。

⼩程序组件开发：将⻚⾯内的功能模块抽象成⾃定义组件，实现代码的复⽤。

⽹络请求封装：request ⽅法封装、快捷⽅式封装、响应拦截器、请求拦截器。

⻣架屏组件：利⽤开发者⼯具提供了⾃动⽣成⻣架屏代码的能⼒，提⾼了整体使⽤体验和⽤户满意

度。

1.项目创建：

        打开微信开发者工具，选择小程序并点击+开始选择模板

        选择不使用微信云开发并选择JS基础模板来创建微信小程序的基础模板

2.相关文件处理

        首先重置app.js中的代码，删除 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。

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

在project.config.json中配置miniprogramRoot:

"miniprogramRoot": "miniprogram/"

然后配置project.config.json:

"setting": {
     "packNpmManually":true,
     ...
   },

右键project.config.json点击在内建终端中打开

在终端中输入：

npm init -y

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

代码如下：

"setting": {
"packNpmManually":true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
],
},
// packageJsonPath 表示 node_modules 源对应的 package.json
 // miniprogramNpmDistDir 表示 node_modules 的构建结果⽬标位置

安装 vant ，然后进⾏ npm 构建 ，输入代码测试是否能够正常 vant 构建成功：

npm i @vant/weapp

4.设置集成Sass

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

"setting": {
      "packNpmManually":  true,
       "packNpmRelationList":   [
           {
                "packageJsonPath": "./package.json",
                 "miniprogramNpmDistDir": "./miniprogram"
            }
         ],

         "useCompilerPlugins":  [

                "sass"

          ],

          ...
},

 而后将更改wxss后缀名为sass文件