vue写习惯了，小程序太久不做，一些语法和api都忘记。本文总结下小程序常用的语法和api
语法
绑定事件和传参
绑定事件还有很多，触摸反馈事件，表单事件，媒体事件后续更新细说。
<!-- 绑定事件 bindtap 事件传参 data-参数名 -->
<view bind:tap="text" data-info="aaa">绑定事件</view>
text(e){
console.log('使用bindtap绑定事件触发',e.currentTarget.dataset.info);
}遍历
<!-- 循环 wx:key的作用和vue中类似 都是提高渲染效率，保证列表项状态的稳定的 -->
<view wx:for="{{demolist}}" wx:key="id">
<view>{{item.id}}---{{item.message}}</view>
</view>
demolist:[
{id:1,message:'aaa'},
{id:2,message:'bbb'},
{id:3,message:'ccc'},
]条件渲染
<!-- 条件渲染 -->
<view wx:if="{{isShow}}" style="color: red;">组件1</view>
<view wx:else="" style="color: blue;">组件2</view>
<button bind:tap="toggle">切换显示</button>
isShow:true
// 切换显示
toggle(){
this.setData({
isShow:!this.data.isShow
})
},页面跳转以及传参
接收参数在onLoad生命周期内，使用options接收。除了navigateTo外，还有reLaunch，redirectTo等也是实现页面跳转。后续更新细说它们之间的区别
<view bind:tap="toDetail">跳转detail页面</view>
toDetail(){
wx.navigateTo({
url: '/pages/detail/detail?myid='+123,
})
},
//detail页面
onLoad(options) {
console.log('options',options.myid);//123
}
生命周期
onReachBottom() {
console.log('页面滚动到底部触发');
},
onReady() {
console.log('页面加载完成触发');
},
onShow() {
console.log('页面显示触发');
},
//注意需要在json文件中去开启 enablePullDownRefresh设置为true
onPullDownRefresh() {
console.log('下拉刷新时触发');
},
onHide() {
console.log('页面隐藏触发');
},
onUnload() {
console.log('页面销毁时触发');
},
onPageScroll(e) {
console.log('页面滚动触发', e);
},
onResize(res) {
console.log('窗口尺寸发生变化触发', res);
},
onShareAppMessage() {
console.log('点击分享按钮触发');
},
onShareTimeline() {
console.log('点击右上角“分享到朋友圈”按钮时触发');
},
onAddToFavorites() {
console.log('点击右上角“收藏”按钮时触发');
},配置底部导航栏
底部导航栏的配置主要在小程序的全局配置文件app.json中完成，通过tabBar来设置底部导航栏，最多五个，最少两个。属性依次为文本颜色，文本选中颜色，背景颜色，边框颜色，导航栏信息
{
"pages": [
"pages/home/home",
"pages/index/index",
"pages/logs/logs",
"pages/detail/detail",
"pages/mine/mine"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"tabBar": {
"color": "#fff",
"selectedColor": "#FF5722",
"backgroundColor": "#22cfcf",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json"
}API
提示框
<button bind:tap="tip">提示框</button>
tip(){
wx.showToast({
title: '这是提示框',
icon:"error", //success loading error none
success:()=>{
console.log('提示框触发成功');
}
})
},加载loading
<button bind:tap="laoding">laoding</button>
laoding(){
wx.showLoading({
title: '加载中',
})
setTimeout(() => {
wx.hideLoading();
},1500);
},确认弹框
<button bind:tap="confrim">确认框</button>
confrim(){
wx.showModal({
title: '确认框',
content: '确定要执行吗',
complete: (res) => {
if (res.cancel) {
console.log("点击了取消");
}
if (res.confirm) {
console.log("点击了确定");
}
}
})
},上传图片/视频
<button bind:tap="choseImg">上传图片/图片</button>
choseImg(){
wx.chooseMedia({
count: 6, //最大上传个数
mediaType: ['image','video'], //image只能拍摄图片或从相册选择图片 video只能拍摄视频或从相册选择视频 mix 可同时选择图片和视频
sourceType: ['album', 'camera'], // album从相册选择 camera使用相机拍摄
maxDuration: 30, //拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。
camera: 'back', //back 使用后置摄像头 from 使用前置摄像头
// 成功回调
success(res) {
console.log(res.tempFiles[0].tempFilePath)
console.log(res.tempFiles[0].size)
}
})
}存储/读取本地数据
<button bind:tap="setToken">本地存储数据</button>
<button bind:tap="getToken">本地读取数据</button>
setToken(){
wx.setStorage({
key: 'userInfo',
data: {
name: 'John',
age: 25
},
success () {
console.log('数据存储成功')
}
})
},
getToken(){
wx.getStorage({
key: 'userInfo',
success (res) {
console.log('获取到的数据', res.data)
}
})
},发起请求
<button bind:tap="sendReq">发起请求</button>
sendReq(){
wx.request({
url: '请求地址',
// 参数
data: {
key: 'value'
},
// 请求方式
method: 'GET',
success (res) {
console.log(res.data)
},
fail (err) {
console.error(err)
}
})
},下载文件
<button bind:tap="downfile">下载文件</button>
downfile(){
wx.downloadFile({
url: '文件地址',
success (res) {
if (res.statusCode === 200) {
// 下载成功，保存文件
wx.saveFile({
tempFilePath: res.tempFilePath,
success (saveRes) {
console.log('文件保存成功', saveRes.savedFilePath)
}
})
}
}
})
},动态设置标题
<button bind:tap="setTitle">动态设置标题</button>
setTitle(){
wx.setNavigationBarTitle({
title: '新的页面标题'
})
},end
后续继续补充
