微信小程序里如何使用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
组件库。
相关链接:
- WeUI组件库地址:https://github.com/wechat-miniprogram/weui-miniprogram
- WeUI组件库文档:https://developers.weixin.qq.com/miniprogram/dev/extended/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.json
、index.wxml
、index.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.wxml
、index.js
在这就不重复了,大家可以去上方链接复制粘贴,内容全部替换即可。最终效果图如下所示:
你知道的越多,不知道的就越多,欢迎关注我的微信公众号,大家一起成长
本文首发于博客园:https://www.cnblogs.com/niceyoo/p/13526766.html
- javascript 红皮高程(16)
- javascript 红皮高程(15)
- javascript 红皮高程(21)-- 乘性操作符
- javascript 红皮高程(20)-- 逻辑或
- javascript 红皮高程(19)-- 逻辑与
- 技术分享 | 浅谈 RAS
- Sniper-OJ 练习平台多题WriteUp
- 怎么能学透一个知识点
- Jarvis-OJ平台多题WriteUp分享
- 会员提问 之 JS中的私有方法有什么意义?
- 本周末的QQ群视频--还是电商网站的事
- 【译】使用Apache的mod重写来保护你的C2 Empire
- 大白话,设计一个购物车对象
- 【译】Cromos – 下载并注入代码到谷歌 Chrome 浏览器扩展中
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【奇技淫巧】-- 盛水最多的容器
- 【leetcode两题选手】MySQL类题目(八)
- 【leetcode两题选手】MySQL类题目(七)
- 【leetcode两题选手】MySQL类题目(六)
- 【leetcode两题选手】MySQL类题目(五)
- 【leetcode两题选手】MySQL类题目(四)
- 【leetcode两题选手】MySQL类题目(三)
- 【leetcode两题选手】MySQL类题目(二)
- 剑指offer(01-03)题解
- mybatis动态sql之分支选择(学习choose、when、otherwise标签)
- 前后端分离使用pagehelper
- 还在手写单表的增删改查??还不快快使用通用mapper
- mybatis动态sql之遍历集合(学习foreach标签(初探))
- mybatis动态sql之修改(学习set标签)
- mybatis文件映射之利用延迟加载解决分布查询每次查询Employee时都得查Department(四)