微信 + weui 框架記錄

　　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>

• • • 剩余的可以看下操作文檔，一看就會~~~~