added html5 test

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "wepy": "^1.5.1",
     "wepy-async-function": "^1.4.4",
-    "wepy-com-toast": "^1.0.1"
+    "wepy-com-toast": "^1.0.1",
+    "wepy-web": "0.0.3"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.1",
@@ -29,6 +30,8 @@
     "wepy-compiler-babel": "^1.5.1",
     "wepy-compiler-less": "^1.3.10",
     "wepy-compiler-sass": "0.0.3",
-    "wepy-eslint": "^1.5.2"
+    "wepy-eslint": "^1.5.2",
+    "wepy-plugin-imagemin": "^1.5.2",
+    "wepy-plugin-uglifyjs": "^1.3.6"
   }
 }

src/app.wpy

@@ -1,7 +1,8 @@
 <style type='sass'>
-page, .body{
-    height: 100%;
-    font-family: '\5FAE\8F6F\96C5\9ED1', arial;
+body {
+    margin: 0px;
+    padding: 0px;
+    background-color: #f0eff5;
 }
 </style>
 

src/common/api.js

@@ -12,20 +12,20 @@ export default {
             template = m_reply['other'];
 
         let index = Math.random() * template.length >> 0;
-        
+
         return new Promise((resolve, reject) => {
             setTimeout(() => {
                 resolve(template[index]);
             });
-        }); 
+        });
 
     },
     getContact () {
         return new Promise((resolve, reject) => {
             setTimeout(() => {
                 resolve(m_contacts);
             });
-        }); 
+        });
     },
 
     getUserInfo () {
@@ -46,9 +46,9 @@ export default {
         });
     },
 
-    // select * from history h 
-    // left join contact c 
-    // on (h.from == c.id or h.to == c.id) 
+    // select * from history h
+    // left join contact c
+    // on (h.from == c.id or h.to == c.id)
     // where h.from = :id or h.to = :id or :id = '';
     // order by h.time asc;
     getHistory (id) {
@@ -64,10 +64,10 @@ export default {
             });
         });
     },
-    // select *, (select msg from history h2 where h2.from = c.id or h2.to = c.id order by time desc limit 1) as lastmsg 
-    // from history h 
-    // left join contact c 
-    // on (h.from == c.id or h.to == c.id) 
+    // select *, (select msg from history h2 where h2.from = c.id or h2.to = c.id order by time desc limit 1) as lastmsg
+    // from history h
+    // left join contact c
+    // on (h.from == c.id or h.to == c.id)
     // where h.from = :id or h.to = :id or :id = '';
     // order by h.time desc;
     getMessageList () {
@@ -113,7 +113,7 @@ export default {
             if (v.id) {
                 if (v.id !== 'me') {
                     v.name = contactObj[v.id].name;
-                    v.icon = '../mocks/users/' + contactObj[v.id].id + '.png';
+                    v.icon = (wepy.env === 'web' ? './mocks/users/' : '../mocks/users/') + contactObj[v.id].id + '.png';
                 }
                 rst.push(v);
             }
@@ -140,7 +140,7 @@ export default {
         };
 
         history.push(msgObj);
-        
+
         return new Promise((resolve, reject) => {
             wepy.setStorage({key: '_wechat_history_', data: history}).then(() => {
                 resolve(msgObj);
@@ -152,4 +152,4 @@ export default {
         return wepy.clearStorage();
     }
 
-}
+}

src/components/chartboard.wpy

@@ -26,7 +26,7 @@
                 width: 70rpx;
                 height: 70rpx;
             }
-            &.me {
+            &.fromme {
                 .msg {
                     background-color: #9fe757;
                     float: right;
@@ -54,7 +54,7 @@
 <template>
     <scroll-view scroll-y="1" class="chartboard{{focus ? ' fixed' : ''}}">
         <block wx:for="{{message}}" wx:key="index" wx:for-index="index" wx:for-item="item">
-            <view class="msgarea{{item.from === 'me' ? ' me' : ' other'}}">
+            <view class="msgarea{{item.from === 'me' ? ' fromme' : ' other'}}">
                 <image class="icon" src="{{item.icon}}"></image>
                 <view class="msg">{{item.msg}}</view>
                 <view class="clearfix"></view>
@@ -95,7 +95,7 @@
                 userinfo = {
                     nickName: 'Gcaufy',
                     id: 'gcaufy',
-                    avatarUrl: '../images/myheader.png',
+                    avatarUrl: wepy.env === 'web' ? './images/myheader.png' : '../images/myheader.png',
                 };
             }
             this.current = userinfo;
@@ -128,7 +128,7 @@
             this.message.push(msgObj);
 
             this.$apply();
-            this.$invoke('../input', 'clear');
+            this.$invoke('../myinput', 'clear');
 
             let randomReply = await api.getRandomReply(id);
             this.replyMessage(randomReply);

src/components/contact.wpy

@@ -38,6 +38,7 @@
             padding-left: 20rpx;
             padding-right: 20rpx;
             padding-bottom: 100rpx;
+            background: white;
             .sep {
                 background-color: #f1f0f6;
                 color: #7e7d83;
@@ -99,7 +100,7 @@
             <block wx:for="{{contacts}}" wx:key="index" wx:for-index="alpha" wx:for-item="lists">
                 <view class="sep">{{alpha}}</view>
                 <block wx:for="{{lists}}" wx:key="index" wx:for-index="index" wx:for-item="item">
-                    <view class="user" data-wepy-params="{{item.id}}" @tap="select">
+                    <view class="user" @tap="select({{item.id}})">
                          <image src="{{item.icon}}" class="user_icon"></image>
                          <text class="user_name">{{item.name}}</text>
                     </view>
@@ -127,19 +128,19 @@
         data = {
             toplist: [
                 {
-                    header: '../images/new_friend.png',
+                    header: wepy.env === 'web' ? './images/new_friend.png' : '../images/new_friend.png',
                     name: '新的朋友',
                 },
                 {
-                    header: '../images/group_chat.png',
+                    header: wepy.env === 'web' ? './images/group_chat.png' : '../images/group_chat.png',
                     name: '群聊',
                 },
                 {
-                    header: '../images/tag.png',
+                    header: wepy.env === 'web' ? './images/tag.png' : '../images/tag.png',
                     name: '标签',
                 },
                 {
-                    header: '../images/public.png',
+                    header: wepy.env === 'web' ? './images/public.png' : '../images/public.png',
                     name: '公众号',
                 },
             ],

src/components/discovery.wpy

@@ -44,16 +44,16 @@
             group: Group
         };
         data = {
-            dMoment: [{icon: '../images/moment.png', title: '朋友圈'}],
-            dShopping: [{icon: '../images/shopping.png', title: '购物'}],
-            dDrift: [{icon: '../images/drift.png', title: '漂流瓶'}],
-            dAction: [{icon: '../images/scan.png', title: '扫一扫'}, {icon: '../images/shake.png', title: '摇一摇'}],
+            dMoment: [{icon: wepy.env === 'web' ? './images/moment.png' : '../images/moment.png', title: '朋友圈'}],
+            dShopping: [{icon: wepy.env === 'web' ? './images/shopping.png' : '../images/shopping.png', title: '购物'}],
+            dDrift: [{icon: wepy.env === 'web' ? './images/drift.png' : '../images/drift.png', title: '漂流瓶'}],
+            dAction: [{icon: wepy.env === 'web' ? './images/scan.png' : '../images/scan.png', title: '扫一扫'}, {icon: wepy.env === 'web' ? './images/shake.png' : '../images/shake.png', title: '摇一摇'}],
 
             list: {
-                dMoment: [{icon: '../images/moment.png', title: '朋友圈'}],
-                dShopping: [{icon: '../images/shopping.png', title: '购物'}],
-                dDrift: [{icon: '../images/drift.png', title: '漂流瓶'}],
-                dAction: [{icon: '../images/scan.png', title: '扫一扫'}, {icon: '../images/shake.png', title: '摇一摇'}]
+                dMoment: [{icon: wepy.env === 'web' ? './images/moment.png' : '../images/moment.png', title: '朋友圈'}],
+                dShopping: [{icon: wepy.env === 'web' ? './images/shopping.png' : '../images/shopping.png', title: '购物'}],
+                dDrift: [{icon: wepy.env === 'web' ? './images/drift.png' : '../images/drift.png', title: '漂流瓶'}],
+                dAction: [{icon: wepy.env === 'web' ? './images/scan.png' : '../images/scan.png', title: '扫一扫'}, {icon: wepy.env === 'web' ? './images/shake.png' : '../images/shake.png', title: '摇一摇'}]
             }
         };
         methods = {

src/components/input.wpy

@@ -66,7 +66,7 @@
             <image class="input_icon face" src="../images/face.png"></image>
             <image class="input_icon plus" src="../images/plus.png"></image>
             <view class="send{{readyToSend.length == 0 ? ' hidden' : ''}}" @tap="send">发送</view>
-            <input @input="input" value="{{readyToSend}}" class="input_text{{focus ? ' focus' : ''}}" @focus="focus" @blur="blur" @type="input"></input>
+            <input @input="input" value="{{readyToSend}}" class="input_text{{focusFlag ? ' focusFlag' : ''}}" @focus="focus" @blur="blur" @type="input"></input>
         </view>
     </view>
 </template>
@@ -76,7 +76,7 @@
     export default class Input extends wepy.component {
 
         data = {
-            focus: false,
+            focusFlag: false,
             readyToSend: ''
         };
 
@@ -90,12 +90,12 @@
                 this.readyToSend = evt.detail.value;
             },
             focus (evt) {
-                this.focus = true;
-                this.$invoke('../chartboard', 'fixPosition', this.focus);
+                this.focusFlag = true;
+                this.$invoke('../chartboard', 'fixPosition', this.focusFlag);
             },
             blur (evt) {
-                this.focus = false;
-                this.$invoke('../chartboard', 'fixPosition', this.focus);
+                this.focusFlag = false;
+                this.$invoke('../chartboard', 'fixPosition', this.focusFlag);
             },
             clear () {
                 this.readyToSend = '';

src/components/me.wpy

@@ -86,13 +86,13 @@
             userInfo: {
                 nickName: 'Gcaufy',
                 id: 'gcaufy',
-                avatarUrl: '../images/myheader.png'
+                avatarUrl: wepy.env === 'web' ? './images/myheader.png' : '../images/myheader.png'
             },
             dAlbum: [
-                {icon: '../images/album.png', title: '相册'},
-                {icon: '../images/collect.png', title: '收藏'},
-                {icon: '../images/wallet.png', title: '钱包'},
-                {icon: '../images/card.png', title: '卡包'},
+                {icon: wepy.env === 'web' ? './images/album.png' : '../images/album.png', title: '相册'},
+                {icon: wepy.env === 'web' ? './images/collect.png' : '../images/collect.png', title: '收藏'},
+                {icon: wepy.env === 'web' ? './images/wallet.png' : '../images/wallet.png', title: '钱包'},
+                {icon: wepy.env === 'web' ? './images/card.png' : '../images/card.png', title: '卡包'},
             ],
             dSetting: [
                 {
@@ -104,7 +104,7 @@
                     }
                 }
             ],
-            dEmoji: [{icon: '../images/emoji.png', title: '表情'}],
+            dEmoji: [{icon: wepy.env === 'web' ? './images/emoji.png' : '../images/emoji.png', title: '表情'}],
         };
 
         methods = {

src/components/tab.wpy

@@ -10,6 +10,7 @@
         border-top: 1px solid #dad9d6;
         background-color: #f7f7f7;
         font-size: 24rpx;
+        white-space: nowrap;
         .tab_item {
             &.active {
                 color: $activecolor;

src/index.template.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta content="telephone=no" name="format-detection">
+
+  <title>test</title>
+  <style>
+      html, body, #app {height: 100%;}
+  </style>
+</head>
+<body>
+  <div id="app">
+    <router-view keep-alive transition transition-mode="out-in"></router-view>
+    <script src="./index.js"></script>
+  </div>
+</body>
+</html>

src/mocks/contact.js

@@ -1,3 +1,5 @@
+import wepy from 'wepy';
+
 let users = [
     {id: 'caixia', name: '彩霞'},
     {id: 'erkang', name: '尔康'},
@@ -38,7 +40,7 @@ let table = users.map((v) => {
     return {
         name: v.name,
         id: v.id,
-        icon: `/mocks/users/${v.id}.png`
+        icon: wepy.env === 'web' ? `./mocks/users/${v.id}.png` : `../mocks/users/${v.id}.png`
     };
 });
 export default table

src/pages/chat.wpy

@@ -1,13 +1,18 @@
 <style type="sass">
-    .body{
+    .page_chat{
         height: 100%;
         background-color: #ededed;
     }
 </style>
 <template>
-    <view class="body">
-        <component id="chartboard"></component>
-        <component id="input"></component>
+    <view class="body page_chat">
+        <view>
+            <chartboard />
+        </view>
+
+        <view>
+            <myinput />
+        </view>
     </view>
 </template>
 
@@ -26,7 +31,7 @@
             'navigationBarBackgroundColor': '#3b3a40'
         };
         components = {
-            input: Input,
+            myinput: Input,
             chartboard: Chartboard
         };
 

src/pages/index.wpy

@@ -1,12 +1,17 @@
 <style type="sass">
-    .tab_item {
-        height: 100%;
-    }
+.tab_item {
+    height: 100%;
+}
+page, .body{
+    height: 100%;
+    font-family: '\5FAE\8F6F\96C5\9ED1', arial;
+    background-color: #f0eff5;
+}
 </style>
 <template>
     <view class="body">
         <view class="tab_item tab_message" hidden="{{currentTab != 0}}">
-            <component id="message"></component>
+            <message />
         </view>
         <view class="tab_item tab_contact" hidden="{{currentTab != 1}}">
             <contact />
@@ -17,9 +22,13 @@
         <view class="tab_item tab_me" hidden="{{currentTab != 3}}">
             <me />
         </view>
-        <tab :active.sync="currentTab" />
 
-        <toast />
+        <view>
+            <tab :active.sync="currentTab" />
+        </view>
+        <view>
+            <toast />
+        </view>
     </view>
 </template>