1. 前言

小程序一直没写过什么文章,主要是因为小程序比较简单,没有什么大问题,但是可能对于自学能力不强的人,尤其基本不看官网,第一反应是百度找文章的人来说,还是有点难度的,今天开始写点文章吧

2. 为什么需要依赖

1.目前主流应该是原生小程序开发,因为小程序已经自带了非常丰富的组件,还有非常丰富的API,

2.总有些场景自己写比较麻烦,需要第三方依赖的,反正你可以会使用第三方依赖,但工作中不用,也没啥影响,多学点

3. package.json

1.安装依赖肯定需要package.json配置文件,但是小程序是不自带的,所以需要自己安装

2.可以在小程序根目录下,比如app.js文件 右键,选择,在内建终端中打开

3.在打开的终端中 执行

npm init  -y

指令初始化 一个 package.json文件

4.安装你所需要的依赖 比如

npm i @vant/weapp -S --production

4.修改配置文件 project.config.json

这个文件在根目录下,存着项目的配置

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

1.packNpmManually true 启用 npm

2.由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为"./"即可

3.旧版改为 "./miniprogram/"

5. 开发工具配置

5.1 最右侧详情菜单

1.详情>>>本地配置>>>勾选使用npm

2.步骤图

5.2 左侧工具菜单

1.工具>>>构建npm

2.

6. 需要使用界面/组件在json文件配置

6.1配置

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

1. 前面的组件名,可以自己起名字,使用 时候保持一致就行

6.2 使用

<van-rate value="{{ listData.rating }}" 
             allow-half void-icon="star"
              void-color="#eee"
               color="#ffd21e" />
 <yzs-button type="{{list.isCollect  ?  'primary' :'danger'}}" 
            data-test="yzs" data-shop="{{list}}"
            data-index="{{idx}}" 
           catchtap="collectFn" size="small" >
                       收藏"}}
  </yzs-button>

7. template

1.模板只有布局/wxml和样式文件/wxss,没有json文件

2.所以使用第三方组件的时候,在引用这个模板的界面 的json文件配置就行