更新开发者工具 & 修复输入框bug

harveyqing · Oct 12, 2016 · 8a2c752 · 8a2c752
1 parent 9b90a8e
commit 8a2c752
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,4 @@
+# 2016-10-12
+
+* 更新开发者工具至`v0.10.101100`
+* 修改`new`页的数据绑定方式 & 修改多行文本框输入时的bug
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ $ git clone https://github.com/harveyqing/BearDiary.git
 $ cd BearDiary
 ```
 
-2. 打开`微信Web开放者工具`（注意：必须是`0.9.092300`版本）
+2. 打开`微信Web开放者工具`（注意：必须是`v0.10.101100`版本）
 
 3. 添加项目
 

diff --git a/app.wxss b/app.wxss
@@ -5,6 +5,7 @@
 
   page {
   width: 100%;
+  height: 100%;
   padding: 0;
   background-color: #eceff4;
   font-size: 30rpx;

diff --git a/pages/new/new.js b/pages/new/new.js
@@ -13,7 +13,8 @@ const MAX_CHAR = 1000;  // 最多输1000字符
 
 const TEXT = 'TEXT';
 
-var mediaActionSheetItems = ['拍照', '选择照片', '选择视频'];
+const mediaActionSheetItems = ['拍照', '选择照片', '选择视频'];
+const mediaActionSheetBinds = ['chooseImage', 'chooseImage', 'chooseImage']
 
 Page({
 
@@ -24,6 +25,12 @@ Page({
       list: [],
     },
 
+    // 是否显示loading
+    showLoading: false,
+
+    // loading提示语
+    loadingMessage: '',
+
     // 页面所处模式
     showMode: 'common',
 
@@ -36,9 +43,6 @@ Page({
       auto: false,  // 是否有自动换行
     },
 
-    // 待传至模板对象
-    data: null,
-
     // 当前位置信息
     poi: null,
 
@@ -48,16 +52,26 @@ Page({
     // 多媒体文件插入action-sheet
     mediaActionSheetItems: mediaActionSheetItems,
 
+    // 多媒体文件插入项点击事件
+    mediaActionSheetBinds: mediaActionSheetBinds,
+
     // 是否显示底部tab栏
     showTab: true,
   },
 
+  // 显示loading提示
+  showLoading(loadingMessage) {
+    this.setData({showLoading: true, loadingMessage});
+  },
+
+  // 隐藏loading提示
+  hideLoading() {
+    this.setData({showLoading: false, loadingMessage: ''});
+  },
+
   // 数据初始化
   init() {
     this.getPoi();
-    this.setData({
-      data: this.data,
-    })
   },
 
   // 页面初始化
@@ -113,7 +127,7 @@ Page({
 
   // 进入文本编辑模式
   inputTouch(event) {
-    this.setData({showMode: 'inputText', data: this.data});
+    this.setData({showMode: 'inputText'});
   },
 
   // 取消文本编辑
@@ -137,25 +151,29 @@ Page({
         let lines = this.data.inputStatus.lines;
         let row = this.data.inputStatus.row;
         let [extra, extra_index] = [[['']], 0];
+        let hasNewLine = false;
         console.log('当前文本长度: ' + len);
 
         // 当前输入长度超过规定长度
         if (len >= ROW_CHARS) {
           // TODO 此处方案不完善
+          // 一次输入最好不超过两行
+          hasNewLine = true;
           while (input.strlen(text) > ROW_CHARS) {
             let last = text[text.length - 1];
 
             if (input.strlen(extra[extra_index] + last) > ROW_CHARS) {
               extra_index += 1;
               extra[extra_index] = [''];
             }
+
             extra[extra_index].unshift(last);
             text = text.slice(0, -1);
           }
       }
 
       lines[lines.length - 1] = text;
-      if (extra_index) {
+      if (hasNewLine) {
         extra.reverse().forEach((element, index, array) => {
           lines.push(element.join(''));
           row += 1;
@@ -169,15 +187,15 @@ Page({
         auto: true,  // // 自动换行的则处于输入模式
       };
 
-      this.setData({inputStatus, data: this.data});
+      this.setData({inputStatus});
       }
     }
   },
 
   // 文本框获取到焦点
   focusInput(event) {
     let isInitialInput = this.data.inputStatus.row == 0 &&
-                         this.data.inputStatus.lines[0] == 0;
+                         this.data.inputStatus.lines[0].length == 0;
     let isAutoInput = this.data.inputStatus.mode == 'INPUT' &&
                       this.data.inputStatus.auto == true;
     let mode = 'EDIT';
@@ -193,7 +211,6 @@ Page({
   mediaTouch() {
     this.setData({
       showTab: false,
-      data: this.data,
       mediaActionSheetHidden: false,
     });
   },
@@ -202,7 +219,22 @@ Page({
     this.setData({
       showTab: true,
       mediaActionSheetHidden: true,
-      data: this.data,
+    })
+  },
+
+  // 从相册选择照片或拍摄照片
+  chooseImage() {
+    wx.chooseImage({
+      count: 9,  // 最多选9张
+      sizeType: ['origin', 'compressed'],
+      sourceType: ['album', 'camera'],
+
+      success: (res) => {
+        this.setData({mediaActionSheetHidden: true});
+        this.showLoading('图片处理中...');
+
+        console.log(res);
+      }
     })
   },
 

diff --git a/pages/new/new.wxml b/pages/new/new.wxml
@@ -4,7 +4,7 @@
   <view class="common-container">
   </view>
 
-  <view class="tabbar" style="display:{{data.showTab ? 'flex' : 'none'}};">
+  <view class="tabbar" style="display:{{showTab ? 'flex' : 'none'}};">
     <view class="item" bindtap="inputTouch">
       <image class="icon" mode="aspectFit" src="../../images/tabbar/text.png"></image>
     </view>
@@ -16,9 +16,9 @@
     </view>
   </view>
 
-  <action-sheet hidden="{{data.mediaActionSheetHidden}}" bindchange="mediaActionSheetChange">
-    <block wx:for-items="{{data.mediaActionSheetItems}}">
-      <action-sheet-item class="action-item">
+  <action-sheet hidden="{{mediaActionSheetHidden}}" bindchange="mediaActionSheetChange">
+    <block wx:for-items="{{mediaActionSheetItems}}" wx:for-index="id">
+      <action-sheet-item class="action-item" bindtap="{{mediaActionSheetBinds[id]}}">
         {{item}}
       </action-sheet-item>
     </block>
@@ -28,8 +28,8 @@
 
 <template name="inputText">
   <view class="input-container">
-    <view style="height:47rpx" wx:for="{{data.inputStatus.lines}}" wx:for-index="idx">
-      <input type="text" data-index="{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == data.inputStatus.row ? true : false}}" bindfocus="focusInput"/>
+    <view style="height:47rpx" wx:for="{{inputStatus.lines}}" wx:for-index="idx">
+      <input type="text" data-index="{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == inputStatus.row ? true : false}}" bindfocus="focusInput"/>
     </view>
   </view>
   <view class="tabbar">
@@ -43,5 +43,13 @@
 </template>
 
 <view style="width:100%;height:100%">
-  <template is="{{showMode}}" data="{{data}}"></template>
+  <block wx:if="{{showMode == 'common'}}">
+    <template is="{{showMode}}" data="{{showTab: showTab, mediaActionSheetHidden: mediaActionSheetHidden, mediaActionSheetItems: mediaActionSheetItems, mediaActionSheetBinds: mediaActionSheetBinds}}"></template>
+  </block>
+  <block wx:if="{{showMode == 'inputText'}}">
+    <template is="{{showMode}}" data="{{inputStatus}}"></template>
+  </block>
+  <loading hidden="{{!showLoading}}" bindchange="hideLoading">
+    {{loadingMessage}}
+  </loading>
 </view>