微信小程序入门使用及常见问题整理（例如：scroll-view 横向滑动不生效）

常用功能同vue的对比

1、数据绑定

Vue :src=“imgSrc”
Xcx: src=“{{imgSrc}}”

2、列表渲染

Vue v-for=“item in items”. 每项数据是{{item}}
xcx wx:for=“{{items}}” 每项数据是{{item}}

3、显示和隐藏

Vue v-if、v-show
Xcx: wx-if、hidden

4、事件处理

vue @click、冒泡:@click.stop
xcx bindtap=“事件名” catchtap=“事件名”

5、数据绑定

vue v-model=“reson”
xcx 方法里面加bindReson(e){this.setData({resin:e.detal.value})} //这个e其实就是绑定方法的数据bindReson(e){}

6、取值

Vue this.reson
Xcx: this.data.reson

7、事件传参

vue @click=“bindReson(’tomi’)"
Xcx 不提倡方法传参数、使用属性data-id=“{{item.id}}” 然后方法里面通过e.currentTarget.dataset.*

问题

1、scroll-view 横向滑动不生效原因

• 父组件必须设置宽度且设置不换行
  [width: 100%;overflow: hidden;white-space: nowrap;]
• 子元素必须是行内元素[display:inline-block]

2、使用onshow初始化页面,路由返回页面之后页面会重新加载,使用onload就不会重新加载

3、关于盒子宽度(设置宽度样式兼容的坑巨多)

• 一般情况不设置100%的宽度,否则就算设置了
  box-sizing:border-box margin值也会超出
• 需要宽度设置的能不设置就不设置,小程序会默认宽度是100%

4、路由跳转设置参数会被解析截断

• 最好的方式是使用onload(options)将参数获取使用

5、navigateTo在点击多次之后就会失效

• 后来查阅资料发现navigateTo只会保留5层，所以就索性将全部换成了wx.redirectTo()；
• tabar里面的页面无法在内部进行跳转

6、变量直接赋值失败

有时候会数据初始化失败

this.data.detail = foodLists.foodList[id];
// 修改成这种形式即可
this.setData({detail: foodLists.foodList[id]});

参考

https://segmentfault.com/a/1190000015684864