定义数值一般在对应的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();