微信小程序使用npm包步骤

2019-08-31 12:00:39 阅读：333 来源： 互联网

标签：npm 自定义微信 packageName miniprogram weui 步骤组件

这里以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"
  }
}

标签：npm,自定义,微信,packageName,miniprogram,weui,步骤,组件
来源： https://www.cnblogs.com/grs9505/p/11438117.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9