微信小程序bug和基础(3)

微信小程序网络连接失败

一直显示网络连接失败,百度查说是把防火墙关掉,再不行,在防火墙允许的应用里加上微信小程序
还是不行;
最后终于找到解决办法:
.1.win+r 输入cmd，打开命令提示符窗口
2.2.输入命令：

 netsh winsock reset

按回车键执行命令
3.根据成功后的提示，重启计算机
3-7.button

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

效果:

代码示意:

 <button>默认按钮</button>
 <button size='mini' >minni按钮</button>
 <button type='primary' >type 按钮</button>
 <button type='warn' loading plain>type 按钮</button>

属性:

1.size 控制按钮的大小

default 默认大小

mini 小尺寸

2.type 用来控制按钮的颜色

default 默认 灰色

primary 绿色

warn 红色

3.plain 按钮是否镂空，背景⾊透明

4.loading 加载

size的值:

type的值:

form-type的值:

open-type的值:

open-type的contact的实现流程

1.将⼩程序的appid由测试号改为⾃⼰的appid

2.登录微信⼩程序官⽹，添加客服 – 微信

3.为了⽅便演⽰，⽼师⾃⼰准备了两个账号

1.普通⽤⼾A

2.客服-微信B

4.就是⼲！

3-8.icon

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

属性:

1.type :图标类型

success,success_no_circle,info,warn,waiting,cancel,download,search,clear

效果:

2.size: 大小

3.color: 颜色

代码示意:

<!--pages/demo14/demo14.wxml-->
<icon type='cancel' size='60' color='pink'></icon>

3-9:radio

https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

可以通过 color属性来修改颜色

radio 需要搭配radio-group⼀起使⽤

代码示意

<!--pages/demo15/demo15.wxml-->
 <radio-group bindchange='handleChange'>
  <radio value='male' color='red'>男</radio>
  <radio value='female'>女</radio>
 </radio-group>
 <view>你选中的是{{gender}}</view>

// pages/demo15/demo15.js
Page({
    data: {
    gender:''
  },
  handleChange(e){
    //获取到单选框值
    let gender=e.detail.value;
    //把值赋值给data中的数据
    this.setData({
      gender
    })

  },
})

3-10.checkbox

https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

可以通过 color属性来修改颜色

checkbox需要搭配checkbox-group⼀起使⽤

代码示意:

<!--pages/demo16/demo16.wxml-->
<view>
 <checkbox-group bindchange='handlechange'>
  <checkbox value='{{item.value}}' wx:for='{{list}}' wx:for-key='id'>
    {{item.name}}
  </checkbox>
 </checkbox-group>
 <view>
  选中的数据{{checkList}}
 </view>
 </view>

// pages/demo16/demo16.js
Pages({
      data: {
    list:[
      {
        id:0,
        name:"苹果",
        value:'app'
      },
      {
        id:1,
        name:"葡萄",
        value:'grape'
      },
      {
        id:2,
        name:"香蕉",
        value:'banner'
      },
    ],
    checkList:[]
  },
    handlechange(e){
    // 1.获取被选中的复选框的值
    const checkList=e.detail.value;
    //进行赋值
    this.setData({
      checkList
    })
  },
})

4.自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

类似vue或者react中的自定义组件;

⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

4-1.创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

​ 可以在微信开发者⼯具中快速创建组件的⽂件结构

在⽂件夹内components/tabs，创建组件名为tabs

4-1-1: 声明组件

⾸先需要在组件的json⽂件中进⾏⾃定义组件声明

tabs.json

{ 
    "component": true
}

4-1-2;编译组件

​ 同时，还要在组件的 wxml⽂件中编写组件模板，在wxss⽂件中加⼊组件样式

​ slot插槽 ,类似vue中slot

​ tbs.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
    {{innerText}} 
    <slot></slot>
 </view>   

​ 在组件的wxss⽂件中编写样式

​ 注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器

​ tabs.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner { 
    color: red;
}

总结:

• 我学了小程序中的按钮radio CheckBox ,定义了自定义组件
• 还给大家分享了我遇到单位bug,这个bug困扰了我好久,找了好久才解决的, 希望能帮到大家