1、打开根目录

npm init
npm install weui-miniprogram --save

2、打开project.config.json

  设置

    "packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],

  miniprogramNpmDistDir 为 node_modules 根目录

3、选择【工具】-【构建npm】

4、打开app.json

  添加

  "useExtendedLib": {
"weui":true
},
"usingComponents": {
"mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon"
},

  mp-icon 可选择添加在各页面的usingComponents

添加weui-miniprogram的更多相关文章

  1. 微信小程序使用weui构建搜索栏(searchbar)+导航(navbar)

    首先需要在lib目录中添加weui.wxss.searchbar和navbar结合主要解决两者的层次问题,即搜索框输入时,下方的检索结果能够覆盖住navbar.下面就开始发码啦: (1)wxml部分: ...

  2. 微信公众号菜单添加小程序,miniprogram,pagepath参数详解,php开发公众号

    随着微信小程序功能的开发, 已经可以跟公众号打通了, 主要有两种方式: 1) 在公众号文章中插入小程序 2) 在公众号菜单中添加小程序 第一种方式, 子恒老师在前面的课程已经详细介绍过, 今天来讲第二 ...

  3. jquery weui日期选择控件添加取消按钮

    如图: 上图是jQuery weui的时间选择控件,红框处本来应该有个“取消”按钮的,可惜偏偏没有,当用户不想选择的时候就不好处理,虽然插件提供了点击其他区域关闭的功能,但过于隐晦,不容易发现,因此本 ...

  4. weui 图片弹框

    添加图片与弹出效果对比: HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  5. weui 搜索框

    点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...

  6. weui tabbar 切换

    Html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  7. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  8. TODO:小程序集成WeUI

    TODO:小程序集成WeUI WeUI 为微信 Web 服务量身设计.WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一. ...

  9. 巧用weui.gallery(),点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  10. vue+weui+FormData+XMLHttpRequest 实现图片上传功能

    首先是样式:https://weui.io/#uploader 在weui示例中可以看到是用以下方法进行选择图片 <input id="uploaderInput" clas ...

随机推荐

  1. 什么是Auth模块?(全面了解)

    目录 一:Auth模块 1.什么是Auth模块? 2.Auth模块作用 二:引入Auth模块 1.其实我们在创建好一个Django项目之后直接执行数据库迁移命令会自动生成很多表 2.django在启动 ...

  2. 使用 SmartIDE 开发golang项目

    目录 概述 架构 开发视图 快速开始 安装 SmartIDE CLI 环境 启动 创建环境 安装工具 调试 基本调试 Start 命令调试 很荣幸在去年加入到 SmartIDE 产品组,从事开发工作, ...

  3. 精华推荐 | 【深入浅出RocketMQ原理及实战】「性能原理挖掘系列」透彻剖析贯穿RocketMQ的事务性消息的底层原理并在分析其实际开发场景

    什么是事务消息 事务消息(Transactional Message)是指应用本地事务和发送消息操作可以被定义到全局事务中,要么同时成功,要么同时失败.RocketMQ的事务消息提供类似 X/Open ...

  4. vuex的使用详解

    一.下载vuex 在store文件夹下的index.js中    官方文档:https://vuex.vuejs.org/zh/ 需要使用的页面 sotre中 mutations的调用方法 store ...

  5. Cryptohack的Adrien's Signs解题思路

    题目如下: 输出的结果: 题目分析: 在原题的题目描述中并没有什么有用的消息,更多的信息是通过代码审计出来的.大致意思是,先把字节flag转换为二进制形式的字符串,然后判断字符串中每个字符,如果为1, ...

  6. 可持久化栈学习笔记 | 题解 P6182 [USACO10OPEN]Time Travel S

    简要题意 你需要维护一个栈,有 \(n\) 个操作,支持: 给定一个 \(x\),将 \(x\) 加入栈. 将一个元素出栈. 给定一个 \(x\),将当前栈回退到 第 \(x\) 操作前. 每一次操作 ...

  7. 【Redis实战专题】「性能监控系列」全方位探索Redis的性能监控以及优化指南

    Redis基本简介 Redis是一个开源(BSD 许可).内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合等数据类型.内置复制.Lua 脚本. ...

  8. 将IoTdb注册为Windows服务

    昨天写的文章<Windows Server上部署IoTdb 集群>,Windows下的InfluxDB是控制台程序,打开窗口后,很容易被别人给关掉,因此考虑做成Windows服务,nssm ...

  9. three.js一步一步来--如何画出一个转动的正方体

    基础知识--正方体代码如下 <template> <div style="width:1000px; height:800px"> <h1>正方 ...

  10. Java入门与进阶 P-2.1+P-2.2

    比较运算符 关系运算符(relational operators)也可以称为"比较运算符",用于用来比较判断两个变量或常量的大小.关系运算符是二元运算符,运算结果是 boolean ...