From 898f9f7506f6a39a9f4fa50920270f2b59c4db93 Mon Sep 17 00:00:00 2001 From: ziyueyang Date: Thu, 23 Apr 2020 16:49:05 +0800 Subject: [PATCH 1/9] add open-type button --- .../page/component/pages/button/button.js | 20 +++++++++++++++++++ .../page/component/pages/button/button.wxml | 7 +++++++ 2 files changed, 27 insertions(+) diff --git a/miniprogram/page/component/pages/button/button.js b/miniprogram/page/component/pages/button/button.js index 5919317d..5b8dfb4a 100644 --- a/miniprogram/page/component/pages/button/button.js +++ b/miniprogram/page/component/pages/button/button.js @@ -32,6 +32,26 @@ const pageObject = { this.setData({ loading: !this.data.loading }) + }, + + handleContact(e) { + console.log(e.detail) + }, + + handleGetPhoneNumber(e) { + console.log(e.detail) + }, + + handleGetUserInfo(e) { + console.log(e.detail) + }, + + handleOpenSetting(e) { + console.log(e.detail.authSetting) + }, + + handleGetUserInfo(e) { + console.log(e.detail.userInfo) } } diff --git a/miniprogram/page/component/pages/button/button.wxml b/miniprogram/page/component/pages/button/button.wxml index 958660a8..ee00c421 100644 --- a/miniprogram/page/component/pages/button/button.wxml +++ b/miniprogram/page/component/pages/button/button.wxml @@ -27,6 +27,13 @@ + + + + + + + From 2875382c13a4fb46b6a6c0d80cc9a259881769bf Mon Sep 17 00:00:00 2001 From: ziyueyang Date: Thu, 23 Apr 2020 16:49:50 +0800 Subject: [PATCH 2/9] update editor to the latest sample in document --- .../page/component/pages/editor/editor.js | 90 ++++++++++--------- .../page/component/pages/editor/editor.wxml | 48 ++-------- .../page/component/pages/editor/editor.wxss | 62 +++++++------ 3 files changed, 92 insertions(+), 108 deletions(-) diff --git a/miniprogram/page/component/pages/editor/editor.js b/miniprogram/page/component/pages/editor/editor.js index 4456d3a7..3e8618b5 100644 --- a/miniprogram/page/component/pages/editor/editor.js +++ b/miniprogram/page/component/pages/editor/editor.js @@ -3,18 +3,13 @@ const util = require('../../../../util/util.js') const compareVersion = util.compareVersion Page({ - onShareAppMessage() { - return { - title: 'editor', - path: 'page/component/pages/editor/editor' - } - }, - data: { formats: {}, - bottom: 0, readOnly: false, placeholder: '开始输入...', + editorHeight: 300, + keyboardHeight: 0, + isIOS: false }, readOnlyChange() { this.setData({ @@ -22,62 +17,72 @@ Page({ }) }, onLoad() { - this.canUse = true - wx.loadFontFace({ - family: 'Pacifico', - source: 'url("https://sungd.github.io/Pacifico.ttf")', - success: console.log - }) - const {SDKVersion} = wx.getSystemInfoSync() + const platform = wx.getSystemInfoSync().platform + const isIOS = platform === 'ios' + this.setData({ isIOS }) + const that = this + this.updatePosition(0) + let keyboardHeight = 0 + wx.onKeyboardHeightChange(res => { + if (res.height === keyboardHeight) return + const duration = res.height > 0 ? res.duration * 1000 : 0 + keyboardHeight = res.height + setTimeout(() => { + wx.pageScrollTo({ + scrollTop: 0, + success() { + that.updatePosition(keyboardHeight) + that.editorCtx.scrollIntoView() + } + }) + }, duration) - if (compareVersion(SDKVersion, '2.7.0') >= 0) { - // - } else { - this.canUse = false - // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 - wx.showModal({ - title: '提示', - content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' - }) - } + }) + }, + updatePosition(keyboardHeight) { + const toolbarHeight = 50 + const { windowHeight, platform } = wx.getSystemInfoSync() + let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight + this.setData({ editorHeight, keyboardHeight }) + }, + calNavigationBarAndStatusBar() { + const systemInfo = wx.getSystemInfoSync() + const { statusBarHeight, platform } = systemInfo + const isIOS = platform === 'ios' + const navigationBarHeight = isIOS ? 44 : 48 + return statusBarHeight + navigationBarHeight }, - onEditorReady() { const that = this wx.createSelectorQuery().select('#editor').context(function (res) { that.editorCtx = res.context }).exec() }, - - undo() { - this.editorCtx.undo() - }, - redo() { - this.editorCtx.redo() + blur() { + this.editorCtx.blur() }, format(e) { - if (!this.canUse) return - const {name, value} = e.target.dataset + let { name, value } = e.target.dataset if (!name) return // console.log('format', name, value) this.editorCtx.format(name, value) - }, + }, onStatusChange(e) { const formats = e.detail - this.setData({formats}) + this.setData({ formats }) }, insertDivider() { this.editorCtx.insertDivider({ - success() { + success: function () { console.log('insert divider success') } }) }, clear() { this.editorCtx.clear({ - success() { - console.log('clear success') + success: function (res) { + console.log("clear success") } }) }, @@ -95,14 +100,15 @@ Page({ const that = this wx.chooseImage({ count: 1, - success() { + success: function (res) { that.editorCtx.insertImage({ - src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543767268337&di=5a3bbfaeb30149b2afd33a3c7aaa4ead&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20151031%2Ftooopen_sy_147004931368.jpg', + src: res.tempFilePaths[0], data: { id: 'abcd', role: 'god' }, - success() { + width: '80%', + success: function () { console.log('insert image success') } }) diff --git a/miniprogram/page/component/pages/editor/editor.wxml b/miniprogram/page/component/pages/editor/editor.wxml index 36ed9eaf..28dfede3 100644 --- a/miniprogram/page/component/pages/editor/editor.wxml +++ b/miniprogram/page/component/pages/editor/editor.wxml @@ -5,52 +5,22 @@ - + + + + + + - - - - - diff --git a/miniprogram/page/component/pages/editor/editor.wxss b/miniprogram/page/component/pages/editor/editor.wxss index e79e58f6..cbf1fc7f 100644 --- a/miniprogram/page/component/pages/editor/editor.wxss +++ b/miniprogram/page/component/pages/editor/editor.wxss @@ -1,41 +1,49 @@ @import "../../../common/lib/weui.wxss"; @import "./assets/iconfont.wxss" -.wrapper { - padding: 5px; -} - -.iconfont { - display: inline-block; - padding: 8px 8px; - width: 24px; - height: 24px; - cursor: pointer; - font-size: 20px; -} - -.toolbar { - box-sizing: border-box; - /* border: 1px solid #ccc; */ - border-bottom: 0; - font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; +.container { + position: absolute; + top: 0; + left: 0; + width: 100%; } - .ql-container { box-sizing: border-box; - padding: 12px 15px; width: 100%; - min-height: 30vh; - height: auto; - /* border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; */ - background: #fff; - margin-top: 20px; + height: 100%; font-size: 16px; line-height: 1.5; + overflow: auto; + padding: 10px 10px 20px 10px; + border: 1px solid #ECECEC; } .ql-active { - color: #06c; + color: #22C704; } + +.iconfont { + display: inline-block; + width: 30px; + height: 30px; + cursor: pointer; + font-size: 20px; +} + +.toolbar { + box-sizing: border-box; + padding: 0 10px; + height: 50px; + width: 100%; + position: fixed; + left: 0; + right: 100%; + bottom: 0; + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid #ECECEC; + border-left: none; + border-right: none; +} \ No newline at end of file From e2823b9a9057718862d373d4b4c8288a3ff23640 Mon Sep 17 00:00:00 2001 From: ziyueyang Date: Thu, 23 Apr 2020 17:34:57 +0800 Subject: [PATCH 3/9] enable-auto-rotation demo for video component --- .../page/component/pages/button/button.wxml | 2 +- miniprogram/page/component/pages/video/video.js | 12 +++++++++--- miniprogram/page/component/pages/video/video.json | 3 ++- miniprogram/page/component/pages/video/video.wxml | 15 +++++++++++++-- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/miniprogram/page/component/pages/button/button.wxml b/miniprogram/page/component/pages/button/button.wxml index ee00c421..b3d4ba7c 100644 --- a/miniprogram/page/component/pages/button/button.wxml +++ b/miniprogram/page/component/pages/button/button.wxml @@ -28,7 +28,7 @@ - + diff --git a/miniprogram/page/component/pages/video/video.js b/miniprogram/page/component/pages/video/video.js index 5a3aa4a7..f5854b97 100644 --- a/miniprogram/page/component/pages/video/video.js +++ b/miniprogram/page/component/pages/video/video.js @@ -23,8 +23,7 @@ Page({ inputValue: '', data: { src: '', - danmuList: - [{ + danmuList: [{ text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 @@ -32,7 +31,8 @@ Page({ text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 - }] + }], + enableAutoRotation: true }, bindInputBlur(e) { @@ -63,5 +63,11 @@ Page({ videoErrorCallback(e) { console.log('视频错误信息:') console.log(e.detail.errMsg) + }, + + handleSwitchChange(e) { + this.setData({ + enableAutoRotation: e.detail.value + }) } }) diff --git a/miniprogram/page/component/pages/video/video.json b/miniprogram/page/component/pages/video/video.json index 4a07605c..370aca3f 100644 --- a/miniprogram/page/component/pages/video/video.json +++ b/miniprogram/page/component/pages/video/video.json @@ -1,3 +1,4 @@ { - "navigationBarTitleText": "video" + "navigationBarTitleText": "video", + "pageOrientation": "auto" } diff --git a/miniprogram/page/component/pages/video/video.wxml b/miniprogram/page/component/pages/video/video.wxml index f492492e..91cf2851 100644 --- a/miniprogram/page/component/pages/video/video.wxml +++ b/miniprogram/page/component/pages/video/video.wxml @@ -6,7 +6,7 @@ - + @@ -21,7 +21,18 @@ - + + + + + 开启自动旋转 + + + + + + +