微信小程序踩坑笔记
来源:互联网 发布:caffe windows github 编辑:程序博客网 时间:2024/06/05 16:26
https请求
请求必须是https
微信小程序要求请求的url必须是https协议
请求的url要在微信公众平台配置
在开发时我们很可能用到本地服务器调试
可以在开发工具的 项目–>基础配置 中设置不校验域名:
使用的url携带参数必须用encodeURI方法编码
在wx.request()方法中的url如果携带参数需编码,即将参数拼接起来组成url,然后再使用encodeURI方法。
如果不这么做,在开发工具调试的时候可能不会报错,但是到真机模拟的时候就会出错,报错码是400,即无效的请求。
swiper的高度问题
首先要想设置swiper的高度,只能在wxml中标签中使用css内联样式使用height属性。因为swiper被底层css加了样式,如果在wxss中设置则不会起效果。
<swiper style="height:500px;"></swiper>
另外在iOS系统中的swiper不支持flex-grow属性,即使在内联样式中设置了flex-grow:1;swiper也不会自动占满剩余空间,而在安卓系统中则可以生效。
所以当要在iOS系统中设置swiper占满剩余空间时需要计算出剩余空间的高度并转换成px,将其设置为swiper的高度。
中英文字体表现不一致,无法对齐的问题
先看个例子
<view><text>项目名称</text> <text>{{project.name}}</text></view>
我们想实现的效果是项目名称标签和值之间用一个空格隔开,我们当然想让两者水平对齐。
可是我们会发现,当project.name值为纯中文的时候两者可以对齐,当project.name中包含英文或数字的时候两者无法对齐。
这是因为我们第一个text为纯中文,也就是说纯中文和混杂了英文或数字的text无法水平对齐。
像这种两个text无法对齐的情况我们可以很好的解决。就是用一个text将两者都包含进来。
<view><text><text>项目名称</text> <text>{{project.name}}</text></text></view>
这样两者就是一个整体也就自然会对齐。这种方法适用范围较小,因为这样两者的样式很难控制。
再看个例子
为了看的更明显我将两者的图标设置为一样的了。这两者的css样式完全一致,可是仔细看会发现左边的图片往下偏移了一点,为了证明这一点可以用线来标明一下:
可以看到左边的图标确实往下来了一点,这并不是我们想要的。当然还要说一句,每个图标和下面的文字作为一个整体来表现的,这是硬性需求,不然可以将图标做一行,文字再做一行。
为了证明是中英文字的原因,可以看下图:
当我们在左边文字中加入数字时表现就和右边一致。
这就给了我们一个思路,我们要做的就是隐藏我们加入的那个 <text>1</text>
,只要让用户看不到就行了,即:
<text> <text style="position:relative; left:-9999px;">1</text> <text>{{currentType.name}}</text></text>
于是改为<text style="position:relative; top:-999px;">1</text>
。
同时我们还要将整个文字往左偏移以居中显示。虽然麻烦了一点,但是解决了问题。
<text> <text style="position:relative; left:-9999px;">1</text> <text style="position:relative; left:-4px;">{{currentType.name}}</text></text>
这种方法的适用性广一些,但是有点麻烦。
input输入框回车自动清空
因为在微信中没有document对象,所以我们想要实现input输入框回车清空就有些困难。
index.wxml
<input type="text" placeholder="添加任务..." bindconfirm="addTask" value="{{inputValue}}" />
首先我们需要一个placeholder,然后绑定回车事件,这样在回调函数中通过e.detail.value可以获取输入内容。而清空输入框即让它的value为空,在回调函数中将inputValue设置为空即可。
但是还有个问题,我发现input在真机上的placeholder在获取焦点和没获取焦点的时候表现有所不同。
这就是说我们没有点击input的时候有一个placeholder,而我们点击的瞬间这个placeholder的样式变了,具体表现为向上移动了一点,这样就会造成输入框中的placeholder向上闪了一下。
虽然这样的placeholder看起来有点难受,但是我还没有找到什么好的解决办法,暂时也只能这样了。
Android和iOS渲染效果不同
开发工具、Android和iOS由于渲染引擎不同,所以同样的页面渲染出来的效果由细微的差异。
所以一定要多在不同真机上测试,做到都能兼容。
举个例子:
index.wxml
<view id="taskName"> <text>任务名称</text> <textarea placeholder="请输入任务名称" /> </view>
我们需要一个text和一个textarea,想要实现的效果是两者并排,但是textarea我们想让它高一些,并且两者顶部对齐。
于是我们采用flex布局让实现我们的效果,可是我们会发现即使用了
#taskName { display: flex; flex-direction: column; justify-content: flex-start;}
textarea中的文字顶部还是会低于text中文字的顶部,所以我们会想让textarea向上偏移一些。
可是我们调整偏移距离的时候会发现,在安卓上显示的两者顶部对齐了,在iOS上两者顶部就没有对齐,反之亦然。
遇到这种情况我们只能根据实际需要来选择怎么实现。如果非要安卓和iOS上都表现完美,可以通过检测当前系统来让偏移距离动态调整。
开发工具中的表现与真机的表现有差异,需用真机测试
模块的导出和引入
以index页面引入MD5模块为例
pages/index/index.js
引入
var md5 = require("../../utils/md5.js")
使用
var safePassword = md5.encode(inputPassword)
而在utils/md5.js中
function encode(input) { ... return output}module.exports.encode = encode
注意一定要在md5.js中导出才能在其他地方引用
json配置文件
app.json中pages的配置,顺序很重要,第一个默认的是启动后显示的页面。
app.json
{ pages: [ 'pages/index/index', ... ], tabbar: { color: 'white', ... }, window: { navigationBarBackgroundColor: 'black', ... }}
page.json 由于在页面中只能配置当前页window,所以默认的就是配置page的window。而不能像app.json那样配置page和tabbar等对象
index.json
{ "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "登录"}
- 微信小程序踩坑笔记
- 【笔记】微信小程序wxss之各种坑
- 微信小程序笔记
- 微信小程序学习笔记
- 微信小程序笔记
- 微信小程序小笔记
- 微信小程序笔记
- 微信小程序学习笔记
- 微信小程序入门笔记
- 微信小程序笔记
- 微信小程序开发笔记
- 微信小程序笔记心得
- 微信小程序笔记
- 微信小程序学习笔记
- 【笔记】微信小程序
- 【笔记】微信小程序
- 微信小程序学习笔记
- 微信小程序基础知识笔记
- Java中Map常用方法总结以及遍历方式的汇总
- The Festive Evening
- SQL的 SELECT 字段 FROM 表 WHERE 某字段 Like 条件
- Delphi(Pascal)线程执行任务
- nyoj 460 项链(区间DP)
- 微信小程序踩坑笔记
- MySQL笔记三
- 《大话数据结构》学习笔记(三)
- 【ArcGIS/Java】利用ArcGIS的java API连接SDE库、sql操作
- 获取本地IP地址2
- 一次性批量插入数据库时,导致CPU使用率突然很高,无法成功执行插入
- HttpClient 实际小应用
- USB驱动之主机控制器驱动
- QT学习记录二 (windows窗口创建过程)