小程序记录

一、使用缓存

wx.setStorageSync("key","value")
wx.getStorageSync("key")
//value可以是任何数据类型

web中
localStorage.setItem("key","value")
localStorage.getItem("key")

二、小程序使用es7配置步骤

1. 在⼩程序的开发⼯具中，勾选 es6转es5语法
2. 下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js
 //https://raw.githubusercontent.com/facebook/regenerator/5703a79746fffc152600fdcef46ba9230671025a/packages/regenerator-runtime/runtime.js 
3. 在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去
4. 在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）

import regeneratorRuntime from '../../lib/runtime/runtime';

三、使用es7的async解决异步

async test(){
    const res = await request({url:"........."}) //无数据返回不执行下面的
    //再做需要res的操作
}

四、页面跳转时传参

 

//页面中的onLoad周期接收
 onLoad: function (options) {
    console.log(options)
 },

五、引入组件

在components目录新建子组件mintest
在父页面中
json:
{
  "usingComponents": {
    "mintest": "../../components/mintest/mintest",
  },
}
html:

六、父组件传值给子组件

父组件中：


子组件中:
js
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

七、子组件传值给父组件

子组件调：
this.triggerEvent("tabsItemChange",{index})

父组件中：
heml：

js
tabsItemChange(e){

}

七、点击事件传值

八、页面下拉和上拉刷新

  onReachBottom(){ //上拉
    console.log("触底")
    if (this.params.pagenum >= this.totalPages){
      wx.showToast({title:"没有更多数据！"})
    }else{
      this.params.pagenum++
      this.getGoodsList()
    }
  },
  onPullDownRefresh: function () { //下拉 
     this.setData({
       goods_list:[]
     })
     this.params.pagenum = 1
     this.getGoodsList()
  },

九、css控制文字显示两行

 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp:2


//只显示一行
overflow: hidden;
white-space: noerap;
text-overflow: ellipsis;

十、显示html富文本

十一、正则表达式替换

let str= 'sdafdsafasdf.webp'
str.replace(/\.webp/g,'.jpg')
//.webp苹果不能识别

十二、轮播图点击，图片全屏预览

1、给轮播图绑定点击事件
wx.previewImage({
      current:'', //当前显示的图片链接
      urls:[] //图片链接组成的数组
})

十三、获取用户地址

    wx.chooseAddress({
      success:(res)=>{
        console.log(res)
      }
    })


    wx.getSetting({  
      success:(res)=>{
        const scopeAddress = res.authSetting["scope.address"]
        if (scopeAddress === true || scopeAddress===undefined){//判断用户是否拒绝过
          wx.chooseAddress({
            success: (res2) => {
              console.log(res2)
            }
          })
        }else{ 
          wx.openSetting({ //拒绝过则打开设置页面
            success:(res3)=>{
              wx.chooseAddress({
                success: (res4) => {
                  console.log(res4)
                }
              })
            }
          })
        }
      }
    })

十四、获取用户信息、电话号码、地址

//获取用户信息 getUserInfo


//获取是否拒绝过
wx.getSetting
//获取用户地址
wx.chooseAddress
//再次打开授权页面
wx.openSetting

十五、微信支付

1、必须要有企业号

1、获取token

wx.requestPayment

十六、上传图片

    wx.chooseImage({
      count:9,
      sizeType:["orifinal","camera"],
      sourceType:["album","camera"],
      success: function(res) {
        console.log(res)
        this_.setData({
          chooseImage: [...this_.data.chooseImage,...res.tempFilePaths]
        })
      },
    })

十七、用promise封装请求

let ajaxtime=0
export const request=(params)=>{
  let header = { ...params.header}
  if(params.url.includes("/my/")){
    header["Authorization"]=wx.getStorageSync("token")  
  }
  ajaxtime++;
  const baseUrl = "https://api.zbztb.cn/api/public/v1"
  return new Promise((resolve,reject)=>{
    wx.showLoading({
      title: '正在加载',
      mask:true

    })
    wx.request({
      ...params,
      header: header,
      url: baseUrl + params.url,
      success:(res)=>{
        resolve(res.data.message)
      },
      fail:(error)=>{
        reject(error)
      },
      complete:()=>{
        ajaxtime--
        if (ajaxtime==0){
          wx.hideLoading()
        }
      }
    })
  })
}