首页 > 微信 > 详细

微信小程序使用npm包步骤

时间:2019-08-31 16:12:07      阅读:76      评论:0      收藏:0      [点我收藏+]

这里以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包步骤

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

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!