微信 + weui 框架记录

Posted 2021-02-16 Roséa

　　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>

• • • 剩余的可以看下操作文档，一看就会~~~~