1.创建项目：
在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。
然后在右侧点击 [+] 开始新建项⽬。
最后在弹
出的界⾯中输⼊项⽬相关的信息，点击确定即可。
二、自定义构建 npm + 集成Scss
为了方便进行项目的开发，开发人员通常会对目录结构进行调整优化，在这个项目中， 我们就需要将小程序源码放到 miniprogram 目录下
1.3自定义构建
⾸先在project.config.json 配置 miniprogramRoot 选项，指定⼩程序源码的⽬录
然后配置 project.config.json 的 setting.packNpmManually 为 true。
安装 vant ，然后进⾏ npm 构建，测试是否能够正常 vant 构建成功。
1.4：项⽬技术栈
1. ⼩程序内置组件：采⽤⼩程序内置组件，结合 Vant 组件库实现⻚⾯结构的搭建。
2. 项⽬中使⽤了 css 拓展语⾔ Scss 绘制⻚⾯的结构。
3. ⼩程序内置 API ：交互、⽀付、⽂件上传、地图定位、⽹络请求、预览图⽚、本地存储等。
4. ⼩程序分包加载：降低⼩程序的启动时间、包的体积，提升⽤户体验度。
5. ⼩程序组件开发：将⻚⾯内的功能模块抽象成⾃定义组件，实现代码的复⽤。
6. ⽹络请求封装：request ⽅法封装、快捷⽅式封装、响应拦截器、请求拦截器。
7. ⻣架屏组件：利⽤开发者⼯具提供了⾃动⽣成⻣架屏代码的能⼒，提⾼了整体使⽤体验和⽤户满意
度。
8. UI 组件库：使⽤ Vant 组件库实现⼩程序 结构的绘制。
9. LBS ：使⽤腾讯地图服务进⾏ LBS 逆地址解析，实现选择收货地址功能。
10. miniprogram-licia ：使⽤ licia 进⾏函数的防抖节流。
11. async-validator ：使⽤ async-validator 实现表单验证。
12. miniprogram-computed : 使⽤ miniprogram-computed 进⾏计算属性功能。
13. mobx-miniprogram ：使⽤ mobx-miniprogram 进⾏项⽬状态的管理。
1.5：构建项⽬⻚⾯
a：assets⽂件导⼊
b：配置app.json⽂件
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/cart/cart",
"pages/my/my"
],
"window": {
"navigationBarTitleText": "慕尚花坊",
"navigationBarBackgroundColor": "#f3514f",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#252933",
"selectedColor": "#FF734C",
"backgroundColor": "#ffffff",
"borderStyle":"black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/tabbar/index.png",
"selectedIconPath": "assets/tabbar/index-active.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "assets/tabbar/cate.png",
"selectedIconPath": "assets/tabbar/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "assets/tabbar/cart.png",
"selectedIconPath": "assets/tabbar/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "assets/tabbar/my.png",
"selectedIconPath": "assets/tabbar/my-active.png"
}
]
},
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "require
