weui 使用教程及问题解决方法

灰太狼 2023-06-12 09:46 5阅读 0赞

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。  
  
WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。  
  
**使用**  
  
方法一：  
使用bower进行安装

> bower install --save weui

方法二：  
使用npm进行安装

> npm install --save weui

**开发**

> git clone [https://github.com/weui/weui.git][https_github.com_weui_weui.git]  
> cd weui  
> npm install -g gulp  
> npm install  
> gulp -ws

运行gulp -ws命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开[http://localhost:8080/example][http_localhost_8080_example]。

**手机预览**  
  
请用微信扫码

[![weui-demo.png][]][weui-demo.png 1]

[http://demo.weui.org.cn/example/][http_demo.weui.org.cn_example]

注意:

如果你的node.js版本为10以上，在执行 gulp -ws 的时候可能会出现这个错误：

primordials is not defined

所以通过nvm降低node.js版本，

nvm下载地址：[https://github.com/coreybutler/nvm-windows/releases][https_github.com_coreybutler_nvm-windows_releases]

这个为安装版

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw_size_16_color_FFFFFF_t_70][]

下载之后安装nvm

nvm安装之后还需要配置两个环境变量(NVM\_HOME,NVM\_SYMLINK) 。安装包应该会自动写入环境变量，可以忽略.

安装完成后打开命令栏, 输入 nvm version命令， 如果成功打印版本号，说明你已经安装成功了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw_size_16_color_FFFFFF_t_70 1][]

nvm list 查看你的node版本列表，带\*号为你当前选中版本

![201911121202331.png][]

nvm list availabe 查看可下载的node版本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw_size_16_color_FFFFFF_t_70 2][]

nvm install 10.15.0 下载你想要的版本

![20191112120359922.png][]

nvm use 10.15.0  切换版本

[https_github.com_weui_weui.git]: https://github.com/weui/weui.git
[http_localhost_8080_example]: http://localhost:8080/example
[weui-demo.png]: https://imgconvert.csdnimg.cn/aHR0cDovL3dldWkub3JnLmNuL3VwbG9hZHMvYXJ0aWNsZS8yMDE2MDMyOS8zNDE3ZjEwMDg2ZGQzMWUzZTRiZjE2NzQ2ZGNkZDc1ZS5wbmc?x-oss-process=image/format,png
[weui-demo.png 1]: http://weui.org.cn/uploads/article/20160329/3417f10086dd31e3e4bf16746dcdd75e.png
[http_demo.weui.org.cn_example]: http://demo.weui.org.cn/example/
[https_github.com_coreybutler_nvm-windows_releases]: https://github.com/coreybutler/nvm-windows/releases
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191112115715689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191112115643502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw==,size_16,color_FFFFFF,t_70
[201911121202331.png]: https://img-blog.csdnimg.cn/201911121202331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191112120334909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcnNvbjA3Mw==,size_16,color_FFFFFF,t_70
[20191112120359922.png]: https://img-blog.csdnimg.cn/20191112120359922.png