- editor组件在用户编辑时如果输入多行是会把上面的组件给顶没了?
[图片] 页面里控件布局如上图所示,是在tab页里放控件。这个“活动描述”tab页里有1/2/3三个控件: 1:Input控件,输入标题 2:小程序原生富文本编辑器的toolbar 3: 小程序原生富文本编辑器的editor 尝试在小程序的富文本编辑器的editor里进行多行编辑,发现随着换行上面的#1/#2控件回被顶出页面再也回不来,如下动图所示: [图片] 请教是怎么一回事?应该怎么改? wxml源代码: <view class="page"> <!-- 页头 --> <view class="page__hd"></view> <!-- 主体 --> <view class="page__bd"> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">活动描述</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">产品信息</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">活动设置</view> </view> <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> <swiper-item class="activitydesc"> <view> <input class="question-title" placeholder="请输入活动标题" maxlength="40" placeholder-style="color:#b3b3b3;font-size:18px;" bindinput="handleTitleInput"></input> </view> <view class="toolbar" catchtouchend="format"> <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i> <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i> <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i> <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i> <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i> <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i> <i class="iconfont icon--checklist" data-name="list" data-value="check"></i> <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i> <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i> </view> <scroll-view scroll-y="true"> <view> <editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady"> </editor> </view> </scroll-view> </swiper-item> <swiper-item class="productinfo"> <view class="list">团购产品界面</view> </swiper-item> <swiper-item class="activitysetting"> <view class="list">团购设置界面</view> </swiper-item> </swiper> </view> <!-- 页脚 --> <!-- <view class="weui-footer">我是页脚</view> --> </view> wxss代码: @import "../common/assets/iconfont.wxss"; .swiper-tab { width: 100%; border-bottom: 2rpx solid #ccc; text-align: center; height: 88rpx; line-height: 88rpx; display: flex; flex-flow: row; justify-content: space-between; } .swiper-tab-item { width: 30%; color: #434343; /* border:1px solid #ccc; */ } .active { color: rgb(89, 246, 160); border-bottom: 4rpx solid rgb(89, 246, 128); } .swiper { text-align: center; } .activitydesc { height: 30pt; } .productinfo{ height: 30pt; } .activitysetting{ height: 30pt; } .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; width: 100%; height: 100%; font-size: 16px; line-height: 1.5; overflow: scroll; padding: 10px 10px 20px 10px; border: 1px solid #ECECEC; } .ql-active { color: #22C704; } .iconfont { display: inline-block; width: 30px; height: 30px; cursor: pointer; font-size: 20px; }
2020-12-13 - 微信小程序的富文本editor控件和其他控件在一个页面里的布局问题?
希望实现的小程序页面UI如图所示: [图片] “名称”输入框就是普通的文本输入框 “信息”编辑区域是一个富文本编辑区域,支持文字图片(最好有视频)混排。拟用小程序富文本editor(可惜不支持视频)实现。 先尝在https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 里的示例代码进行修改,但是发现editor控件貌似只能占满整个页面,其他控件如button只能叠加在editor控件之上,如下图我在开发工具模拟器截屏所示: [图片] 页面wxml如下,请赐教是什么原因按钮会跟editor控件叠加在一起? <view class="page"> <!-- 页头 --> <view class="page__hd"></view> <view class="page__bd"> <view class='wrapper'> <view class="toolbar" catchtouchend="format" style="bottom: {{isIOS ? keyboardHeight : 0}}px"> <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i> <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i> <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i> <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i> <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i> <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i> <i class="iconfont icon--checklist" data-name="list" data-value="check"></i> <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i> <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i> </view> <view class="container" style="height:{{editorHeight}}px;"> <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady"> </editor> </view> </view> </view> <!-- 页脚 --> <view class="weui-footer"> <!-- 提交表单按钮 --> <view class="weui-btn-area"> <button class="weui-btn btn-green" type="primary" bindtap="submitForm">提交</button> </view> 我是页脚 </view> </view>
2020-11-17 - 内网穿透配合真机调试效果wx.request总是失败?
老实说,在调试完成前还没花钱去租服务器和SSL证书,所以先暂时借用钉钉的内网穿透工具(https://github.com/open-dingtalk/pierced)桥接到内网的一台后端服务器上,这台后端centos服务器上只要运行: [aaa@~/test]./ding -config=./ding.cfg -subdomain=abcd 8080 客户端/微信小程序就可以通过 http://abcd.vaiwan.com或者https://abcd.vaiwan.com访问内网服务器上的后端服务了。 在开发PC/Win10上用微信小程序开发工具测试通过都没有问题。 然后在微信小程序后台把 abcd.vaiwan.com配上去,想通过真机进一步调测(通过体验方式,并未正式发布),却发现执行wx.request往后台服务器发送POST URL总是返回fail. 猜测是不是 vaiwan.com(阿里钉钉提供的域名)的SSL证书有问题,于是通过https://www.myssl.cn/tools/check-server-cert.html检查vaiwan的SSL: SSL服务器证书安装检查器abcd.vaiwan.com:443 获取的证书链如下: 证书1 证书使用者:vaiwan.com 证书颁发者:vaiwan.com 有效期:从 2018/3/16 到 2031/11/23 匹配域名:- 签名算法:sha256RSA 公钥长度:2048位 (RSA 算法)SHA1 指纹:6c 96 89 61 6c d2 97 a9 2f e5 d4 e4 8c e7 99 d7 49 0a 3b e9 SHA256指纹:44 28 a2 e0 0b 0c 58 1e 40 74 cb 55 3b 1a 50 68 b4 e0 7d 4f a9 cb c3 88 ad 22 5c d3 82 a0 64 03 证书来源:服务器返回的证书 状态:错误:无法验证证书的签名。 错误:非法证书不受信任 烦请用过类似方法的朋友帮忙确认一下是否是真机调试(Android机器)时SSL握手失败的原因导致wx.request返回fail? 如果是这个原因,请问还有没有其他方法在不租用公网服务器和购买SSL证书的前提下在真机上进一步调试的方法? 多谢!
2020-10-22 - 小程序开发完成把APPID从测试号换成正式的APPID,程序出现不能访问变量属性的错误?
开发者工具版本:Stable 1.03.2009140 之前开发时用的测试APPID,都没有问题,一切正常。但是开发完成准备上线把APPID换成正式的就会出现找不到属性的错误,猜测应该是开发者工具配置的问题? 错误截屏: [图片] 开发工具中项目本地设置截屏: [图片] 相关代码: 报错的对应代码是如下函数里的: app.globalData.userId=requst_success_res.data.data.userID 提示requst_success_res.data.data.userID属性未定义 ,完整函数如下,这个函数定义在第一页的index.js里面: /** * 用户登录请求封装(解决onlaunch和onload执行顺序问题) */ userLogin: function (userInfo) { var that = this; //定义promise方法 return new Promise(function (resolve, reject) { // 调用登录接口 wx.login({ /* ==================wx.login success start ================================================================== */ success: function (login_res) { if (login_res.code) { console.log("用户登录授权code为:" + login_res.code); //调用wx.request请求传递code凭证换取用户openid,并将用户信息发给后台,同步检查用户是否已经在后台有记录 wx.request({ // 后台请求用户openid并检查此用户是否已经注册 url: app.globalData.serverUrl+ "/login/wxlogin?code=" + login_res.code, method: "POST", data: { nickName: userInfo.nickName, gender: userInfo.gender, language: userInfo.language, city: userInfo.city, province: userInfo.province, country: userInfo.country, avatarUrl: userInfo.avatarUrl, }, header: { 'content-type': 'application/json' // 默认值 }, success: function (request_success_res) { console.log(request_success_res) console.log("wx.request返回成功") if (request_success_res.statusCode == 200) { //存入session缓存中 //wx.setStorageSync("userId", that.globalData.userId) //promise机制放回成功数据 //var obj = JSON.parse(request_success_res.data); app.globalData.userId = request_success_res.data.data.userId //报错在这行 console.log(app.globalData.userId) console.log("wx.request返回成功,后端返回成功 ") resolve(request_success_res); } else { console.log("wx.request返回成功,后端返回失败") reject('error'); } }, fail: function (request_fail_res) { reject(request_fail_res); wx.showToast({ title: '系统错误', duration: 2000 }) }, complete: () => { console.log("promise complete") } //complete接口执行后的回调函数,无论成功失败都会调用 }) } else { reject("error"); } } /* ==================wx.login success end ================================================================== */ }) }) },
2020-10-22 - 小程序页面显示的数据增删改后一般如何更新页面?
例如,后端数据库中有如下表: ================================================================= userid Name Mobile email 1 张三 13900118288 zhangsan@qq.com 2 李四 13677888909 lisi@qq.com 3 王二 135778899929 wanger@google.com ================================================================= 后端通过Restful API/JSON跟微信小程序前端交互,微信小程序前端调用wx.reqest去获取上述数据并在小程序里用组件如cell/slideview一行行通过某个页面(users.wxml)把数据显示给用户,然后用户在界面上进行增删改操作,例如删除某一行用户信息。界面相关的js代码调用后端操作从数据库中删除该用户行,此时小程序的界面逻辑一般是重新从后端数据库中加载数据并更新页面(users.wxml)还是在后端操作成功后直接修改本页面(users.wxml)的数据(this.setData)并更新页面(用什么方法?)? 前端小白,多谢赐教。
2020-09-30 - 为何mp-cell显示高度这么高,有没有办法挑战?
引用的是weui的cells/cell/slideview,wxml代码贴出如下 <view class="page__bd"> <view> <button class="weui-btn" style="width:100%;" type="primary">创建新分类</button> </view> <view> <scroll-view scroll-y="{{true}}" style="width: 100%; height: 100%;" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="white" refresher-background="lightgreen" refresher-triggered="{{triggered}}" bindrefresherpulling="onPulling" bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore" bindrefresherabort="onAbort"> <mp-cells ext-class="my-cells"> <block wx:for="{{bookmarks}}" wx:for-item="directory" wx:key="categoryId"> <block wx:if="{{directory.category.level!=0}}"> <mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap"> <mp-cell class="weui-slidecell" value="{{directory.category.categoryName}}" style="text-align: center; color:blue;"></mp-cell> </mp-slideview> </block> <block wx:for="{{directory.bookMarks}}" wx:for-item="bmlist" wx:key="bookmakId"> <mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap"> <mp-cell class="weui-slidecell" value="{{bmlist.bookmarkName}}"></mp-cell> </mp-slideview> </block> <button class="weui-btn" style="width:100%;" type="primary">创建书签</button> </block> </mp-cells> </scroll-view> </view> </view> 就是通过scroll-view/mp-cells/mp-cell/mp-slideview来分类显示书签,蓝色的是分类名称,黑色的是书签名 为什么我的每一行都显示那么高,能否做到每一行都适合文字高度呢? 截图如下显示的是小程序开发工具显示的效果: [图片]
2020-09-27 - code2session和Userinfo的encryption data 解密问题?
微信小程序前端页面通过登录按钮获得用户授权得到用户信息: 登录并在后端获取用户信息button> view> 前端JS代码把用户信息数据交给后端进行code2session获得session_key和openid, 并将加密数据传给后端进行解密(用session_key): onGotUserInfo: function(value) { console.log("刚进button回调:") console.log(value) wx.login({ //登录 success(loginres) { console.log("刚进wx.login:success回调:") console.log(loginres) //https://developers.weixin.qq.com/community/develop/doc/0008847a6240582c30c6fd81b56800 wx.getUserInfo({lang: value.detail.userInfo.language, success(usrres){ console.log("刚进wx.getUserInfo:success回调:") console.log(usrres) //获取loginres.code, usrres.encryptedData, usrres.iv数据传给后端 wx.request({ url: 'http://127.0.0.1:8080/login/wxlogin', method: "POST", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { code: loginres.code, encryptedData: usrres.encryptedData, iv: usrres.iv }, success(result) { console.log("登录成功"); console.log(result); }, fail() { console.log("失败"); } }) } }) }, fail() { console.log("登录失败"); } }) } 后端代码通过发送https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code获得openid, session_key json表达: {"session_key":"dOW1Wc*************************=","openid":"o4Jcd***********************SGC8w"} 注意这里微信API传回来的openid是全小写的(以上标红的部分) 而后通过session_key在后端解密前端传过来的encryption data(是加密了的json数据字符串),解密后如下: {"openId":"o4Jcd***********************SGC8w","nickName":"水水","gender":1,"language":"zh_CN","city":"Chaoyang","province":"Beijing","country":"China","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eq1V7C6Xwpa6em3hLAxjanqOCeIKTvn0KD4BJMqVDOYAbaN6BfEhoecchLMA0VNPWP4839OGxBofw/132","watermark":{"timestamp":1599579215,"appid":"wx1ef3*****93"}} 请问解密后的JSON字符串 openid里面的I又是大写的?(以上标红标粗) 这给我后端的处理代理不小的麻烦,因为调用了一个公共的处理类去处理从JSON到类的转换自动解析JSON字符串到POJO的类,因为字符串前后两次大小写不一致导致转换失败。请问这个是什么原因,如何规避?
2020-09-09