微信小程序-零碎笔记

条件渲染

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指代的页面。

官方文档