微信小程序开发项目_小程序项目

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": "requiredComponents",

"usingComponents": {
  "van-button": "@vant/weapp/button/index",

  "van-card": "@vant/weapp/card/index",

  "van-submit-bar": "@vant/weapp/submit-bar/index"

}

}

常见的CSS单位：
1. px (pixels)：像素单位，是相对于屏幕上的单个像素点的长度单位。

2. % (percentage)：百分比单位，相对于父元素的特定属性的值进行计算。例如，width: 50% 表示元素宽度为父元素宽度的50%。

3. em：相对于父元素的字体大小的单位。1em 等于父元素的字体大小。

4. rem：相对于根元素（html元素）的字体大小的单位。1rem 等于根元素的字体大小。

5. vw (viewport width)：相对于视窗宽度的百分比单位。1vw 等于视窗宽度的1%。

6. vh (viewport height)：相对于视窗高度的百分比单位。1vh 等于视窗高度的1%。

7. vmin：相对于视窗宽度和高度中较小值的百分比单位。

8. vmax：相对于视窗宽度和高度中较大值的百分比单位。

9. pt (points)：打印单位，相对于 1/72 英寸。

元素定位：
 static:静态定位，(默认定位方式)

1、效果
在盒子模型中，可以用定位的手段达到修改边界的效果，更准确来说，可以达到在父子类元素、浏览器中随意定位的效果

2、特点
不同于修改边界、浮动，定位手段仅仅影响当前元素，而不会排挤其它元素

3、开启方式
（1）在元素中打开position，默认值为static，没有定位效果，而其他值才有定位效果

（2）坐标修改值有top、right、bottom、left，通常对位元素只用其一，例如left和right，因为二维坐标轴只需要两个坐标就够了

一、相对定位（relative）

1、特点
（1）开启后不设置偏移量所有元素不会发生改变

（2）不会超出文档流

（3）不会影响元素性质（块元素、行内元素仍保持属性）

（4）层级会升高（会覆盖以前的元素）

2、定位原理
（1）概念

-相对元素（需要移动的元素）

-参照物（理解中的坐标原点）

（2）定位标准

-相对原文档流中原本的坐标进行移动（通常默认为原定元素的左上角）

二、绝对定位（absolute）
1、特点
（1）超脱文档流

（2）如果不设置偏移量，则不设置偏移量的“元素位置”不会发生改变（意思就是，在绝对定位中，位置是不会变化的，但其它元素会受影响，上面是原因）

（3）层级提升

（4）元素性质会被改变（因为超脱了文本流）

2、定位标准

绝对定位元素是根据其“包含块”进行定位的

3、包含块（containing block）
（1）常规情况

-离当前元素最近的祖先块元素

（2）绝对定位情况

-离当前绝对定位元素最近的开启定位的祖先元素

-如果最近的都没有开启定位，则以根元素作为定位标准

（3）根元素（html，初始包含块）