小程序笔记

最新推荐文章于 2023-08-10 11:26:20 发布

杨女士YRJ

最新推荐文章于 2023-08-10 11:26:20 发布

阅读量500

点赞数

分类专栏：小程序笔记文章标签：小程序

本文链接：https://blog.csdn.net/qq_59790851/article/details/119212397

版权

小程序笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

##——————模态窗口友好提示————————

1.添加购物车成功（无按钮）

wx.showToast({

title: '添加成功',

})

2.添加购物车成功（有按钮）

wx.showModal({

title:'购物车提示',

content:'您确定将它加入购物车嘛'

})

##————获取当前元素身上的属性值

1. e.currentTarget.id

##————更改tar 选中的颜色

"selectedColor": "#e42857",

##页面跳转传值

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

A：传值页面

wx.navigateTo({

url: `/pages/detail/detail?newObj=${id}`

})

B：接收页面

onLoad: function (options) {

console.log(options.newObj)

this.setData({

id : options.newObj

})

}

页面跳转传参

//A页面   把此时循环的id传过去

 <navigator  
  wx:for="{{item1.children}}" 
  wx:for-item="item2" wx:key="cat_id"  

  open-type="navigate"
  url="/pages/goods_list/goods_list?cid={{item2.cat_id}}" 
 >

</navigator>

//B页面  在接收参数页面  接收

  onLoad: function (options) {
    console.log(options)
  },

##—————————————————定义一个主色调——————————

1.在app.wxss 里面

**/* 定义主题颜色 */**

page{

--color:#ed4450;

}

2. 在要使用的页面里

page{

color:var(--color)

}

##—————————————————自定义组件———————

1.建一个放组件的文件夹

2.谁用组件就在谁的json 文件里面引用

{
  "usingComponents": {
    "searchinput":"../../components/searchinput/searchinput"
  },
  "navigationBarTitleText": "首页"
}

"组件名":"../../组件路径"

wx接收数据接口

1.第一种最最简单的原生微信

onLoad() {
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success:(res)=>{
        // console.log(res)
          this.setData({
            swiperlist:res.data.message
          })
      }
    })
}

2.Promise 技术进行接收

export const request=(res)=>{ 
  return new Promise((resolve,reject)=>{//resolve成功的回调   reject失败的回调

   const baseurl = 'https://api-hmugo-web.itheima.net/api/public/v1' //因为接口路径有很多共同//的，所以把共同的给拿出来

    wx.request({

      ...params,

      url:baseurl + params.url,  //  把公共的url  和  传递过来的url路径进行拼接

      success:(ressult)=>{
        resolve(ressult)
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}

在index.js文件里面用写上

接着在
要请求数据的文件里面

request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})

    .then(result =>{

      this.setData({

                swiperlist:result.data.message

      })

    })

【里面的网址是接口的网址】

选择器

p:nth-last-child(-n+4){
  border-left: 10rpx solid #fff;
}

//选择的是倒数4个

scroll-view 可以分块滑动的视图 ==>scroll-y 必要属性

scroll-top="0" 设置当前视图距离最上方的距离

使用本地存储

/*
      0。web中的本地存储  和小程序的本地存储区别
        （1）web
              存值：loacalStorage.setItem('key','value')  loacalStorage.getItem('key')
              获取值：wx.setStorageSync('key', data) wx.getStorageSync()
        （2）存入的时候，类型有没有转换
              web：都被转换为字符串
              小程序:存什么，还是什么
      1.先判断是否右旧数据
      2.没  发送请求  ——————》(要记得存入数据)
      3.有  同时没有过期就还用旧数据
*/

第一步：存 datil--》是请求数据用的

 datil(){
    request({url:'https://api-hmugo-web.itheima.net/api/public/v1/categories'})
    .then(result=>{
      this.cates = result.data.message
// 把接口的数据存入到本地存储中
     wx.setStorageSync('cate', {time:Date.now(),data:this.cates})
    }


第二步：取
  // 1获取本地存储
   const cates = wx.getStorageSync('cate')

第三步：判断 是否存在数据或者没有存在数据


if(!cates){//不存在发送请求数据
    
    this.datil()
  }else{
    // 判断是否过期   Date.now()时间窗   1000*10 秒为单位
    if(Date.now()-cates.time>1000*10){  //在这里设置的是10秒后自动过期，要在从新发送请求
        this.datil()

      }else{//没有过期可以使用旧数据
        this.cates = cates.data;
        let leftlist = this.cates.map(v=>v.cat_name)
        let rightlist = this.cates[0].children
        this.setData({
          leftlist,
          rightlist
        })
      }

怎么上拉加载下一页的数据

用户上滑可以加载下一页数据

1.找到滚动条触底事件（去微信开发文档找）

2.判断是否有下一页数据

能获取数据总页数和当前的页码

总页数 = Math.ceil(总条数/页容量)

==》？当前大于总，就没下一页

3.有加载下一页

（1）当前页 ++ （2）重新发送请求（3）请求数据回来要对数组进行拼接而不是替换！！！

4.没有弹出提示

  onReachBottom(){}

2.得出3页

  const result = await request({url:'/goods/search',data:this.QueryParams});
// 拿到总条数 换算成总页数
  const total = result.total  //23

  this.sum = Math.ceil(  total/this.QueryParams.pagesize)   //23除10

3.当前页数大于总页数，就没下一页的数据

onReachBottom(){
    if(this.QueryParams.pagenum>=this.sum){
      wx.showToast({
              title: '到底了呢',
        })
    }else{
      // console.log('有')
    }
  }

//有  加载下一页

    （1）当前页 ++  （2）重新发送请求  （3）请求数据回来 要对数组进行拼接  而不是替换！！！

onReachBottom(){
    if(this.QueryParams.pagenum>=this.sum){
      wx.showToast({
              title: '到底了呢',
        })
    }else{
      // console.log('有')
      this.QueryParams.pagenum++;   //页面数++
      this.datil();    //调用请求数据的函数
    }
  }

最后，对所页面 ++ 获得出来的数据对原本的数组进行拼接

关键代码：

// 对数组进行拼接
goodList:[...this.data.goodList,...result.goods]

async datil(){
  const result = await request({url:'/goods/search',data:this.QueryParams});
// 拿到总条数 换算成总页数
  const total = result.total
    this.sum = Math.ceil(  total/this.QueryParams.pagesize)
    console.log(this.sum)


  // console.log(result)
  this.setData({
    // goodList:result.goods
    // 对数组进行拼接
    goodList:[...this.data.goodList,...result.goods]
  })
    
  }

用户下拉，添加刷新功能

https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.stopPullDownRefresh.html

/* 下拉刷新步骤

1. 在json 添加配置项

关键代码

"enablePullDownRefresh":true,
"backgroundTextStyle": "dark"

{
  "usingComponents": {
    "searchinput":"../../components/searchinput/searchinput",
    "tabs":"../../components/tabs/tabs"
  },
  "navigationBarTitleText": "商品列表",
  "enablePullDownRefresh":true,
  "backgroundTextStyle": "dark"
}

2.下拉触发功能事件

onPullDownRefresh(){ }

3.重新把数据清空在进行请求数据数组清空

4.重置页码页码重置为1

  // 下拉刷新的代码
  onPullDownRefresh(){
    // 清空数组
    this.setData({
      goodList:[]
    })
    // 页码为1
    this.QueryParams.pagenum=1;
    //重新发送请求
    this.datil(); 
    
  }

5.关闭下拉刷新的窗口，【在请求完毕之后，自动的关闭刷新窗口】

// 关闭刷新的代码
  wx.stopPullDownRefresh()

请求数据成功前有加载成功后加载页面消失

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

关键代码

wx.showLoading({

title: '加载中',

mask:true

})

关闭加载窗口

wx.hideLoading()

完整代码应用场地展示：以下代码是一个请求接口的封装代码请求前进行加载，

let ajaxTimes = 0;
export const request=(params)=>{
  wx.showLoading({
    title: '加载中',
    mask:true
  })

  return new Promise((resolve,reject)=>{
    ajaxTimes++
    
    const baseurl = 'https://api-hmugo-web.itheima.net/api/public/v1'
    wx.request({
      ...params,
      url:baseurl + params.url,
      // 成功执行的代码
      success:(result)=>{
        resolve(result.data.message);
      },
      // 失败执行的代码
      fail:(err)=>{
        reject(err);
      },

      // 成功或者不成功都会执行的代码
      complete:()=>{
        ajaxTimes--;
        if(ajaxTimes===0){
          
          wx.hideLoading()
        }
      }
    })
  })
}

添加使用客服 / 分享功能

<button open-type=" share "> </button> 分享

<button open-type=" contact "></button> 客服

添加地址

aa(){
    wx.chooseAddress({
      success: (result) => {
        console.log(result)
      },
    })
  }

添加地址的完整代码

handaddress(){

    // wx.chooseAddress({

    //   success: (result) => {

    //     console.log(result)

    //   },

    // })

    // 获取权限状态

        wx.getSetting({

          success:(result)=>{

            // 获取权限  属性名怪异的都要用 []  括号括起来

            const scopeAddress = result.authSetting["scope.address"]

            if(scopeAddress === true || scopeAddress === undefined){

              wx.chooseAddress({

                success: (result1) => {

                  console.log(result1)

                },

              })

            }else{

              wx.openSetting({

                success: (result2)=>{

                  wx.chooseAddress({

                    success: (result3) => {

                      console.log(result3)

                    },

                  })

                },

              })

            }

          }

        })

  }

用forEach() 进行遍历

car.forEach(v=>{
      if(v.check){

        allsum += v.goods_price * v.num
        allnum += v.num
      }else{
        allcheck =false;
      }
    })

获取到 data-id = 'id'

const id = e.currentTarget.dataset.id;

const {id,hownum} = e.currentTarget.dataset;

多选按钮进行的数据切换

实现步骤

* 商品的选中

* 1.绑定change事件

* 2.拿到car数组

* 3.获取到当前商品的对象 data - id 拿

* 4.对当前对象的check 进行取反

* 5。所有总价格全选结算数量进行更改

handcheck(e){
    // 拿到对象
    const id = e.currentTarget.dataset.id;
    // 拿到数组
    const {car} = this.data;
    // 通过id找到对象 的索引
    const item = car.findIndex(v=>v.goods_id == id)
    car[item].check = !car[item].check
    
    // 调用封装好的改数据的代码
    this.setCart(car);
    
  },

后续

支付页面的实现逻辑

9.点击支付事件的绑定

1.判断收获地址？

2.判断是否选择商品？都ok 则跳转

3.跳转支付页面

支付页面的实现流程逻辑

*支付页面实现的思路

1.在onShow 里面渲染所有的数组数据

2.进行过率

过滤条件：（check 在购物车页面中就是true的保留其余的删除）

3.过滤了之后，把数据给data 但是不需要给缓存中因为购物车页面里面的数据不能被破坏

问题反馈-----------删除图片

 // 删除img
    clearimg(e){
      // 拿到图片的id
      const id = e.currentTarget.dataset.id
      // 获取图片数组 
      const {addimage} = this.data
      // 根据id  把数组的img 进行删除   addimage.splice(id,1)  删除谁？id 删除几个 ？ 1个
      addimage.splice(id,1)
      // 最后在赋值回给data
      this.setData({
        addimage
      })
    }

怎么上传文件

      // 不为空将文本+图片上传到专门的图片服务器，返回外网链接，整合外网收到的imgurl 上传到服务器，跳转上一页
      // 使用 wx.uploadFile  不能很多个图片上传 只能一个个上传所以，要便利
      // 正在加载中的
      wx.showLoading({
        title: '正在上传中',
        mask:true,
      })

      if(addimage.length !=0){
        addimage.forEach((v,i)=>{
          wx.uploadFile({
            // 被上传的文件路径
            filePath: v,
            // 名称 后台用来获取数据用的名称  
            name: 'file',
            // 图片要上传到哪？ 外网链接 借用的新浪图床
            url: 'http://example.weixin.qq.com/upload',
            // 附带的文本
            formData:{},
            success: (result) => {
              // 把返回的外网 img 给url
              let url = JSON.parse (result.data).url;
              // 把收到的进行整合
              this.urlimg.push(url)
  
  
              // 当所有的图片转换整合完毕 进行上传到服务器  
              if(i==addimage.length-1){//判断 i 索引 == 是否整合完毕
  
                // 关闭正在加载
                wx.hideLoading();
  
                // 重置页面
                this.setData({
                  texvalue:'',
                  addimage:[]
                })
  
                // 上传  模拟上传 
                console.log('成功上传完毕')
                // 跳转上一页
                wx.navigateBack({
                  delta: 1,
                })
              }
            }
          })
        })
          
      }else{
        wx.hideLoading()
        console.log('只上传了文本')
        wx.navigateBack({
          delta: 1,
        })
      }