小程序WeUI组件库:提示页

来自CloudWiki
跳转至: 导航搜索

引入组件

通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。

可以通过npm方式下载构建,npm包名为weui-miniprogram

使用组件

引入wxss

首先要在 app.wxss 里面引入 weui.wxss,如果是通过 npm 引入,需要先构建 npm(“工具”菜单 --> “构建 npm”)

通过 useExtendedLib 扩展库 的方式引入,可省略 import 步骤

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

js

{
  "usingComponents": {
    "mp-msg": "/weui-miniprogram/msg/msg"
  }
}

wxml

<!--pages/msg_test2/index.wxml-->
<view class="page" data-weui-theme="{{theme}}">
	<view class="weui-msg">
		<view class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></view>
		<view class="weui-msg__text-area">
			<h2 class="weui-msg__title">询盘流程</h2>
			<view class="weui-msg__desc">内容详情,<a>文字链接</a></view>
			<view class="weui-msg__custom-area">
				<view class="weui-form-preview__list">
					<view class="weui-form-preview__item"><label class="weui-form-preview__label">姓名</label><view class="weui-form-preview__value">张三</view></view>
					<view class="weui-form-preview__item"><label class="weui-form-preview__label">微信号</label><view class="weui-form-preview__value">zhangsan</view></view>
					<view class="weui-form-preview__item"><label class="weui-form-preview__label">姓名</label><view class="weui-form-preview__value">张三</view></view>
					<view class="weui-form-preview__item"><label class="weui-form-preview__label">微信号</label><view class="weui-form-preview__value">zhangsan</view></view>
				</view>
			</view>
		</view>
		<view class="weui-msg__opr-area">
			<view class="weui-btn-area">
				<a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
			</view>
			
		</view>
	</view>
</view>


效果

Wexin21090701.png