【无标题】

# 微信小程序



### 提示

```js
wx.showToast({ title: '成功!', icon: 'none' ,mask:true,icon:'success'});
```

#### 路由跳转

```js
wx.navigateTo({url:"aaa"});// 非tab页
wx.switchTab({url:"aaa"}); // tab页
wx.navigateBack(); // 回退
wx.navigateBack({ delta: 1, }) // 页面保留,不重载
```

```html
<navigator url="aaa" open-type="switchTab" ></navigator>
<navigator url="aaa" open-type="navigator" ></navigator>
```

### 双向绑定

- 单层

```html
<input model:value="{{value}}" />
```

- 多层

```html
<input bind:input="changeEvent" data-model="form.aaa" value="{{form.aaa}}" />
```

```js
// 引入
behaviors: [require("@/mixins/myFunction.js")],

// 具体方法
changeEvent: () {
  this.setData({
        [`${e.currentTarget.dataset.model}`]: e.detail.value
  })
}
```



### 动态样式

```html
<text class="title_item {{item.isActive?'active':''}} "
<view class="f-f1 f-jcc f-aic f-df" style="color: {{color['通过']}}">
<text class='{{index == flag ? "fgh2":"fgh"}}' />
```

### 列表渲染

```html
<view wx:for="{{arr}}" wx:for-index="id">
    <view>{{index}} , {{item}}  ,{{id}}</view>
</view>
```



### 组件

#### 新建组件

右键  -> 新建component

#### 组件注册: .json文件中

```json
{
  "usingComponents:{
         "goto":"/components/mycomp"
    }
}
```



#### 组件传递

```html
<!--父组件-->
<comp innervalue= "{{outvalue}}" bind:innerfunc="outfunc"/>
```

```html
<!--父组件-->
<input value= "{{innervalue}}"/>
<script>
  // 内部数据源定义
    property: {
    innervalue: {
      type: String,
      value: 123,
      observer: function (v) {// watch 观察者
        if (v === true) {}
            }
    },
    innerfunc: {
      type: Function,
      value: function() {}
  },
  // 触发外部方法
  add() {
      this.triggerEvent("innerfunc", {a:123})
  }
  
</script>
```

### 观察者 : watch

```js
  observers: {
    'columns, numberB': function(columns, numberB) {
      console.log(columns,111)
    }
  },
```



### 引用路径梳理

```js
 // app.json

"resolveAlias": {
    "~/*": "/*",
    "@/*": "/*"
  }

// 舍弃
"/" 开头就是绝对路径
"./" 开头是当前路径
```

### 混入 : mixin

- 页面page,与组件都可

```js
  behaviors: [require("@/mixins/myFunction.js")],
```

- 定义

```js
module.exports=Behavior(
  {
    methods: {aaa: function(){}}
  }
};
```



### 获取手机号弹窗

```html
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
```

### 滚动窗口 : scroll-view

```html
 <scroll-view
              scroll-x="{{ scrollable }}"
              scroll-with-animation="{{ scrollWithAnimation }}"
              scroll-left="{{ scrollLeft }}"
              class="{{ utils.bem('tabs__scroll', [type]) }}"
              style="{{ color ? 'border-color: ' + color : '' }}"
 ></scroll-view>
```







# vant组件

### 弹框 : dialog

```html
<van-dialog id="van-dialog" />
```

```js
import Dialog from '@vant/weapp/dialog/dialog';

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });
```



### 穿透

```html
<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />
```

### 日历

```html
<van-calendar color="#2D8CF0"  show="{{ show }}" type="range" bind:close="onClose" bind:confirm="onConfirm" />
```

### 分割线

```html
<van-divider />
```

### 双向绑定

```html
<van-field bind:change="changeEvent" data-model="form.aaa" value="{{form.aaa}}"
```

```js
changeEvent: () {
  this.setData({
        [`${e.currentTarget.dataset.model}`]: e.detail
  })
}
```



### 搜索 : search

```html
<van-search value="{{ value }}" shape="round" background="#fff" bind:change="onChange"  placeholder="请输入搜索关键词" />
```

```js
onChange(e) {
    this.setData({
      value: e.detail,
    });
  },
```





### 图片 :  image

```html
<van-image custom-class="imageCenter" round width="30rpx" height="30rpx" src="/image/用户@3x.png" />
```

### 下划线

```html
<van-divider />


```



### 按钮

```html
<van-button bind:click="aaa" size="small" type="danger" bindtap="sure">确定</van-button>
<van-button size="small" type="info" class="f-ml20" plain bindtap="cancle">取消</van-button>
<van-button bind:click="aaa" size="small" type="primary" bindtap="sure">绿色实心</van-button>
```

```js
cancle() {
  this.setData({show12: false})
},
  sure() {
    this.setData({show12: false})
  },
```





### 表单

```html
<van-cell title="单元格" title-class="aaa" >
  <view style="width:800rpx;">
    <van-radio-group value="{{ radio }}" direction="horizontal" bind:change="onChange">
      <van-radio name="1"  custom-class="bbb">单选框 1</van-radio>
      <van-radio name="2">单选框 2</van-radio>
    </van-radio-group>
  </view>
</van-cell>
```

```js
onChange(event) {
  this.setData({
    radio: event.detail,
  });
},
```

### 输入框

```html
  <van-field
    value="{{ username }}"
        left-icon="contact"
    label="用户名"
    type="text"
    autosize
    readonly
    icon="question-o"
    placeholder="请输入用户名"
    bind:click-icon="onClickIcon"
  />

<!-- 自定义样式 -->
 <van-cell required title="计划跟进方式" title-class="aaa">
        <view style="width:800rpx;">
          <van-radio-group value="{{ form.visitMode }}" bind:change="onChange3">
            <van-radio custom-class="f-mb15" name="上门/面谈">上门/面谈</van-radio>
            <van-radio custom-class="f-mb15" name="客户来访">客户来访</van-radio>
            <van-radio custom-class="f-mb15" name="电话">电话</van-radio>
            <van-radio custom-class="f-mb15" name="聊天工具">聊天工具</van-radio>
          </van-radio-group>
        </view>
      </van-cell>
```





### Popup弹出层

```html
bind:click="showPopup11"
```

```html
<van-popup
  show="{{ show111 }}"
  round
  closeable
  position="bottom"
  custom-style="height: 80%"
  bind:close="onClose111"
><view style="padding: 32rpx 40rpx 32rpx 40rpx;">
   <van-picker show-toolbar columns="{{ [1,1,1,1] }}" bind:change="onChange11" value-key="shortName" bind:cancel="onCancel11" bind:confirm="onConfirm11" />
</view>
</van-popup>

```

```js
Page({
  data: {
    show111: false,
  },

  showPopup11() {
    this.setData({ show111: true });
  },

  onClose11() {
    this.setData({ show111: false });
  },
  onConfirm11(e) {
    const {
      picker,
      value,
      index
    } = e.detail;
    this.setData({
      show111: false
    });
    
    this.setData({
      "id": value.companyId
    })
  },  
  onCancel11() {
    this.setData({
      show111: false
    });
  },
});
```











 "navigationBarTitleText": "工作台"

<navigator hover-class='none' url="/pages/“></navigator>



<van-dropdown-menu>

 <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />

 <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />

</van-dropdown-menu>



### 下拉搜索

```html
<van-cell required title="请选择客户" title-class="aaa">
<search label="name" bind:sync="searchSure" url="/effsic/partner/queryPartnerList.web"></search>
  </van-cell> 
```









```js
Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)
  }
})                                                     
```





```text
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN 
```

### 自定义组件

- $text  接收输入框的输入值

- label :展示的字段值

```html
<search 
        label="projectName" 
        bind:sync="searchSure1" 
        url="/effsic/project/searchProject.web" 
        placeholder="无关联" 
        param='{{ {partnerId: form.partnerId, projectName: "$text"} }}'>
</search>
```