微信小程序学习笔记

黄啊码

发布于 2021-09-26 10:39:05

4090

发布于 2021-09-26 10:39:05

文章被收录于专栏：黄啊码【CSDN同名】

定义数值一般在对应的js文件里边的data

注：字符串和花括号之间不能存在空格，否则会导致识别失败

例如：<checkbox ischeck=" {{flag}}"></checkbox> 这样识别出来，就算flag=false，也会识别成true

关于运算：花括号内是可以加表达式的，比如{{1+1}}，显示2，而{{}‘1’+‘1’}}，则显示：11，同理三元表达式，复杂的表达式if之类的也同样适用

循环： list:[{ id:1, username:'张三' },{ id:2, username:'李四' }], <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id"> <text>{{item.username}}</text> <text>{{index}}</text> </view> 默认情况下item和index不指定，微信也会默认指定名称叫做item和index，当然只允许一层循环的情况下 wx:key是来提高列表渲染的性能，注意是唯一值，当wx:key="*this" ，这里表示当前数组是普通数组，如[1,2,3,4],但当key写错时，程序是不会报错的【如下】，只不过以后修改元素时会报一些莫名其妙的错误

block标签，写代码的时候标签存在，渲染的时候自动移除

条件语句以及是否隐藏

<view wx:if="{{10%2==0}}">1212</view> <view wx:elif="{{9%2==0}}">1212</view> <view wx:else>1212</view> <view>--------------------------</view> <view hidden="{{true}}">2w34</view> <view hidden="{{false}}">2w34</view>

区别在于hidden在代码里依然能够查到，那么什么时候用if什么时候用hidden呢？

答：非频繁切换使用if，频繁切换使用hidden

当然hidden也可以使用style="display:none"替代

事件绑定

实现文本框数字的加减 bindtap，需要注意函数不能直接加括号之类的，操作需要用data-operation

<view>{{num}}</view> <button bindtap="handletap" data-operation="{{1}}">+</button> <button bindtap="handletap" data-operation="{{-1}}">-</button> handletap(e){ var operation=e.currentTarget.dataset.operation; console.log(operation); this.setData({ num:parseInt(this.data.num)+parseInt(operation) //这里记得需要转换类型 }) }, 注意：错误写法：this.data.num=XXX 或者this.num=XXX

尺寸单位

rpx是按比例自适应的，参考值是750

比如在750下，200rpx：200px=1：1

在375下，200rpx：200px=1：2，如下

引入微信样式：@import 只支持相对路径

选择器，通配符*无效，比如以下

margin:0;

}

{}里的内容无效，只能用.class名称或者标签名称，比如view之类的

各种ICON

<view class="container">
  <view class="icon-box">
    <icon class="icon-box-img" type="success" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">成功</view>
      <view class="icon-box-desc">用于表示操作顺利完成</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="info" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">普通警告</view>
      <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">强烈警告</view>
      <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="waiting" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">等待</view>
      <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success_no_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_已选择</view>
      <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_未选择</view>
      <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="warn" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">错误提示</view>
      <view class="icon-box-desc">用于在表单中表示出现错误</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">单选控件图标_已选择</view>
      <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="download" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">下载</view>
      <view class="icon-box-desc">用于表示可下载</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="info_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于在表单中表示有信息提示</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="cancel" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">停止或关闭</view>
      <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="search" size="14"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">搜索</view>
      <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
    </view>
  </view>
</view>

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

表单组件：

<form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section section_gap">
        <view class="section__title">switch</view>
        <switch name="switch"/>
    </view>
    <view class="section section_gap">
        <view class="section__title">slider</view>
        <slider name="slider" show-value ></slider>
    </view>

    <view class="section">
        <view class="section__title">input</view>
        <input name="input" placeholder="please input here" />
    </view>
    <view class="section section_gap">
        <view class="section__title">radio</view>
        <radio-group name="radio-group">
            <label><radio value="radio1"/>radio1</label>
            <label><radio value="radio2"/>radio2</label>
        </radio-group>
    </view>
    <view class="section section_gap">
        <view class="section__title">checkbox</view>
        <checkbox-group name="checkbox">
            <label><checkbox value="checkbox1"/>checkbox1</label>
            <label><checkbox value="checkbox2"/>checkbox2</label>
        </checkbox-group>
    </view>
    <view class="btn-area">
        <button formType="submit">Submit</button>
        <button formType="reset">Reset</button>
    </view>
</form>

用e.detail.value获取表单提交的值

Page({
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function() {
    console.log('form发生了reset事件')
  }
})

结果如下：

日期选择器，下拉列表，同样用picker

<view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>

const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1 ; i <= 12; i++) {
  months.push(i)
}

for (let i = 1 ; i <= 31; i++) {
  days.push(i)
}

Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 2,
    days: days,
    day: 2,
    year: date.getFullYear(),
    value: [9999, 1, 1],
  },
  bindChange: function(e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

效果如下：

navigator注意事项

1、navigator 对应的 url 必须配置在app.json的pages中；

2、navigator 对应的 url 不能配置在"tabBar"的"list"里面了，负责无法跳转，因为tabBar的跳转需用switchTab进行；

微信小程序弹窗

1、纯文本提示
   wx.showToast({
      title: '纯文字弹窗',
      icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
      duration: 2000     
    })  

2、取消确认提示
 wx.showModal({
      title: 'confirm的弹窗',
      content: '确认要删除该项吗？',
      success: function (res) {
        if (res.confirm) {  
          console.log('点击确认回调')
        } else {   
          console.log('点击取消回调')
        }
      }
    })

3、成功提示
wx.showToast({
      title: '成功提示弹窗',
      icon: '',     //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
      duration: 2000,      //停留时间
    })

4、自定义图标弹窗
 wx.showToast({
      title: '自定义图标弹窗',
      image: '../../static/image/icon.png',  //image的优先级会高于icon
      duration: 2000     
    })

5、加载中提示
wx.showLoading({
      title:'加载中...'
    });

6、带蒙层的弹窗
wx.showToast({
      title: '带蒙层的弹窗',     
      duration: 2000,    
      mask:true    //是否有透明蒙层，默认为false 
                   //如果有透明蒙层，弹窗的期间不能点击文档内容 
    })
7、有列表弹窗
wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success: function (res) {
        console.log(res);
      }
    })

隐藏 wx.hideToast（）
wx.hideLoading（）

小程序调用组件js方法

页面调用组件

<address-window id="address-window" ></address-window>

组件js方法

getAddressList:function(){}

页面调用组件js方法

this.selectComponent('#address-window').getAddressList();

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/07/07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

php

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

php

登录后参与评论

0 条评论

热度

微信小程序学习笔记

微信小程序学习笔记

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐