niceyoo博客 niceyoo博客

微信小程序里如何使用npm?小程序集成友盟举例

in 微信开发 文章转载请注明来源!

1、执行npm初始化指令

小程序根目录,命令执行如下指令:

npm init

执行后会让加载项目初始信息,具体截图如下:

2、执行安装npm包指令

在这我们举个例子,以接入友盟统计SDK为例,执行命令如下:

npm install umtrack-wx --save

说明截图:

执行截图如下:

3、微信开发者工具构建npm

点击微信开发者工具中的菜单栏:工具 --> 构建 npm

点击构建之后,项目会自动帮我们进行构建,然后会多出一个miniprogram_npm文件夹:

4、勾选“使用 npm 模块”选项

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

5、引入依赖组件

如上步骤,构建完成我们就可以使用我们的npm包了,我们继续按照友盟的提示,在app.js引入:

6、再举个例子,引入官方WeUI组件库

上边友盟的例子确实过于简单,相信大家在使用npm大部分场景是使用UI库,那么我们通过npm方式引入WeUI组件库。

相关链接:

执行命令:

npm install weui-miniprogram --save

执行截图:

微信开发者工具 > 菜单栏 > 工具 > 构建npm

执行构建npm后,项目中 minoprogram_npm 包下就可以看到 WeUI 了。

7、怎么使用WeUI组件库?

app.wxss 中全局引入 weui.css

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

实例截图:

接下来我们以一个Form表单样式为例:

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html

如图所示我们分别复制到 index.jsonindex.wxmlindex.js 中:

在这我额外说一下 index.json,因为我们的 weui 路径是在 miniprogram_npm 文件夹下的,所以复制过来后需要修改一下路径,具体内容如下:

{
  "component": true,
  "usingComponents": {
    "mp-toptips": "../../miniprogram_npm/weui-miniprogram/toptips/toptips",
    "mp-cells": "../../miniprogram_npm/weui-miniprogram/cells/cells",
    "mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell",
    "mp-checkbox": "../../miniprogram_npm/weui-miniprogram/checkbox/checkbox",
    "mp-checkbox-group": "../../miniprogram_npm/weui-miniprogram/checkbox-group/checkbox-group",
    "mp-form": "../../miniprogram_npm/weui-miniprogram/form/form"
  }
}

index.wxmlindex.js 在这就不重复了,大家可以去上方链接复制粘贴,内容全部替换即可。最终效果图如下所示:

你知道的越多,不知道的就越多,欢迎关注我的微信公众号,大家一起成长

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:http://sscai.club/index.php/archives/127/ (转载时请注明本文出处及文章链接)

npm小程序npm
发表新评论
前篇 后篇
雷姆
拉姆