微信小程序使用npm包步骤

这里以npm引入小程序官方UI组件库weui-miniprogram为例

1.在小程序根目录内,初始化npm(官方文档上是没写出这一步,这里做个补充)

npm init

2.在小程序中执行命令安装 npm 包(这里使用了weui-miniprogram):

npm install --save weui-miniprogram

3.在微信开发者工具中的菜单栏:工具 --> 构建 npm (这里记得先安装 npm 包,即步骤2):


完成构建后可以在目录树里看到了miniprogram_npm以及里面的weui-miniprogram组件文件夹

4.在微信开发者工具中的菜单栏:工具 --> 项目详情, 勾选“使用 npm 模块”选项:

5.使用组件库

最近的ui组件库新增了官方的自定义导航,这个方便了很多,再也不用自己动手做,以index页面为例
index.wxml里引入组件:

<!--WXML示例代码-->
<mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="自定义导航" back="{{true}}"></mp-navigation-bar>

index.json配置

{
  "usingComponents": {
    "mp-navigation-bar": "/miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
  },
  "navigationStyle": "custom"
}

app.wxss引入全局样式

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';


这个自定义导航包括了很多用法,隐藏标题只保留胶囊按钮、自定义返回页面数等等

还有其他好用的组件

6.使用其他npm 包方法

js 中引入 npm 包

const myPackage = require('packageName')
const packageOther = require('packageName/other')

json配置

{
  "usingComponents": {
    "myPackage": "packageName",
    "package-other": "packageName/other"
  }
}

原文地址:https://www.cnblogs.com/grs9505/p/11438117.html

时间: 2024-10-30 18:09:17

微信小程序使用npm包步骤的相关文章

图解微信小程序---调用API操作步骤

图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节. 通俗的讲API就是接口,就是通道,负责一个程序和其他软件的沟通,本质是预先定义的函数. API通常是以Http的形式提供,它隐藏的含义就是,只要你符合我定义的标准,你就可以来使用我. 注册账号 填写注册信息 登陆 管

微信小程序使用npm安装包

小程序现在支持直接通过npm安装包了,点击这里了解更多. 记录一下我自己的安装步骤及安装过程中遇到的一些问题.希望能够帮助到正在阅读此篇文章的你~ 我就直接通过在项目根目录安装miniprogram-datepicker做演示了. 1.在项目根目录下面新建文件夹:node_modules. 2.终端进入到node_modules文件夹所在的目录 (注意不是node_modules文件夹里面),在此例中就是根目录了. 执行: cnpm i miniprogram-datepicker -S --p

微信小程序-分包 -每包2M

限制在2M以内.如果超过2M,可以通过分包加载实现,在app.json中配置即可, 小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个分包.每个使用分包小程序必定含有一个主包.所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本:而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再

微信小程序使用第三方包

1.初始化项目 npm init 2.安装依赖包( 以vant webapp 为例 ) npm i vant-weapp -S --production 3.微信开发者工具配置 1.打开 详情 -- 选中 使用npm模板2.左上角 -- 工具 -- 构建npm ( 之后会提示 完成构建 ) 4.问题 若出现这种错误 VM6419:5 ./miniprogram_npm/[email protected]@vant-weapp/action-sheet/index.wxml ../wxs/util

原生微信小程序脚手架(支持npm)

微信小程序支持npm 为了支持生态扩展,社区贡献者可以提供更加丰富的功能,已经支持了第三方小程序开发功能,见如下地址. 微信小程序支持npm https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包. 此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能.如若之前未

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

使用gulp构建微信小程序工作流

前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生工具的条条框框,把近些日子学的东西都拿出来熬一熬. 已有的一个小程序项目使用了github上一个使用webpack.babel.sass开发的小程序脚手架(wxapp-boilerplate),我需要在不变动原有项目代码的基础上,使用gulp来重构项目的工作流. 使用体验:使用vscode配合各种插

微信开发(2)---微信小程序开发实战part1

微信开发现在来说,简单可以概括为两部分,微信公众号和微信小程序. 微信公众号的技术已经非常成熟.分为服务号和订阅号.简单的.可以弄一个个人订阅号,在编辑模式下就可以实现推送图文.自动回复.自定义菜单的常用功能.切换至开发模式,可以搭服务器,使用php语言及各种成熟接口完成自己想要实现的功能,相对而言非常方便.大家对公众号感兴趣的可以自己去注册个个人订阅号探索一下,微信公众平台跳转: https://mp.weixin.qq.com/ 再来说微信小程序,16年初上线示例,到现在技术已经基本趋于成熟

微信小程序学习 动手撸一个校园网小程序

动手撸一个校园网微信小程序 高考完毕,想必广大学子和家长们都在忙着查询各所高校的信息,刚好上手微信小程序,当练手也当为自己的学校做点宣传,便当即撸了一个校园网微信小程序. 效果预览 源码地址:Github??求你的小星星- 准备工作 微信小程序开发者工具:腾讯开放了小程序个人开发平台,只需要一个微信号就可以成为小程序开发者了. 微信小程序设计指南:由于小程序是一个平台,所以平台上的开发者必须要遵守规范. ?easy-mock:使用easy-mock模拟后端数据,后面会简单介绍配置. 七牛云:使用