小程序使用npm以及常用的移动端UI插件

简介: 小程序使用npm以及常用的移动端UI插件

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

按钮 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\ 未找到

相关文章
|
20天前
|
人工智能 小程序
一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
29天前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
12天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
24 2
|
2月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
286 60
|
18天前
|
小程序 开发者 UED
支付宝小程序UI/UX设计原则与最佳实践
支付宝小程序UI/UX设计原则与最佳实践
38 6
|
21天前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
34 0
|
25天前
|
JSON 文字识别 小程序
微信小程序OCR插件,实现身份证、行驶证、银行卡、营业执照和驾驶证等识别
微信小程序OCR插件,实现身份证、行驶证、银行卡、营业执照和驾驶证等识别
148 0
|
3月前
|
资源调度 JavaScript 索引
Vue2开发插件并发布到npm
这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个下拉框组件`vue-amazing-selector`,并将其发布到npm,包括了项目的创建、组件开发、配置webpack、编写组件代码、导出组件、编译、npm包初始化、发布流程以及在项目中使用该插件的完整步骤。
Vue2开发插件并发布到npm
|
4月前
|
小程序
通用的职位招聘小程序ui模板
通用的职位招聘小程序ui模板
39 5
通用的职位招聘小程序ui模板
|
3月前
|
小程序 UED 开发者
揭秘支付宝小程序成功之道:UI/UX设计原则与用户体验优化秘籍大公开!
【8月更文挑战第27天】支付宝小程序在移动互联网中扮演着重要角色,优秀的UI/UX设计能显著提升用户满意度。本文首先强调了设计的一致性、简洁性、易用性和响应性原则,确保用户获得顺畅体验。接着,介绍了最佳实践,包括利用支付宝设计组件库保持界面统一、优化加载速度、适应多设备显示、设置清晰导航以及重视用户反馈。最后,提供了一个简单示例展示如何应用支付宝设计组件。遵循这些指导原则,开发者能够构建既美观又实用的小程序。
74 0

推荐镜像

更多