forked from harveyqing/BearDiary
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
wangjin
committed
Oct 9, 2016
1 parent
92e51f1
commit 0d4fe73
Showing
9 changed files
with
240 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,114 @@ | ||
| // new.js | ||
| // TODO 并不是所有非中文字符宽度都为中文字符宽度一半，需特殊处理 | ||
|
|
||
| const input = require('../../utils/input.js'); | ||
| const config = require('../../config.js'); | ||
|
|
||
| const RESOLUTION = 750; // 微信规定屏幕宽度为750rpx | ||
| const MARGIN = 10; // 写字面板左右margin | ||
| const ROW_CHARS = Math.floor((RESOLUTION - 2 * MARGIN) / config.input.charWidth); | ||
| const MAX_CHAR = 1000; // 最多输1000字符 | ||
|
|
||
| Page({ | ||
| data:{ | ||
| // text:"这是一个页面" | ||
|
|
||
| data: { | ||
| // 日记对象 | ||
| diary: {}, | ||
|
|
||
| // 页面所处模式 | ||
| showMode: 'common', | ||
|
|
||
| // 输入框状态对象 | ||
| input: { | ||
| row: 0, | ||
| column: 0, | ||
| lines: [''], | ||
| }, | ||
|
|
||
| // 待传至模板对象 | ||
| data: null, | ||
| }, | ||
| onLoad:function(options){ | ||
| // 页面初始化 options为页面跳转所带来的参数 | ||
|
|
||
| // 页面初始化 | ||
| onLoad: function(options){ | ||
| if (options) { | ||
| let title = options.title; | ||
| if (title) {this.setData({'diary.title': title});} | ||
| } | ||
|
|
||
| this.setData({data: this.data.diary}); | ||
| }, | ||
| onReady:function(){ | ||
| // 页面渲染完成 | ||
| wx.setNavigationBarTitle({ | ||
| title: "编辑日记" | ||
| }) | ||
|
|
||
| // 页面渲染完成 | ||
| onReady: function(){ | ||
| wx.setNavigationBarTitle({title: '编辑日记'}); | ||
| }, | ||
|
|
||
| onShow:function(){ | ||
| // 页面显示 | ||
| }, | ||
|
|
||
| onHide:function(){ | ||
| // 页面隐藏 | ||
| }, | ||
|
|
||
| onUnload:function(){ | ||
| // 页面关闭 | ||
| }, | ||
|
|
||
| // 清除正在输入文本 | ||
| clearInput() { | ||
| this.setData({input: {row: 0, common: 0, lines: ['']}}); | ||
| }, | ||
|
|
||
| // 进入文本编辑模式 | ||
| inputTouch(event) { | ||
| this.setData({showMode: 'inputText', data: this.data.input}); | ||
| }, | ||
|
|
||
| // 取消文本编辑 | ||
| inputCancel() { | ||
| this.setData({showMode: 'common'}); | ||
| this.clearInput(); | ||
| }, | ||
|
|
||
| // 文本输入 | ||
| textInput(event) { | ||
| let context = event.detail; | ||
| let [lines, row] = [this.data.input.lines, this.data.input.row]; | ||
|
|
||
| if (context.value.length != context.cursor) { | ||
| console.log('用户输入中...'); | ||
| } else { | ||
| let len = input.strlen(context.value); | ||
| console.log('当前文本长度: ' + len); | ||
|
|
||
| // 当前输入长度超过规定长度 | ||
| if (len >= ROW_CHARS) { | ||
| let text = context.value; | ||
| let [extra, extra_index] = [[['']], 0]; | ||
|
|
||
| // TODO 此处方案不完善 | ||
| 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; | ||
| extra.reverse().forEach((element, index, array) => { | ||
| lines.push(element.join('')); | ||
| row += 1; | ||
| }) | ||
|
|
||
| this.setData({'input.lines': lines, 'input.row': row}); | ||
| this.setData({data: this.data.input}); | ||
| } | ||
| } | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,38 @@ | ||
| <view class="container"> | ||
| </view> | ||
| <view class="tabbar"> | ||
| <navigator class="item" url="../compose/compose"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/text.png"></image> | ||
| </navigator> | ||
| <view class="item"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/image.png"></image> | ||
| <!--new.wxml--> | ||
|
|
||
| <template name="common"> | ||
| <view class="common-container"> | ||
| </view> | ||
|
|
||
| <view class="tabbar"> | ||
| <view class="item" bindtap="inputTouch"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/text.png"></image> | ||
| </view> | ||
| <view class="item"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/image.png"></image> | ||
| </view> | ||
| <view class="item"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/more.png"></image> | ||
| </view> | ||
| </view> | ||
| </template> | ||
|
|
||
| <template name="inputText"> | ||
| <view class="input-container"> | ||
| <view style="height:47rpx" wx:for="{{data.lines}}" wx:for-index="idx"> | ||
| <input type="text" id="input-{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == data.row ? true : false}}" /> | ||
| </view> | ||
| </view> | ||
| <view class="item"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/more.png"></image> | ||
| <view class="tabbar"> | ||
| <view class="item" style="width:50%" bindtap="inputCancel"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/cancel.png"></image> | ||
| </view> | ||
| <view class="item" style="width:50%"> | ||
| <image class="icon" mode="aspectFit" src="../../images/tabbar/ok.png"></image> | ||
| </view> | ||
| </view> | ||
| </template> | ||
|
|
||
| <view style="width:100%;height:100%"> | ||
| <template is="{{showMode}}" data="{{data}}"></template> | ||
| </view> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,48 @@ | ||
| /** new.wxss **/ | ||
|
|
||
| .container { | ||
| .common-container { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .tabbar { | ||
| position: fixed; | ||
| width: 100%; | ||
| height: 80rpx; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: white; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| position: fixed; | ||
| width: 100%; | ||
| height: 80rpx; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: white; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .tabbar .item { | ||
| width: 33.33%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 33.33%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .item .icon { | ||
| width: 50rpx; | ||
| height: 50rpx; | ||
| width: 50rpx; | ||
| height: 50rpx; | ||
| } | ||
|
|
||
| .input-container { | ||
| height: 90%; | ||
| background-color: #eceff4; | ||
| background-image: linear-gradient(#E1E6EA .1em, transparent .1em); | ||
| background-size: 100% 48rpx; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| margin: 0 10rpx; | ||
| } | ||
|
|
||
| .input-container input{ | ||
| height: 47rpx; | ||
| max-height: 47rpx; | ||
| font-size: 28rpx; | ||
| margin: 0px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| // 输入框相关处理函数 | ||
|
|
||
| module.exports = { | ||
|
|
||
| // 计算字符串长度（英文占一个字符，中文汉字占2个字符） | ||
| strlen(str) { | ||
| var len = 0; | ||
| for (var i = 0; i < str.length; i++) { | ||
| var c = str.charCodeAt(i); | ||
| if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) { | ||
| len++; | ||
| } else { | ||
| len += 2; | ||
| } | ||
| } | ||
| return len; | ||
| }, | ||
| } |