1. 前言
小程序一直没写过什么文章,主要是因为小程序比较简单,没有什么大问题,但是可能对于自学能力不强的人,尤其基本不看官网,第一反应是百度找文章的人来说,还是有点难度的,今天开始写点文章吧
2. 为什么需要依赖
- 目前主流应该是原生小程序开发,因为小程序已经自带了非常丰富的组件,还有非常丰富的API,
- 总有些场景自己写比较麻烦,需要第三方依赖的,反正你可以会使用第三方依赖,但工作中不用,也没啥影响,多学点
3. package.json
- 安装依赖肯定需要
package.json
配置文件,但是小程序是不自带的,所以需要自己安装- 可以在小程序根目录下,比如app.js文件 右键,选择,在内建终端中打开
- 在打开的终端中 执行
npm init -y
指令初始化 一个
package.json
文件
- 安装你所需要的依赖 比如
npm i @vant/weapp -S --production
4. 修改配置文件 project.config.json
这个文件在根目录下,存着项目的配置
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
- packNpmManually
true
启用 npm- 由于目前新版开发者工具创建的小程序目录文件结构问题,
npm
构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm
的文件名,所以新版本的miniprogramNpmDistDir配置为"./"
即可- 旧版改为
"./miniprogram/"
5. 开发工具配置
5.1 最右侧详情菜单
- 详情>>>本地配置>>>勾选使用npm
- 这步新版的开发工具 不需要了,如果没有这个选项就不需要了 1.png
5.2 左侧工具菜单
1.工具>>>构建npm
2. `.png
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
- 模板只有布局/
wxml
和样式文件/wxss
,没有json
文件- 所以使用第三方组件的时候,在引用这个模板的界面 的
json
文件配置就行
8. 全局配置
- 比较常用的vant组件,在每个组件都配置的话,比较麻烦
- 所以可以在
app.json
里面进行统一配置,单个页面就不需要在配置了- 直接配置 和
window
同级
"window":{},
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-button": "@vant/weapp/button/index",
"van-icon": "@vant/weapp/icon/index"
}
网友评论