亿速云网站：如何处理微信小程序开发工具？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

亿速云网站：如何处理微信小程序开发工具？

本文介绍了《微信小程序如何使用扩展组件库WeUI》的相关知识。 在实际案例操作过程中，很多人都会遇到这样的困境。 接下来就让小编带领大家学习如何处理这些情况吧！ 我希望你能仔细阅读并学到一些东西！

1.学习参考

2.初始化

如果这里没有安装，请自行安装。

确保它在那里。 在小程序项目根目录下执行以下命令并回车即可完成安装。

npm init

执行后会在项目根目录下看到.json文件

3.安装WeUI组件库

在项目根目录下执行以下命令：

npm install --save weui-miniprogram --production

根目录下会出现一个目录

4.配置 4.1 构建npm

打开微信小程序开发工具，点击顶部菜单【工具】-【构建npm】。 构建完成后，会在项目根目录下生成一个文件夹亿速云网站：如何处理微信小程序开发工具？，如下图：

4.2 支持npm

点击小程序开发工具右上角的【详情】-【本地设置】，勾选【使用npm模块】。 这里有一个坑，需要注意。 请记住选择*新的基准库。

5.项目使用WeUI

将样式文件引入小程序根目录app.wxss（按照自己的路径引入）

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

将需要的组件引入到所需页面的json文件中微信小程序开发组件库，例如：

"usingComponents": {
    "mp-form_page": "/miniprogram_npm/weui-miniprogram/form/form_page"
  }

可以在对应的wxml页面中使用，例如：

	
		
			表单结构
			展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。
		
		
			
				表单组标题
				
					
						微信号
						
							
						
					
					
						
                            昵称
                        
						
							
						
					
					
						
                            联系电话
                        
						
							
						
					
				
			
		
		
			确定
		
	

《如何使用微信小程序扩展组件库WeUI》的介绍就到此结束。 感谢您的阅读。 如果您想了解更多行业资讯，可以关注易速云网站。 小编将会为大家输出更多优质实用文章！

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等