微信小程序开发常用语法和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设置为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

后续继续补充