微信小程序-零碎笔记

条件渲染

wx:if="{{}}"

列表渲染

1
<view wx:for="{{array}}">{{item}}</view>

定义item的名称

1
2
3
4
5
6
7
8
9
10
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" wx:key="i">
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" wx:key="j">
<block wx:if="{{i <= j}}">
<view>
{{i}} * {{j}} = {{i*j}}
</view>
<text></text>
</block>
</view>
</view>

template 模板

1
2
3
4
5
6
<template name="article">
<view>{{title}}</view>
<view>{{content}}</view>
</template>

<template is="article" data="{{...article}}"></template>

定义js并导入

定义

1
2
3
4
5
6
7
8
var foo = "helloworld";
var bar = function() {
return "bar hello";
}
module.exports = {
foo:foo,
bar:bar
}

导入

1
2
3
4
5
6
<wxs src="./comm.wxs" module="tools"></wxs>

<view>
{{tools.foo}}
{{tools.bar()}}
</view>

hidden属性

1
<view hidden="{{age > 18}}">display</view>

wx.request

1
2
3
4
5
6
7
8
9
10
11
12
wx.request({
url: 'https://ali-waihui.showapi.com/list',
header:{
"Authorization":"APPCODE 304ffe6ab77f4373b22129bba6cdcb53"
},
success:(res)=>{
console.log(res);
let keyArr = Object.keys(res.data.showapi_res_body).filter(item=>item!='ret_code'&&item!='showapi_fee_code');
console.log(keyArr);
this.setData({moneyArr:keyArr,moneyObj:res.data.showapi_res_body});
}
})

rpx

自适应尺寸单位,规定屏幕宽度为 750rpx

事件

  • bindtap: 及 click

event 为事件的对象, 其中的 target 记录触发事件的元素的信息

触发事件后添加样式

1
{{item==currentHave && 'active'}}

路由

跳转页面的方法有wx.navigateTo()this.pageRouter.navigateTo()

前者相对于当前页面, 后者相对于this指代的页面。

官方文档