小程序记录

Myth丶恋晨 2023-06-22 05:25 1阅读 0赞

一、使用缓存

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的操作
    }

四、页面跳转时传参

<navigator url="/pages/goods_list/index?cid={
       {item2.cat_id}}"></navigator>
    
    //页面中的onLoad周期接收
     onLoad: function (options) {
        console.log(options)
     },

五、引入组件

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

六、父组件传值给子组件

父组件中：
    <mintest tabs="{
       {tabs}}"></mintest>
    
    子组件中:
    js
      properties: {
        tabs:{
          type:Array,
          value:[]
        }
      },

七、子组件传值给父组件

子组件调：
    this.triggerEvent("tabsItemChange",{index})
    
    父组件中：
    heml：
    <mint bindtabsItemChange="tabsItemChange">
    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富文本

<rich-text nodes="{
       {goodsObj.goods_html}}"></rich-text>

十一、正则表达式替换

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
    <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">
    
    //获取是否拒绝过
    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()
            }
          }
        })
      })
    }

小程序记录

发表评论取消回复

还没有评论，来说两句吧...

相关阅读