小程序使用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\ 未找到

相关文章
|
9天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
55 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
13天前
|
开发者
移动端UI名词 - AxureMost
该文档介绍了多种UI组件的分类和功能,包括按钮、图标、宫格等基础组件,头像、徽标、轮播图等数据展示类组件,复选框、日期选择器、输入框等数据输入类组件,以及对话框、加载、消息通知等反馈类组件。此外,还涵盖了下拉菜单、导航栏、分页器等导航类组件。每个组件都有具体的应用场景和作用,帮助开发者快速构建界面。
|
4月前
|
人工智能 小程序
【一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
4天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
89 7
|
2月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
3月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
188 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
77 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
45 0
|
4月前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
5月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
376 60

热门文章

最新文章

推荐镜像

更多