微信小程序WeUI通过npm方式下载构建方法及示例

最新推荐文章于 2021-01-30 17:40:59 发布
最新推荐文章于 2021-01-30 17:40:59 发布
阅读量564 收藏 1
点赞数 1
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/princess_Wuyou/article/details/110544378
版权

WeUI组件库

更新微信开发者工具 (因为更新后的开发者工具有自带的终端，会使npm构建方法变得简单)

1）在微信开发者工具终端输入 npm init 然后一直回车
2）回车完毕后输入 npm install weui-miniprogram 然后等待安装

安装成功后在微信开发者工具的上面点击工具下面的构建npm然后等待一会会弹出一个弹框显示构建成功，用了多少毫秒。这样就算构建成功

接下来点击右上角详情→本地设置选择使用npm模块
在这里插入图片描述

接下来开始使用

首先在app.wxss中导入WeUI样式

（ps:如果没有动过新增的文件或文件夹路径应该跟我是一致的）
在这里插入图片描述
接下来在app.json中配置（我这里引用的是搜索组件）
在这里插入图片描述
然后在相应的页面中调用此组件的
在这里插入图片描述
在js中调用组件页面的方法

在这里插入图片描述
这样就算结束（谢谢观看，撒花撒花）

Princess_Wuyou
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序-weUI组件库
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-09 6455
微信小程序的开发过程中，常常会出现很多重复性的功能翻来覆去地使用，那么直接用一套封装好的组件库，就能大大提升开发速度。 微信小程序的UI组件库有很多，可以参考下面这个内容： 微信小程序UI组件库合集 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13但是很多组件库不稳定，天知道什么时候会停止维护和更新，所以这款weUI组...
weui的项目代码及使用示例
02-15
本代码根据http://bbs.html51.com/f-36-1/的源码整理分享给大家。更多资源请自己进论坛下载。
weUI框架在github下载地址
yijiupingfan0914的博客
09-25 6249
1.公众号样式UI库的下载地址： https://github.com/Tencent/weui 2.微信小程序UI库的下载地址：https://github.com/Tencent/weui-wxss/ 3.微信小程序的官方实例Demo: https://github.com/wechat-miniprogram/miniprogram-demo 4.下载小程序官方示例：（同第3项效果一样...
小程序学习笔记-WeUi组件引用（2）
键指江湖的博客
09-25 1566
小程序WeUi组件引用 1.引入组件 可以通过npm方式下载构建，npm包名为weui-miniprogram 也可以通过页面按需下载。官方下载地址https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html 解压后添加到自己的项目中 首先要在app.wxss里面引入weui.wxss @import '....
weui-miniprogram:小程序WeUI组件库
04-27
WeUI组件库简介 这是一套基于样式库开发的小程序扩展组件库，同微信原生视觉体验一致的扩展组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。 如何使用 详细使用参考 开发 初始化 npm run init 执行命令： npm run dev 默认会在包根目录下生成 miniprogram_dev 目录，src 中的源代码会被构建并生成到 miniprogram_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令： npm run watch 生成的 miniprogram_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。 其他命令 清空 miniprogram_dist 目录： npm run clean 清空 miniprogam_dev 目录： npm ru
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
01-20
在构建微信小程序时，开发者可以选择不同的技术和框架来提高开发效率和优化用户体验。本文将详细介绍如何使用mpvue、mpvue-weui以及fly.js这三个组件来搭建一个微信小程序。 首先，mpvue是一个基于Vue.js的小程序...
微信小程序-微信小程序框架的Vue版本
08-05
vwx 项目依赖 vue vue-router weui.js weui axios iscroll lodash swiper 使用webpack打包 安装 Npm npm install --save vwx 项目使用 Require the script: import { App } from "vwx";...运行示例 npm run exp
WeUI在WePY中的使用示例
08-10
WeUI和WePY都是在微信生态中非常重要的开发工具，它们分别关注于界面设计和框架构建。本示例主要展示了如何在WePY框架中集成和使用WeUI，以创建与微信原生体验一致的用户界面。 WeUI是微信官方设计团队为微信内网页...
VUWE是一款基于微信WeUI所开发的专用于Vue2的组件库
08-10
VUWE是一个专门为Vue2框架设计的组件库，它的核心理念是将微信WeUI的设计风格与Vue2的强大功能相结合，为开发者提供一套简洁、高效且易于使用的组件集合。WeUI是微信官方推出的一套遵循微信原生视觉体验的前端框架，...
wepy-weui-demo:在wepy中导入weui
05-13
Wepy是微信小程序开发的一个强大框架，而WeUI则是专为微信小程序设计的一套符合微信视觉规范的UI组件库。 【描述】提到的"import weui in wepy"是指将WeUI的组件和样式引入到Wepy项目中的过程。这通常涉及到安装...
WeUI 最新版 js 及 css 下载
05-16
使用 <!-- head 中 --> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> <!-- body 最后 --> [removed][removed] [removed][removed] <!-- 如果使用了某些拓展插件还需要额外的JS --> [removed][removed] [removed][removed]
微信小程序 npm weui包
09-26
微信小程序使用npm安装腾讯weui包 分步骤完成安装，并在微信开发工具中设置NPM。
WeUI目前最新示例代码
03-21
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。 WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。 含有大量示例Demo，简单容易上手
npm引入小程序官方WeUI组件库weui-miniprogram
一只小菜鸟的博客
09-04 2万+
1、在小程序根目录内，初始化npm npm init 2、执行命令安装 npm 包： npm install --save weui-miniprogram 3、安装完成后，在微信开发者工具中的菜单栏：工具 ------ 构建 npm ： 4、在微信开发者工具中的右上角：详情 ------ 本地设置， 勾选“使用 npm 模块”选项： 5、点击文档中的组件示例代码，开始ctrl C + ...
微信小程序引入官方扩展 weui-miniprogram时的问题
qq_39400546的博客
08-24 7117
引语 在写微信小程序时，想用官方的weui-miniprogram包里面的msg扩展，使用时npm完以后，网上基本都是复制weui.wxss到根目录，再用view容器标签实现，可是这样就不能灵活调用组件了 也和官方推荐代码不符 <!--WXML示例代码--> <mp-msg type="success" title="操作成功"> <view slot="d...
微信小程序使用npm引入weui-miniprogram
爱吃鱼的ねこ的博客
01-30 2466
下载安装nodejs nodejs官方下载地址 直接下载左面的LTS版本即可 命令行输入 npm -v 看看是否安装成功，如果没有，请执行下面的操作手动添加路径 安装好后找到node.exe，然后复制路径 高级系统设置里，系统属性》高级》环境变量。找到path，然后编辑-》新建，将刚才的路径粘贴上去就ok了。 安装好如下： 使用npm安装第三方包 跳转到项目所在的根目录下（例如我的演示项目是manage,那么命令行到达manage就ok了） PS:如果是第一次在微信小程序里使用npm,是没
小程序（二）使用npm安装weui
camellia的博客
09-26 1143
作为一个不专业的前端，在开发前端的时候我喜欢用一些UI库。HTML页面一般习惯用bootstarp，layui等。VUE项目一般习惯用iview，elementui等。 小程序自然也不例外，我这里使用的是官方推荐的weui组件库，但是如何将其引入项目，这是一个很值得深思的问题。 最终我还是选择了VUE一样的管理方式，使用npm。 Vue的脚手架默认就是支持npm的。但是小程序需要你手动安装。 当然，这部分官方文档是有介绍的，想看官方文档的同学，请移步《npm支持》 写这篇博客的原因就是，官方文档我看不懂，反
小程序：npm下载使用weiui
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
12-12 751
下载 npm install weui-miniprogram --save 下载完之后，在微信开发者工具点击 工具 -> 构建npm 配置 在 app.json 中修改 usingComponents 字段： "usingComponents": { // 自定义组件 "v-order": "components/order/order", "v-score": "compo...
WeUI for 小程序--使用教程
热门推荐
程诺
06-21 8万+
weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
微信小程序 weui 编写单选投票
最新发布
03-31
以下是一个简单的微信小程序 weui 实现单选投票的代码示例： 1. 在 app.json 文件中添加页面路径： ``` { "pages": [ "pages/index/index", "pages/vote/vote" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" } } ``` 2. 在 index 页面中添加一个跳转到投票页面的按钮： ``` <view class="container"> <button class="weui-btn" bindtap="goToVote">去投票</button> </view> ``` 3. 在 index 页面的 js 文件中添加 goToVote 函数： ``` Page({ goToVote: function() { wx.navigateTo({ url: '/pages/vote/vote' }) } }) ``` 4. 在 vote 页面中添加一个 radio-group 和若干 radio 控件： ``` <view class="container"> <form bindsubmit="submitVote"> <view class="weui-cells weui-cells_radio"> <label class="weui-cell weui-check__label" for="option1"> <view class="weui-cell__bd">选项1</view> <view class="weui-cell__ft"> <radio class="weui-check" name="options" value="option1" checked="true"></radio> </view> </label> <label class="weui-cell weui-check__label" for="option2"> <view class="weui-cell__bd">选项2</view> <view class="weui-cell__ft"> <radio class="weui-check" name="options" value="option2"></radio> </view> </label> <label class="weui-cell weui-check__label" for="option3"> <view class="weui-cell__bd">选项3</view> <view class="weui-cell__ft"> <radio class="weui-check" name="options" value="option3"></radio> </view> </label> </view> <button class="weui-btn weui-btn_primary" form-type="submit">投票</button> </form> </view> ``` 5. 在 vote 页面的 js 文件中添加 submitVote 函数： ``` Page({ submitVote: function(e) { var option = e.detail.value.options; wx.showModal({ title: '投票结果', content: '您选择了' + option, showCancel: false }) } }) ``` 这样就完成了一个简单的单选投票的微信小程序 weui 实现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值