微信小程序超详细基本知识

微信小程序

常见组件

小程序的常⽤布局组件: view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等
常见组件前六种可以看我前面发的内容, 链接

1.7 button

在wxml文件中写标签和功能, js文件中查看接收的数据 , 模拟器上查看数据

// 在wxml文件中写标签和功能
<!-- 
  button 标签
  1.外观的属性
    1) size 控制按钮的大小
      default 默认大小
      mini 小尺寸
    2) type 用来控制按钮的颜色
      default 灰色
      primary 绿色
      warn    红色
    3) plain 按钮是否镂空,背景色透明
    4) loading 名称前是否带 loading 图标
 -->
 <button>默认按钮</button>
 <button size="mini"> mini 默认按钮</button>
 <button type="primary"> primary 按钮</button>
 <button type="warn"> warn 按钮</button>
 <button type="plain"> plain 按钮</button>
 <button loading type="default"> default 按钮</button>

 <!-- 
   button 来发功能
   open-type:
    1.contact   打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact 回调中获得具体信息
    2.share     转发当前的小程序 到微信朋友中 不能把小程序分享到 盆友圈中
    3.getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
    4.getUserInfo  获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
    5.launchApp  在小程序中直接打开 APP
    6.openSetting  打开授权设置页 // 现版本要在真机模拟才可以实现效果
    7.feedback     打开“意见反馈”页面
  -->
  <button open-type="contact">contact</button>
  <button open-type="share">share</button>
  <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
  <button open-type="launchApp">launchApp</button>
  <button open-type="openSetting">openSetting</button>
  <button open-type="feedback">feedback</button>

// js文件中查看接收的数据
Page({
  getPhoneNumber(e){
    console.log(e)
  },
  getUserInfo(e){
    console.log(e)
  }
})

属性	类型	默认值	必填	说明
size	string	default	否	按钮的⼤小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景⾊透明
disabled	boolean	false	否	是否禁⽤
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	⽤于 组件，点击分别会触发 组件的 submit/reset 事件
open-type	string		否	微信开放能⼒

size 的值 :

值	说明
default	默认⼤小
mini	小尺⼨

open-type 的值 :

值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact 回调中获得具体信息
share	转发当前的小程序 到微信朋友中 不能把小程序分享到 盆友圈中
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp	在小程序中直接打开 APP
openSetting	打开授权设置页 // 现版本要在真机模拟才可以实现效果
feedback	打开“意见反馈”页面

open-type 的 contact的实现流程 :

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

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

---

1.8 icon

在wxml文件中写标签和功能, 模拟器上查看最终结果

// 在wxml文件中写标签和功能
<!-- 
  小程序的字体图标
  1.type 图标的类型 success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  2.size 大小
  3. color 图标的颜色
 -->
 <icon type="success" size="60" color="#0094ff"></icon>

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	con的⼤⼩
color	string		否	icon的颜⾊，同css的color

---

1.9 radio

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

在wxml文件中写标签和功能, 在js文件中写逻辑,模拟器上查看最终结果

// 在wxml文件中写标签和功能
<!-- 
  radio 单选框
  1. radio标签 必须要和父元素 radio-group 来使用
  2.value 选中的单选框的值
  3.需要给 radio-group 绑定 change事件
  4.需要在页面中显示 选中的值
  5.可以使用color来改变颜色
 -->
 <radio-group bindchange="handleChange">
  <radio color="pink" value="男">男</radio>
  <radio color="pink" value="女">女</radio>
 </radio-group>
<view>您选中的是:{{gender}}</view>

// 在js文件中写逻辑
Page({
  data: {
    gender:""
  },
  handleChange(e){
    // 1.获取单选框中的值
    let data = e.detail.value;
    // 2.把值 赋值给 data中的数据
    this.setData({
      gender:data
    })
  }
})

---

1.10 checkbox

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

在wxml文件中写标签和功能, 在js文件中写数据和逻辑,模拟器上查看最终结果

// 在wxml文件中写标签和功能
<view>
  <checkbox-group bindchange="handleitemChange">
    <checkbox wx:for="{{list}}" wx:key="id" value="{{item.value}}">
      {{item.name}}
    </checkbox>
  </checkbox-group>
  <view>
    选中的水果:{{checkedList}}
  </view>
</view>

// 在js文件中写数据和逻辑
Page({
  data: {
    list:[
      {
        id:0,
        name:'苹果',
        value:'apple'
      },
      {
        id:1,
        name:'葡萄',
        value:'grape'
      },
      {
        id:2,
        name:'香蕉',
        value:'bananer'
      }
    ],
    checkedList:[]
  },
  handleitemChange(e){
    // 1.获取被选中的复选框的值
    const checkedList = e.detail.value;
    // 2.进行赋值
    this.setData({
      // 和checkedList:checkedList 一样的效果
      checkedList
    })
  }
})

---

小程序的生命周期

小程序的生命周期分为 应用的生命周期 和 页面的生命周期

1.1 应用的 生命周期

属性	类型	必填	说明
onLaunch	function	否	监听⼩程序初始化。
onShow	function	否	监听⼩程序启动或切前台。
onHide	function	否	监听⼩程序切后台。
onError	function	否	错误监听函数。
onPageNotFound	function	否	页面不存在监听函数。

1.2 页面的 生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发

---

注意

小程序的生命周期分为 应用的生命周期 和 页面的生命周期

总结

• 博主今天的文章写了小程序的生命周期和常见组件剩下的几个组件

• 博主只是归拢了一些小程序的知识点, 更加详细的知识点请移步到 官方网站