慕尚花坊小程序开发
在第一天的的工作里，我分别完成了项目的创建与初始化，自定义构建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绘制页面的结构。
在本次的开发当中，我最大的感受就是开发变得简便了，代码的书写效率变得更高了，使用组件大大方便了开发。很多东西不用自己想，有现成的直接使用。
相关知识
【鲜花速递小程序鲜花店鲜花预定配送婚庆花坊花屋鲜花配送小程序
鲜花小程序开发制作
鲜花小程序定制开发
线上花店小程序开发
香港尚禮坊GGB
花店小程序商城开发
香港尚礼坊GGB
重庆鲜花配送商城小程序开发怎么做?
「慕尚生态园林景观设计实习招聘信息」
网购鲜花平台鲜花配送平台商城系统App公众号小程序开发
网址: 慕尚花坊小程序开发 https://m.huajiangbk.com/newsview491803.html
| 上一篇: 转：江浙沪地区养花入门和品种选择 |
下一篇: 慕尚花坊 |
