1.小程序常用的前端移动框架

按钮 Button | Lin UI

Vant Weapp - 轻量、可靠的小程序 UI 组件库

 

 2.安装插件

在小程序有app.json 目录下执行：

# 执行
npm install 
 
# 这时候会有
package.json

3.修改 package.json 初始化一些参数

{
  "name": "photo",
  "version": "1.0.0",
  "description": "",
  "main": ".eslintrc.js",
  "repository": {
    "type": "git",
    "url": "http://github.com/yourname/repositoryname.git"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "dev": "nodemon"
  },
  "private": true,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vant/weapp": "^1.10.4",
    "lin-ui": "^0.9.12"
  }
}

4.修改  project.config.json

# 这个修改成 true
"packNpmManually": true,
# 这个要修改
"packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

5. 在项目底下执行

npm install

6.执行完之后使用小程序工具构建，构建后会有：miniprogram_npm

 7.小程序中使用：参考插件官网，即可，我这里举几个简单的。

        1.在json中引入

2.在wxml中使用，UI官网写的怎么使用写的很详细。

--------------------

遇到的问题（按照我上面的步骤基本不会出现下面的情况）

1.

message： 没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内，或配置 project.config.json 的 packNpmManually 和 packNpmRelationList 进行构建

2.

message：发生错误 Error: E:\project\qz-xcx\photo\miniprogram\ 未找到