小程序学习

MVVM
M:Model->data
V：View
VM:ViewModel

1.view:

• 类比html的div和p

2.text

• 类比html的span
• selectable:长按选中
• decode：可以转义字符

3.button：

• type:primary(绿色)/default(灰色)/warn（红色）
• form-type：submit/reset //在form表单
• open-type：getUserInfo/getPhoneNumber/contact（联系客服）
• 绑定事件： bindgetuserinfo=“getUserInfo”/bindgetphonenumber=“getPhoneNumber”/bindcontact=“getContact”

4.checkbox:

• 多选框 ：value真实值

5.radio:

• 单选框 必须放在radio-group中

6.block：

• 标签块，其本身不会渲染到页面，只有内部标签渲染到页面 相当于html的template

7.input:

• type:password,text,number
• placeholder: placeholder=“number” placeholder-style=“color:red” placeholder-class=“ph-style”
• disabled禁用/maxlength/

8.事件：bind: /catch:(防止冒泡)

• bindtap->click 传值：data-val=‘1’ data-type=“2” //const {val,type}=event.currentTarget.dataset
• bindinput->change

currentTarget:当前点击标签 target事件冒泡触发

9.data:{msg:1}

• 读取data里的数据 在页面中{{msg}}
• 改变data里的数据 在方法里this.setData({msg:‘哈哈’})

10.富文本标签展示：

• 屏蔽事件 ,可以在msg2上绑定class和style

11.弹框：wx.showToast({}) (加载动画) / wx.showModal(提示弹框) /wx.showActionSheet(上滑弹框)
icon:success/loading/none

  showAlert(){
    wx.showToast({
      title:'加载中',
      icon:'success',
      duration:2000
    })
    wx.showLoading({
      title: '加载中',
      duration:2000  //不加时间一直显示
    })
    setTimeout(function(){
      wx.hideLoading()
    },2000)

   wx.showModal({
      title:'提示',
      content:'提示弹框',
      success(res){
        if(res.confirm){
          console.log('确认',res);
        }else{
          console.log('取消',res);
        }
        
      },
      
    })
    
   wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success (res) {
        console.log(res.tapIndex)
      },
      fail (res) {
        console.log(res.errMsg)
      }
    })
	
  },

12.路由跳转

• wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页
• wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用
• wx.navigateBack 可以返回到原页面。
• wx.navigateBack：关闭当前页面，返回上一页面或多级页面
• wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.reLaunch：关闭所有页面，打开到应用内的某个页面

  <navigator url='/pages/index/index'>跳转到首页</navigator>
  <button bindtap="navi">跳转</button>

  navi(){
    wx.navigateTo({
      url: '/pages/index/index?id=1',  //?传参
    })
  },
  
  onLoad(options){
     console.log(options);//接收参数
  }

13.前后端交互

 getData(){
    var vm=this;
    wx.request({
      url: 'url',
      success(res){
        var data=res.data;
        vm.setData({
          jobs:data
        })
        console.log(vm.data.jobs);
      }
    })
  },

14.组件间传值 this.triggerEvent

• 子组件

	bindtap='clear'

   clear(){
       this.triggerEvent('search', {cancel: true});
   }

• 父组件

   bind:search="onSearch"

   onSearch({detail}) {
     this.setData({
       keywords: detail.cancel ? '':detail
     })
     this.getList();
   },

15.小程序引入Echarts层级很高。

• 微信开发者工具是这样，真机预览没有这个问题