小程序教程——Vant

1st.注意，小程序的包名不能是中文，所以当文件名是中文时不能使用-y 需要使用npm init 回车后自己手动输入包名

通过 npm 安装npm i @vant/weapp -S --production

通过 yarn 安装yarn add @vant/weapp --production

安装 0.x 版本npm i vant-weapp -S --production

将 app.json 中的 "style": "v2" 去除，小程序的 新版基础组件 强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

删除app.json 中的 "style": "v2"

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

"packNpmManually": true,

        "packNpmRelationList": [

            {

                "packageJsonPath": "./package.json",

                "miniprogramNpmDistDir": "./"

              }

        ],

修改project.config.json

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

打开微信开发者工具，点击 工具 ->构建 npm ，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

勾选 使用 npm 模块t

    当以上项目都完成之后，只需在.json文件中加入的"usingComponents"对象中注册需要使用的模块，即可在页面中使用

usingComponents中注册模块

附：Vant Weapp官网

介绍 - Vant Weapp (gitee.io)

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

打开微信开发者工具，点击  工具 ->构建 npm ，并勾选  使用 npm 模块  选项，构建完成后，

到 全局配置 app.json 中注册引入组件，详见 快速上手 。

支持default、primary、info、warning、danger五种类型，默认为default。  格式：

通过plain属性将按钮设置为朴素按钮

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

通过loading属性来设置加载按钮   loading-type="spinner"   loading-text="加载中..."

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

label     输入框左侧文本

type    可设置为任意原生类型, 如 number   idcard    textarea    digit

readonly  是否只读

custom-style    自定义样式

autosize    是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px

show :是否显示 

onClose 点击其他位置，关闭d出层

position            可以设置为top、bottom、left、right。

Picker 选择器 需要配合d出层使用

<van-picker columns="{{ columns }}" bind:change="onChange" />

columns 对象数组，配置每一列显示的数据

onChange（e）    有默认参数 e 

value-key    选项对象中，文字对应的 key 通常用于对象数组

show-toolbar    是否显示顶部栏

defaultIndex     初始选中项的索引，默认为 0  不是双向绑定 需要自己改变defaultIndex  的值  需要渲染两次

原文链接：https://www.jb51.net/article/167545.htm

原文链接：https://blog.csdn.net/ShiXinXin_Harbour/article/details/102568389

原文链接：https://youzan.github.io/vant-weapp/#/quickstart

原文链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

1、在根目录中，打开终端命令，cd到你的项目miniprogram目录下；

2、npm 初始化，如果你的小程序项目没有安装过npm包的话，你需要先初始化npm，

      npm init

3、# 通过 npm 安装

        npm i @vant/weapp -S --production

4、

5、修改该配置项

构建npm时，会在node_modules的同级目录中创建一个miniprogram_npm；miniprogram_npm包才是小程序真正使用的npm包；

原理介绍

为了帮助大家更好的理解发布 npm 包中提到的各种要求，这里简单介绍一下原理：

首先 node_modules 目录不会参与编译、上传和打包中，所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程，在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。

构建打包分为两种：小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中；其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程（类似 webpack）。

寻找 npm 包的过程和 npm 的实现类似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况，构建之前的结构：

---