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" }
- 前面的组件名,可以自己起名字,使用 时候保持一致就行
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文件配置就行
