微信 + weui 框架记录

时间：2023-01-23 15:45:22

　　WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一；

　　包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素；

　　一、扩展

　　　  操作文档手册：

　　　　　 weui https://github.com/Tencent/weui/wiki

　　　　　 weui.js https://github.com/Tencent/weui.js/blob/master/docs/README.md

　　　　weui也提供了一套视觉标准供参考 weui-design ;

　　　　另外有为小程序(weui-wxss)、企业微信 扩展；

　　　　针对于微信内页面也有轻量级JS封装 weui.js ，操作DOM更容易；但不适用于微信小程序，因为不支持DOM操作；

　　　　https://weui.io/weui.js/

　PS：让小程序支持组件化开发可以用 wepy

　它类似于VUE的开发方式，支持自定义组件、props传值、插槽slot等等。

　　二、vue结合

　　　　同VUE使用时 同样需要用脚手架安装依赖包，import引入组件/main.js中）

　　　　1.安装依赖包

npm install weui.js weui -S

　　　　2.main.js中 引入组件和样式，注入到VUE原型链中

import Vue from 'vue'

import weui from 'weui.js'

import 'weui'

Vue.prototype.$weui = weui

　　　　3.项目中使用组件（例如dialog）

this.$weui.dialog({

  title: '提示',

  content: '是否领取礼品' ,

  buttons: [{

    label: '取消',

    type: 'default',

    onClick: () => {

      alert('您已取消领取礼品！')

    }

  }, {

    label: '确定',

    type: 'primary',

    onClick: () => {

      alert('您已确定领取礼品！')

    }

  }]

})

　　三、weui

　　　　获取方式：

来源 地址
微信官方 //res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css
BootCdn //cdn.bootcss.com/weui/0.4.3/style/weui.css
cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css

　　
　　　　　　

　

　　　　　　

　　　　　　npm方式：npm install --save weui

　　　　　　github--release中直接下载版本包

　　　　使用说明:

      • ActionSheet 用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
<div id="actionSheet_wrap">

    <div class="weui-mask_transparent actionsheet__mask" id="mask"></div>

    <div class="weui-actionsheet" id="weui-actionsheet">

        <div class="weui-actionsheet__menu">

            <div class="weui-actionsheet__cell">示例菜单</div>

            <div class="weui-actionsheet__cell">示例菜单</div>

            <div class="weui-actionsheet__cell">示例菜单</div>

            <div class="weui-actionsheet__cell">示例菜单</div>

        </div>

        <div class="weui-actionsheet__action">

            <div class="weui-actionsheet__cell" id="actionsheet_cancel">取消</div>

        </div>

    </div>

    <div class="weui-skin_android" id="weui-android-actionsheet" style="display: none">

        <div class="weui-mask"></div>

        <div class="weui-actionsheet">

            <div class="weui-actionsheet__menu">

                <div class="weui-actionsheet__cell">示例菜单</div>

                <div class="weui-actionsheet__cell">示例菜单</div>

                <div class="weui-actionsheet__cell">示例菜单</div>

            </div>

        </div>

    </div>

</div>
      • button按钮
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
      • 剩余的可以看下操作文档，一看就会~~~~

相关文章