微信小程序云开发、并使用npm包安装和更新

一、新建项目

打开小程序开发工具，新建一个项目，如（图一）所示。

                                                                      （图一）

二、初始化npm

初始化npm之前必须先给电脑装好node环境。每个项目只需要初始化npm一次，新建项目时初始化好后以后再安装npm包就不用初始化了。

1、先打开命令终端，右击“miniprogram”，然后点击“在终端打开”。如（图二）所示

                                              （图二）

2.在命令终端中输入npm init -y 命令即可初始化npm，如（图三）所示。初始化完成后项目中多了一个package.json的文件如（图四）所示。

                                             （图三）

                                                              （图四）

三、安装npm包（这里以安装vant-weapp为例）

1.安装npm包，在命令终端中执行npm i @vant/weapp -S --production 命令（如图五），即可安装vant-weapp，安装好后项目中新增了package-lock.json文件和node_modules目录（如图六）。

                                      （图五）            

                                                                      （图六）

2.构建npm包，点击微信开发者工具右上角详情——>本地设置，选中使用npm模块（如图七），然后点击微信开发者工具菜单栏的工具，选择构建npm（如图八），等待弹出提示构建完成时就构建完成了，构建完成后项目中多了miniprogram_npm目录（如图九）。这时即可在项目中引用vant-weapp。以后在再引入其他npm组件时也记得在终端命令安装包成功后用这个方法构建一下。

  

                            （图七）

 

               （图八）

                                                                   （图九）

四、引入npm组件（.这里以引入vant-weapp的button和dialog为例）

1.app.json文件全局引入组件，打开app.json文件，加入如下代码。引入后如图十所示

                                      （图十）

2.在用组件的页面（这里是index.wxml）加入组件代码

  
  
    
      即时通信 Demo
    
  

  
  
    
      快速新建云函数
    
  

  
  
    
      云调用
    
  
  
  vant-weapp按钮
  

3.在用组件的页面js（这里是index.js）中加入代码如下，加好代码后如图十一所示。

 

                                     （图十一）

4.加好以上代码后，打开模拟器发现vant-weapp按钮显示成功，如图十二所示。点击按钮也能弹出dialog弹框，如图十三所示。证明vant-weapp引入成功。

           

        （图十二）                                                                                                          （图十三）

五、更新vant-weapp包

1、需求：随着vant-weapp的版本跟新，小程序想继续使用vant-weapp新版本的功能，而以前安装的旧版本的vant-weapp没有这些新功能，所以需要更新版本。

2、先用npm list 命令查询现在系统安装的版本

3、再应用npm view vant-weapp versions命令查询服务器现在有的vant-weapp的版本。

4、然后用npm uninstall vant-weapp 移除现在系统安装的vant-weapp的版本。如下图所示移除成功

5、再用npm list 查询发现已经没有了vant-weapp，如下图

6、使用npm i @vant/[email protected] -S --producation命令再次安装新的指定版本的vant-weapp。安装成功如下图所示

 

7、再次用npm list 查询发现已经是最新的vant-weapp了，如下图所示

查看package.json发现已经更新成1.0.0-beta.4版本了

8、再次要勾选“使用npm模块”，然后选择“工具”——>“构建npm”，构建完成后即可在以后的程序开发中使用新版本的vant-weapp了。