专栏首页niceyoo微信小程序里如何使用npm?小程序集成友盟举例
原创

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

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 在这就不重复了,大家可以去上方链接复制粘贴,内容全部替换即可。最终效果图如下所示:

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

本文首发于博客园:https://www.cnblogs.com/niceyoo/p/13526766.html

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uniapp添加网站favicon文件 - niceyoo

    uniapp 默认创建的项目并没有给我们提供加上网站 favicon 的 ”机会”,但其实官方已经给出解决方法了,使用的是 自定义模板

    niceyoo
  • SpringBoot如何切换Redis默认库

    我们清楚,Redis 尽管提供了 16 个索引库,但是每个数据库之间是隔离互不共享的,客户端默认连接使用的是 0 号数据库 。

    niceyoo
  • 基于Docker搭建Gitlab代码存储

    关于Docker搭建Gitlab,在19年时就已经在博客发过文章了,今天重新回顾一下。

    niceyoo
  • 交互式网页应用的网页开发技术Ajax简单介绍

    Ajax(Asynchronous JavaScript and XML的缩写):一种创建交互式网页应用的网页开发技术。包含下列技术: 基于XHTML+CSS的...

    SmileNicky
  • Oracle 数据字典(可用它动态获取字段名、长度、类型等)

    ORACLE数据字典 表名:USER_TAB_COLUMNS TABLE_NAME                           表、视图或聚簇名 ...

    hbbliyong
  • 一个女程序员职场自述:彻骨的孤独

    美国《赫芬顿邮报》(The Huffington Post)网站刚刚登载了一名女程序员的文章。该文章讲述了她作为女程序员在职场生活中所感受到的孤独,并分析了这种...

    哲洛不闹
  • 一个女程序员职场自述:彻骨的孤独

    美国《赫芬顿邮报》(The Huffington Post)网站刚刚登载了一名女程序员的文章。该文章讲述了她作为女程序员在职场生活中所感受到的孤独,并分析了这种...

    用户1667431
  • 预测差异表达基因集的转录调控子的工具-Lisa

    刘小乐老师课题组发布了一个用于预测差异表达或共表达基因集的转录调控子的工具Lisa 文章为:《Lisa: inferring transcriptional ...

    生信编程日常
  • Android蓝牙库FastBle的基础入门使用

    最近在做物联网课设,过程中需要用到Android的蓝牙API,奈何原生的蓝牙API使用有点麻烦。于是上网搜索看有没有好用的Android蓝牙库,然后发现了这个宝...

    砸漏
  • 你所不知道的Python迭代器

    迭代就是循环的意思,也就是对一个集合中的元素进行循环,从而得到每一个元素。对于我们自定义的类,也可以让其支持迭代,这就是本文要介绍的特殊成员方法__iter__...

    蒙娜丽宁

扫码关注云+社区

领取腾讯云代金券