首页 > 其他分享 >weui

weui

时间:2024-10-31 23:22:17浏览次数:4  
标签:npm miniprogram weui 文件夹 组件 wxss

2. 执行 npm init 创建package.json (不想一个一个配置也可以执行npm init -y)

3. npm安装WeUi,执行cnpm install --save weui-miniprogram

4. 然后点击工具选择构建npm

在这里插入图片描述

5. 然后会提示完成构建,目录会多了一个文件夹,这个文件夹放的就是我们要用的组件和css样式

在这里插入图片描述

6. 使用

在全局css文件app.wxss导入WeUI的样式,这样全部page可以用到了

@import ‘/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss’;

在这里插入图片描述

使用组件了,我用index来示范,在index.json写入组件名和路径,(注意路径不可以多些一个空格,末尾也不可以多写一个逗号,会报错)

“mp-checkbox”: “…/…/miniprogram_npm/weui-miniprogram/checkbox/checkbox”

在这里插入图片描述

checkbox就是我用来演示的单选框组件,要用其他组件的话打开miniprogram_npm文件夹下的weui-miniprogram文件夹,然后里边就是官方已有的组件,要用改一下名字和地址名就ojbk了。

在这里插入图片描述

然后在index.wxml中使用组件

效果:

结束!!!

方法二:下载导入方式


1.下载weui

进入GitHub https://github.com/weui/weui-wxss/进入如下页面,点击红色框选下载程序代码

在这里插入图片描述

解压后进入文件夹,图示路径下的weui.wxss就是我们所需要的weui库

在这里插入图片描述

2.引入weui

标签:npm,miniprogram,weui,文件夹,组件,wxss
From: https://www.cnblogs.com/clark1990/p/18519136

相关文章

  • 新闻列表页:通过WEUI框架实战我深入理解了块级作用域与点击事件
    前言今天简单的使用WEUI进行了新闻列表页的开发。在实现JS中发现了许多有趣的事情。今天就打算写一个文章给遇到了同样问题的同学进行解惑。话不多说,开始发车。以下是我要实现的效果内容,大家可以看看内容比较。代码我贴在文章末尾:框架分为以下两点:Nav导航栏搜索栏Nav导......
  • 微信小程序weui库表单提交 rules校验用法
    在开发微信小程序时候,一定会遇到表单提交问题。表单提交会遇到各种校验问题。微信小程序官方文档上面form是不带有校验功能的。如果要用需要自己手动校验。但是在weui中是有表单校验功能的,今天就来记录一下表单校验如何使用微信开放文档: https://developers.weixin.qq.com/min......
  • 放弃weui的使用
    想使用WeUI开发小程序页面,因为毕竟是小程序内推荐符合微信UI规范的UI框架嘛。但实际使用并不理想。首先是使用useExtendLib引入weui,到真机上运行时却显示不出来。其次,在搜索这个问题的解决办法时,发现个人开发者不能使用WeUI。最后,WeUI的文档实在不友好,示例都没有,得自己试出来......
  • 微信公众号开发C#系列-12、微信前端开发利器:WeUI
    本文目录1、前言2、WeUI基本介绍2.1WeUI概述2.2为什么选择jQueryWeUI3、jQueryWeUI基本用法4、其他基础组件展示4.1、switch开关4.2、文本框搜索组件4.3、正在加载、暂无更多、查看更多效果4.4、图片全屏预览5、微信开发系列文章列表参考文章1、前言通过前面系列文章的学习与......
  • weui的使用方法
    WEUI的使用方法;交互以及屏蔽或者修改深色浅色模式随笔一记,weui的使用方法,以防之后使用浪费时间对于减轻工作量还是有帮助的;所以记了下来;节省以后的时间1.引入通过CDN的方式引入;交互效果也是需要引入的,下面再记<!--引入WeUICDN链接--><linkrel\="st......
  • 微信小程序:如何weui.wxss中的icon?
    使用步骤:1、在app.json中设置"useExtendedLib":{"weui":true},2、icon代码<text>1</text><viewclass="weui-icon-circle"></view><viewclass......
  • weui的模板
    <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><!--viewport是自动适配手机屏幕的大小的--><metaname="viewport"content="width=device......
  • WeUI的使用
    1)预览WeUI样式1、下载完成后解压缩后应该是如图界面2、打开微信开发者工具–>导入项目–>选择类似目录–>点击测试号–>导入3、等待完全加载完成后,4、到此为止,我们......
  • WeUI+的使用
    WeUI+是以Zepto1.2和WeUI2.0为基础,收集整理了上百个组件开发而成,兼容IOS和Android平台,主要用于微信/手机网站开发。即是说只要使用了较新版的jq和weui,即可使用里面的组件......