initial

yuhongyang12315 · Nov 10, 2016 · bcf5d93 · bcf5d93
commit bcf5d93
Show file tree

Hide file tree

Showing 254 changed files with 6,840 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+*swp
+*~
+.idea
+node_modules
+npm-debug.log
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+#### v0.1.0 (2016-11-10)
+
+初始发布
+
+- Initial release
diff --git a/DIFF.md b/DIFF.md
@@ -0,0 +1,109 @@
+# 和WeUI的用法差异
+
+### 不支持相邻兄弟选择器 -> `after` someone
+
+#### 如：`.weui-cells__title + .weui-cells` -> `.weui-cells_after-title`
+Old
+```html
+<div class="weui-cells__title">带说明的列表项</div>
+<div class="weui-cells"></div>
+```
+
+New
+```html
+<view class="weui-cells__title">带说明的列表项</view>
+<view class="weui-cells weui-cells_after-title"></view>
+```
+
+
+### 不支持级联选择器 -> `in` someone
+
+#### 如：`.weui-cell_access .weui-cell__ft` -> `weui-cell__ft_in-access`
+Old
+```html
+<div class="weui-cell weui-cell_access">
+    <div class="weui-cell__ft"></div>
+</div>
+```
+
+New
+```html
+<view class="weui-cell weui-cell_access">
+    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+</view>
+```
+
+#### 如：`.weui-cells_radio .weui-cell__ft` -> `.weui-cell__ft_in-radio`
+Old
+```html
+<div class="weui-cells weui-cells_radio">
+    <label class="weui-cell weui-check__label">
+        <div class="weui-cell__ft">
+            <span class="weui-icon-checked"></span>
+        </div>
+    </label>
+</div>
+```
+
+New
+```html
+<view class="weui-cells weui-cells_with-title">
+    <label class="weui-cell weui-check__label">
+        <view class="weui-cell__ft weui-cell__ft_in-radio">
+            <icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
+        </view>
+    </label>
+</view>
+```
+
+
+### icon
+采用小程序的icon。因为原生的`icon`的`font-size:0`，所以需要新增一些类来控制icon的边距，如`.weui-icon-radio`、`.weui-icon-checkbox_circle`等，具体看代码。（当然，你也可以不加。）
+
+
+### button
+采用小程序的button，`.weui-btn`则用于控制间距
+
+Old
+```html
+<a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
+```
+
+New
+```html
+<button class="weui-btn" type="primary">页面主操作 Normal</button>
+```
+
+
+### `weui-cell_access`的`:active`
+由`navigator`的`hover-class`来指定类`weui-cell_active`来控制
+
+New
+```html
+<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+    <view class="weui-cell__bd">cell standard</view>
+    <view class="weui-cell__ft weui-cell__ft_with-access">说明文字</view>
+</navigator>
+```
+
+
+### `.weui-input`
+因为采用小程序的input，键盘弹起高度有所区别，所以实现上也有所改变，需要增加`.weui-cell_input`的扩展类
+
+Old
+```html
+<div class="weui-cell">
+    <div class="weui-cell__bd">
+        <input class="weui-input" />
+    </div>
+</div>
+```
+
+New
+```html
+<view class="weui-cell weui-cell_input">
+    <view class="weui-cell__bd">
+        <input class="weui-input" />
+    </view>
+</view>
+```
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+WeUI for 小程序 为微信小程序量身设计  
+=====
+
+
+## 概述
+
+[WeUI](https://github.com/weui/weui) 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`等各式元素。
+
+## 视觉标准
+
+[weui-design](https://github.com/weui/weui-design)
+
+## 预览
+
+用微信web开发者工具打开dist目录
+
+## 使用
+
+- 组件的wxml结构请看`dist/example/`下的组件
+- 样式文件可直接引用`dist/style/weui.wxss`，或者单独引用`dist/style/widget`下的组件的`wxss`
+
+
+## License
+The MIT License(http://opensource.org/licenses/MIT)
+
+请自由地享受和参与开源
+
+## 贡献
+
+如果你有好的意见或建议，欢迎给我们提issue或pull request，为提升微信web体验贡献力量-
diff --git a/dist/app.js b/dist/app.js
@@ -0,0 +1,14 @@
+App({
+    onLaunch: function () {
+        console.log('App Launch')
+    },
+    onShow: function () {
+        console.log('App Show')
+    },
+    onHide: function () {
+        console.log('App Hide')
+    },
+    globalData: {
+        hasLogin: false
+    }
+});
diff --git a/dist/app.json b/dist/app.json
@@ -0,0 +1,46 @@
+{
+  "pages": [
+    "example/index",
+
+    "example/button/button",
+    "example/list/list",
+    "example/input/input",
+    "example/uploader/uploader",
+
+    "example/article/article",
+    "example/flex/flex",
+    "example/footer/footer",
+    "example/gallery/gallery",
+    "example/grid/grid",
+    "example/icons/icons",
+    "example/loadmore/loadmore",
+    "example/panel/panel",
+    "example/preview/preview",
+    "example/progress/progress",
+
+    "example/actionsheet/actionsheet",
+    "example/dialog/dialog",
+    "example/msg/msg",
+    "example/msg/msg_success",
+    "example/msg/msg_fail",
+    "example/toast/toast",
+
+    "example/navbar/navbar",
+    "example/tabbar/tabbar",
+
+    "example/searchbar/searchbar"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "WeUI for 小程序",
+    "navigationBarBackgroundColor": "#f8f8f8",
+    "backgroundColor": "#f8f8f8"
+  },
+  "networkTimeout": {
+    "request": 10000,
+    "connectSocket": 10000,
+    "uploadFile": 10000,
+    "downloadFile": 10000
+  },
+  "debug": true
+}
diff --git a/dist/app.wxss b/dist/app.wxss
@@ -0,0 +1,35 @@
+@import 'style/weui.wxss';
+
+page{
+    background-color: #F8F8F8;
+    font-size: 16px;
+    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+}
+.page__hd {
+    padding: 40px;
+}
+.page__bd {
+    padding-bottom: 40px;
+}
+.page__bd_spacing {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.page__ft{
+    padding-bottom: 10px;
+    text-align: center;
+}
+
+.page__title {
+    text-align: left;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.page__desc {
+    margin-top: 5px;
+    color: #888888;
+    text-align: left;
+    font-size: 14px;
+}
diff --git a/dist/example/actionsheet/actionsheet.js b/dist/example/actionsheet/actionsheet.js
@@ -0,0 +1,12 @@
+Page({
+    open: function(){
+        wx.showActionSheet({
+            itemList: ['A', 'B', 'C'],
+            success: function(res) {
+                if (!res.cancel) {
+                    console.log(res.tapIndex)
+                }
+            }
+        });
+    }
+});
diff --git a/dist/example/actionsheet/actionsheet.wxml b/dist/example/actionsheet/actionsheet.wxml
@@ -0,0 +1,11 @@
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">ActionSheet</view>
+        <view class="page__desc">弹出式菜单，采用小程序原生的actionsheet</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <button type="default" bindtap="open">ActionSheet</button>
+        </view>
+    </view>
+</view>
diff --git a/dist/example/actionsheet/actionsheet.wxss b/dist/example/actionsheet/actionsheet.wxss
@@ -0,0 +1,3 @@
+page{
+    background-color: #FFFFFF;
+}
diff --git a/dist/example/article/article.js b/dist/example/article/article.js
@@ -0,0 +1 @@
+Page({});
diff --git a/dist/example/article/article.wxml b/dist/example/article/article.wxml
@@ -0,0 +1,36 @@
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Article</view>
+        <view class="page__desc">文章</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-article">
+            <view class="weui-article__h1">大标题</view>
+            <view class="weui-article__section">
+                <view class="weui-article__title">章标题</view>
+                <view class="weui-article__section">
+                    <view class="weui-article__h3">1.1 节标题</view>
+                    <view class="weui-article__p">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </view>
+                    <view class="weui-article__p">
+                        <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
+                        <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
+                    </view>
+                </view>
+                <view class="weui-article__section">
+                    <view class="weui-article__h3">1.2 节标题</view>
+                    <view class="weui-article__p">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>
diff --git a/dist/example/article/article.wxss b/dist/example/article/article.wxss
@@ -0,0 +1,6 @@
+page{
+    background-color: #FFFFFF;
+}
+image{
+    margin: 4px 0;
+}
diff --git a/dist/example/button/button.js b/dist/example/button/button.js
@@ -0,0 +1 @@
+Page({});
diff --git a/dist/example/button/button.wxml b/dist/example/button/button.wxml
@@ -0,0 +1,28 @@
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Button</view>
+        <view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view>
+    </view>
+    <view class="page__bd page__bd_spacing">
+        <button class="weui-btn" type="primary">页面主操作 Normal</button>
+        <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
+
+        <button class="weui-btn" type="default">页面次要操作 Normal</button>
+        <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
+
+        <button class="weui-btn" type="warn">警告类操作 Normal</button>
+        <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>
+
+        <view class="button-sp-area">
+            <button class="weui-btn" type="primary" plain="true">按钮</button>
+            <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
+
+            <button class="weui-btn" type="default" plain="true">按钮</button>
+            <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
+
+            <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
+            <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
+            <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
+        </view>
+    </view>
+</view>
diff --git a/dist/example/button/button.wxss b/dist/example/button/button.wxss
@@ -0,0 +1,8 @@
+.button-sp-area{
+    margin: 0 auto;
+    padding-top: 15px;
+    width: 60%;
+}
+.mini-btn{
+    margin-right: 5px;
+}