前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序里如何使用npm?小程序集成友盟举例

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

原创
作者头像
niceyoo
修改2020-08-19 10:09:06
1.2K0
修改2020-08-19 10:09:06
举报
文章被收录于专栏:niceyoo

1、执行npm初始化指令

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

代码语言:txt
复制
npm init

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

2、执行安装npm包指令

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

代码语言:txt
复制
npm install umtrack-wx --save

说明截图:

执行截图如下:

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

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

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

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

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

5、引入依赖组件

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

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

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

相关链接:

执行命令:

代码语言:txt
复制
npm install weui-miniprogram --save

执行截图:

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

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

7、怎么使用WeUI组件库?

app.wxss 中全局引入 weui.css

代码语言:txt
复制
@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 文件夹下的,所以复制过来后需要修改一下路径,具体内容如下:

代码语言:txt
复制
{
  "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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、执行npm初始化指令
  • 2、执行安装npm包指令
  • 3、微信开发者工具构建npm
  • 4、勾选“使用 npm 模块”选项
  • 5、引入依赖组件
  • 6、再举个例子,引入官方WeUI组件库
  • 7、怎么使用WeUI组件库?
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档