本文已参与「新人创作礼」活动，一起开启掘金创作之路。
好了，上朝！
定义数值一般在对应的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>
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>
表单组件：
<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();
好了，本次教程到此结束，如本疑问，请找啊码，如果觉得好，给个一键三连就再好不过啦！退朝
