小程序问题汇总
表哥建议下 学习小程序的记录
wx.FileSystemManager().readFile 不能直接读取本地文件, 仅能获取临时目录下的文件
须临时目录下文件存在， 现写入一个hello.txt
onLoad(){
const fs = wx.getFileSystemManager();
fs.writeFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, 'hello, world', 'utf8');再才能对hello.txt进行读取
onLoad(){
const fs = wx.getFileSystemManager();
let a = fs.readFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, 'utf-8');
console.log(a);目前还不支持离线文件的读写
单文件组件与页面数据互传
- 在单文件组件中声明占位符：数据类型， 默认值
- 在单文件组件的绑定事件中将数据(或修改)抛出,
triggerEvent('事件名'，参数), - 页面中调用组件定义属性， 属性名为占位符， 绑定事件名为组件中抛出的事件名
循环下，按钮控件文本长度不一， 居中后边框对不齐
循环元素层级下:
width:80%循环下，按钮控件文本长度
缩略版文字
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;button组件hover-class中三元表达式的使用，引起hover-class属性绑定到class属性中
1. 可以将数据刷新绑定到另一个事件， 通过另一点击事件来刷新页面数据
2. 再wrap一层， 将hover-class写成静态， 把条件控制流提到外层
image组件正常显示，需带上子元素或是同级元素
<view>
text
<image></image>
</view>
<!-- or -->
<view>
<image>text</image>
</view>navigator不能直接重定向至tabBar的页面
<navigator url='/pages/index/index' open-type="switch"></navigator>
自定义tabBar
最好直接将官方是示例组件直接拷进来改， 很容易出bug， 文件名改成别的再改回来都会出报错， 风险极高，
自定义tabBar容易引起样式异常，字体忽大忽小，要更多实现个人风格的tabBar还是应该尽量从头自己写组件， 当页面元素不是特别复杂时，可以将tabBar的几个页面转为组件，然后再一个页面里引用
block标签内hidden不能使用， 可以使用条件wx:if
hidden的内容已经被渲染，只是隐藏了而已，wx:if则是满足条件才渲染，tab来回切换会有加载的抖动， 考虑页面内标签切换稳定及流畅可以使用hidden 考虑渲染的时间成本可以使用wx:if控制流
图片flex布局居中失效
有时候写图片样式会发现一些布局没反应， 可以尝试在外面包一层view
标签选择器也是， 有时候直接.tag-name样式会加不上去， 定义class名往往可以解决
气泡对话框外框
空content+单方向border-posiotion构造三角形，通过背景色的三角形覆盖+偏移，以在矩形框添加对话框朝向，伪类:before向下偏移，:after向上偏移
.class-name:before {
border-top-color: #e2647f;
border-width: 28rpx;
right: 17%;
margin-left: -10rpx;
top: 100%;
}
.class-name:after {
border-top-color:#fff;
border-width: 24rpx;
right: 18%;
margin-left: -10rpx;
top: 100%;
}swiper滑动翻页
通常用来轮播图的翻页， 整个页面滑动直接将页面组件移动至swiper-item下即可 将页面填满
.swiper{
height: 100vh;
padding-top: 0rpx;
}onLoad 异步函数与占位符更新
场景：onload时获取单词， 并用次单词随机初始化选项，若是在onLoad中分两步异步一个函数， setOption一个函数，则在setOpiton中会无法及时更新data占位符的值， 正确的做法是把setOption函数wrap到异步函数中， 这样才能保证代码的顺序执行，数据的更新会在单词获取后
js初始化长度为n的数组
let n = 12;
let showDetails = Array.from({length: n}, ()=> false);
console.log(showDetails);js重写Object，Function， toString方法
Object
Object.prototype.toString = function(){
let s = '';
Object.keys(this).forEach(k => s += k + this[k] + ' ');
return s;
}
a = {'n.': '重量'};
console.log(a.toString());Function
String.prototype.originalToString = String.prototype.toString;
String.prototype.toString = function(){
if(this.originalToString().length>10){
return "您输入的字符串过长bai";
}
else{
return this.originalToString();
}
}
console.log("123456789012".toString());
组件与页面目录下js文件类的外面不要放代码， 里面太长容易看漏而引起bug
对async返回的promise对象， 要获取其内部值，请直接在then方法内部进行赋值
js中年月日大小比较
将时间置0后, 无需重写运算符直接比较即可
d = new Date().setHours(0,0,0,0);串与数的数值判断
!isNaN('1') == true
!isNaN('12a23') == false
单选框、复选框样式需在页面样式重写
在组件内重写的单选框样式会被页面的覆盖， 应将复选框样式在页面样式里进行重写
组件重叠
// 父组件
position: relative;
// 子组件
position: absolute;弹性布局宽度会被压缩， 显示的扩展width