微信小程序开发常用语法和api

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设置为trueonPullDownRefresh() {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 nonesuccess:()=>{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

后续继续补充