微信小程序

模板语法

声明变量和vue一样

Page({
  data: {   // 在data中声明数据
	num:1
  },
  tap(){//事件处理函数，页面级中是跟data同级的
  },
  onShow: function () {     //生命周期函数--监听页面显示
  	this.data.num;    // 获取变量
  	 this.setData({   // 在小程序中修改变量需要提交 setData 才可以修改
      num:2
    })
  },
})

<!-- 在标签中使用变量需要 {{}} 包裹变量 -->
<view>{{num}}</view>  

<!-- 微信中的for 循环  wx:for="{{list}}"，循环的数组，也需要{{}},默认数据当前的变量名为item，
可以通过 wx:for-item 来修改，默认下标是 index ,使用 wx:for-index  修改， wx:key类似于vue中的
key值 ,当循环对象的时候,item就是键值对的值,index就是键值对的键值 -->
<view wx:for="{{list}}" wx:for-item="its" wx:for-index="ind" wx:key="index"></view>

<!-- wx:if ,为true是加载DOM,反之不加载 ,true不加{{}}会被渲染成字符串， -->
<view wx:if="{{true}}">{{num}}<view>
<!-- 错误语法演示，微信小程序中 变量的{{}} 是不能与""之间有空格的，页面是不报错的，但是会在渲染的时候出问题 -->
<view wx:if="{{true}} ">{{num}}<view>
<!-- wx:elif 相当于 else if  -->
<view wx:if="{{num==1}}"> 1</view>
<view wx:elif="{{num==2}}">2</view>
<view wx:else>3</view>

<!-- hidden判断是否显示DOM，通过控制css样式display控制， false时显示，true隐藏 -->
<view hidden="{{false}}">{{njum}}</view>

获取从DOM，传递过来的参数

<!-- 1. dom 向js，传递数据需要依靠自定义属性 data-变量名="传递的数据" -->
<!-- 2.设置id-->
<view data-index="顺其自然" bindtap="tap" id=''> 顺其自然 </view>

  tap(e) {
    console.log(e.currentTarget.dataset.index); // 1.通过.dataset.自定义的变量
    //来获取数据，bindtap点击事件 bindinput键盘按下事件,
    // 2.通过e.currentTarget.id 获取
  },

tabBar 配置

TabBar 配置 中的list 要么不配置 ，配置的话最少2项最多5项
wx.showTabBarRedDot ；index 控制 显示 tabBar 某一项的右上角的红点 的下标
wx.setTabBarBadge index 控制要修改或添加内容 TabBar 的下标 ***text***修改或添加的内容
wx.removeTabBarBadge index 控制要移除 tabBar 某一项的右上角的红点 的下标

 "tabBar": {
    "color": "#000000", //字体颜色
    "selectedColor": "#000000",//选择的字体颜色
    "list": [{
      "pagePath": "pagePath",//要去的那个页面路径
      "text": "text", // 展示文字
      "iconPath": "iconPath",//未选中时的图片路径
      "selectedIconPath": "selectedIconPath"//选中时的图片路径
    }]
  }

自定义 tabBar

 "tabBar": {
 	"custom":true, // custom 是否使用自定义tabBar
 	  "list": [{  //虽然是自定义tabBar但是这个list,以及里面的参数还是必不可少的
      "pagePath": "路径",//这个路径不能胡写,要与你自定义的tabBar的数据符合,
    }]
  }

修改完tabBar配置之后,在项目的根目录下新建一个 custom-tab-bar文件夹,在文件夹中新建一个components组件,命名为index,用 position: fixed;把要展示内容定在底部,跳转页面用wx.switchTab({})

解决从tabBar页面进入tabBar高亮问题,需要在每个tabBar页面中写以下代码

  onShow() {
    const tabBar = this.getTabBar() // this.getTabBar() 可以拿到自定义组件的数据，通过tabBar.setData({}) 修改数据
    tabBar.setData({
    '控制高亮的数据':'值'
    })
  }

catchtap 阻止事件冒泡

bindconfirm 回车事件

动态设置当前页面标题，wx.setNavigationBarTitle({title:“标题”})

路由跳转

wx.navigateTo() 跳转非 tabBar页面, 传递参数用字符串拼接
wx.redirectTo() 关闭当前页面打开非 tabBar页面,可以参数
wx.reLaunch() 关闭所有页面非 tabBar页面,可以传参
wx.switchTab 跳转 tabBar 页面 不能传参 tabBar
在json文件 ，配置 tabBar 中的页面，就是tabBar 页面

    wx.navigateTo({  //做一个实例其他三个写法一样
      url: 'url?id=' + 11,// 小程序传参只能以字符串拼接在路劲后面的形式传参,格式是 'url?id=11' 
      //的形式,如需传递多个参数格式为 `url?id=11&index=22`,使用 & 拼接起来，这里用的是es6模板
      //字符串的格式,不建议传对象，但是如果你非要传，那您可以在传的时候进行   转化json字符串
      // JSON.stringify()   取得时候在通过 JSON.parse() 转回来即可
    })

onLoad ， 页面级函数，官方定义的页面加载后调用一次,他有一个参数，能获取页面传递的数据

  onLoad: function (options) {//这里的 options 就是我们传递过来的数据
    console.log(options);  //先打印一下看一看数据，有没有传递过来，查看数据格式
    },

wx.navigateBack() 返回页面 ，delta 决定要返回的页面层数

wx.navigateBack({
  delta: 0,  // delta 决定要返回的页面层数,0和 1 都代表一层 , 为0时，可以不写delta属性，
  //  getCurrentPages()  用于获取当前页面栈的层数,他返回的是一个数组,数组的长度-1, 就是返回首页
  //层级数  getCurrentPages() 直接这样调用就行，这是官方给我们提供的
})

下拉刷新与上拉加载更多

下拉刷新：首先在页面级json或者全局json中的window字段配置：enablePullDownRefresh:true,开启
下拉刷新，backgroundTextStyle:light,下拉 loading 的样式，仅支持 dark / light，light时，下拉的三个
点位白色的,背景颜色默认也是白色所以会看不见,backgroundColor:’#eee’ ,backgroundColor是配置
下拉显示内容的区域的背景颜色， 为 dark 时，三个点的颜色为灰色，是可见的,

{  //app.json ,全局json
  "window": {
    "backgroundTextStyle": "light",
    "onReachBottomDistance": 100,
    "enablePullDownRefresh": true,
    "backgroundColor": "#f3f3f9"
  },
}
// 页面级json 
{
  "enablePullDownRefresh": true,
  "backgroundColor": "#f3f3f9"
}

上拉加载：小程序以及配置好了,我们最对最需要在json文件中的，window字段配置，页面上拉
触底距离,单位默认为px , 我们只写个数字即可 ,onReachBottomDistance ：10 ,

  onPullDownRefresh: function () { // onPullDownRefresh 函数就是监听下拉触发事件
	 wx.startPullDownRefresh({  //手动调用下拉刷新
      success: (res) => {},
    })
    wx.stopPullDownRefresh({   //关闭下拉刷新
      success: (res) => {},
    })
  },
  onReachBottom: function () { // onReachBottom 函数就是官网提供给我们监听上拉加载更多的事件函数
  },

小程序提供的提示api

wx.showModal({}) 可交互的模态框
wx.showLoading({}) 显示加载中的动画 ，title:‘提示内容’,配合hidewx.Loading({})关闭,不关闭的他会一直显示
wx.showToast({}) 轻提示，icon:"succsee"一个对号，error一个感叹号，loading

  wx.showModal({
        title:'标题',
       content:'主题内容',
       success(){//成功的回调函数
         console.log('1111');
       },
       fail(){ // 失败的回调函数
         console.log('222');
       },
       complete(r,e){ // 无论成功还是失败的回调函数
         console.log(r,e);
       }
    })

拖拽

拖拽在微信小程序中官网也给直接定义好了组件，直接拿来用就好了

<movable-area class="movable-area">
  <movable-view class="movable-view" x="" y="" direction="all" bindchange=""></movable-view>
</movable-area>

收货地址api chooseAddress

  wx.chooseAddress({
     success: (result) => {}, // result 就是用户保存之后的地址
     fail:()=>{}
   })

获取用户信息api, wx.getUserProfile({})

图片预览api wx.previewImage

wx.previewImage({
  urls: [],//预览图片地址的数组
  current:'',//展示第一张图片
})

选择图片

    wx.chooseImage({})
    ```

## 数据缓存
>有两种同步缓存 wx.setStorageSync 和 异步缓存 wx.setStorage 存储的数据是以键值对的形式 ，存储的在微信开发者工具，调试器区域的 Storage 中
```javascript
 //同步
 wx.setStorageSync('key值','value值')；//同步 存储
 wx.getStorageSync('key值');  //取  
 wx.removeStorageSync('key值'); //删除
 wx.clearStorageSync(); // 删除所有存储在Storage中的数据
 //异步
 wx.setStorage({key:'',data:''}); //存
 wx.getStorage({key:'key值',success:(res)=> // res.data 就是我们要取的值  }) 
 wx.romoeStorage({key:'key值'})//删除
 wx.clearStorage(); // 删除所有存储在Storage中的数据

getApp() 获取app.js数据

app.js中的数据,我们可以通过 getApp() 进行获取,修改

const app=getApp()
console.log(app) // 就可以获取,修改不需要通过setData()
// globalData 是 app.js 存放数据的,我们自己也可以随意定义，也是可以获取到的

setDate性能优化

     	//当上拉加载    this.data.pagenum 请求对应的页码
     	//setData 是对页面重新渲染 会影响性能，当数据小的数据，我们感觉不到，数据大了问题就展现出来了
       this.setData({//解决问题的方式
          ['gooodslist[' + (this.data.pagenum - 1) + ']']: res.data.message.goods,
          total: res.data.message.total
        })

<!-- 对应的模板文件 -->
<view wx:for="{{gooodslist.length}}" wx:key="index">
  <shop wx:for="{{gooodslist[index]}}" wx:for-item="its" wx:for-index="ind" wx:key="ind" item="{{its}}">
  </shop>
</view>

微信小程序提供的动画

 var animation = wx.createAnimation({  //实例
      duration: 1000,//持续时间
      delay：0.//延迟时间
      timingFunction: 'ease',//动画运动方式
    })
    animation.scale(2,2).rotate(45).step() //进行运动的过程都是css属性 step() 一组动画结束
    this.setData({
      animationData:animation.export()；//通过 export 暴露出去
    })
   // 页面标签 中使用 animation=”{{暴露的变量}}“

小程序背景音乐

const audio = wx.getBackgroundAudioManager()  // 获取背景音乐实例
    function play() {
      audio.title = '音乐标题'
      audio.src = '音乐地址'
      audio.onEnded(() => {//自然播放结束后，重新调用次函数，实现背景音乐一直存在 pause，暂停 play，播放
        play()
      })
    }

自定义组件

1.先在根目录创建一个components文件，放我们的组件，2.在新建一个tabs放组件的内容
3.在新建好的tabs文件下右击，找到新建components,输入tabs,组件就建好了，

{ //组件的json,配置 "component":true
  "component":true  //代表这是个一个组件
}

在页面级.json “usingComponents”: {“自定义标签名”:“组件路径”} ；注册，页面中使用 标签

{  //引入
  "usingComponents": {
    "tabs": "/components/tabs/tabs"
  }
}

父传子,通过,自定义属性名=“传递的数据”， 在子组件中 properties: { }，里接受，子传父，
通过调用父组件传递的自定义事件,把要传递的>数据携带上，父组件传递自定义事件
格式：bind自定义事件=“事件”，子组件通过 this.triggerEvent(‘事件名’, 要携带的参数参数)；
并传递参数,子组件的方法要写在，method:{}中,页面级的事件，是跟data平级的，

<!-- 页面中使用 -->
<tabs list="{{list}}" bindchange="tap"></tabs>

//组件js
Component({
  properties: {
   list:null,//接受传递过来的数据
  },
  methods: {
    tap(){
      this.triggerEvent('change',1) //调用父级传递的自定义事件，并携带参数,可以是对象
    }
  }
})

  tap(e) { //父组件传递的自定义事件的处理函数，通过形参的形式接受数据
    console.log(e.detail); //打印看数据格式
  },

自定义组件的插槽，这里我就接着以上面的基础上写了
默认插槽，在组件中加入一些内容，子组件通过放一个标签既可以展示，但是只能展示在一个地方
具名插槽和vue中用法一样 ，我们可以给slot标签起一个name值，父组件中通过 slot属性
找到要放位置的name,即可，但是小程序如果要使用具名插槽需要.在jsz中加上这个
options: { multipleSlots: true, }, 和data 同级 ,具名插槽才可以生效

<!-- 具名插槽，这是父组件，控制多个多展示的内容，放在我们想要的位置 -->
<tabs liat="11" bindchange="tap">
  <view slot="dow">早</view>
  <view slot="up">晚</view>
</tabs>

<!-- 子组件 -->
<slot name="dow"></slot>
<slot name="up"></slot>

//字组件js
Component({
  options: {
    multipleSlots: true
  },
})

组件的数据监听，observers，

  observers: {
    'liat'(){  //list也可这样写，这样写['liat']，list就是我们要监听的数据，可以监听传递过来的，
    //也可以监听，自己本身data中的数据,
      console.log('22');
    }
  },

promise封装request

const Base_URL = '公共地址'
export default function (parms) {
  return new Promise((resolve, reject) => {
    wx.showLoading({
      title: '加载中...',
    })
    wx.request({
      url: Base_URL + parms.url, // 数据请求接口
      method: parms.method || 'GET', // 请求的方式
      data: parms.data, // 传递的数据
      header: {  // 设置请求头
        'Authorization': (wx.getStorageSync('userinfo')).token // 
      },
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      },
      complete: () => {
        wx.hideLoading({})
      }
    })
  })
}