• 逆战:微信小程序


                                                            微信小程序的生命周期

    onLaunch: function(options) {

      // 监听小程序初始化。小程序初始化完成时(全局只触发一次)

    },

    onShow: function(options) {

      // 监听小程序显示。小程序启动,或从后台进入前台显示时

    },

    onHide: function() {

      // 监听小程序隐藏。小程序从前台进入后台时。

    },

    onError: function(msg) {

      // 错误监听函数。小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息

    },

    onPageNotFound: function(res) {

      // 页面不存在监听函数。小程序要打开的页面不存在时触发,会带上页面信息回调该函数

    }

    onLoad: function(options) {

        // 生命周期回调—监听页面加载

      },

    onReady: function() {

      // 生命周期回调—监听页面初次渲染完成

    },

    onShow: function() {

      // 生命周期回调—监听页面显示

    },

    onHide: function() {

      // 生命周期回调—监听页面隐藏

    },

    onUnload: function() {

      // 生命周期回调—监听页面卸载

    },

    onPullDownRefresh: function() {

      // 监听用户下拉动作

    },

    onReachBottom: function() {

      // 页面上拉触底事件的处理函数

    },

    onShareAppMessage: function () {

      // 用户点击右上角转发

    },

    onPageScroll: function() {

      // 页面滚动触发事件的处理函数

    },

    onResize: function() {

      // 页面尺寸改变时触发

     

    },               

    onLaunch: function(options) {

      // 监听小程序初始化。小程序初始化完成时(全局只触发一次)

    },

    onShow: function(options) {

      // 监听小程序显示。小程序启动,或从后台进入前台显示时

    },

    onHide: function() {

      // 监听小程序隐藏。小程序从前台进入后台时。

    },

    onError: function(msg) {

      console.log(msg) // 错误监听函数。小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息

    },

    onPageNotFound: function(res) {

      // 页面不存在监听函数。小程序要打开的页面不存在时触发,会带上页面信息回调该函数

     

                                                                 微信小程序实现购物车的思路

     

    1.发送异步请求获取购物车的商品性息

    2.根据请求结果判断是跳转到登录还是把请求到的购物车数据存起来遍历显示到页面

    3.界面根据需求做加减数量和删除按钮,设置点击事件,前端做数量加减,再次发送请求,得到加减后数据动态显示到界面

    4.删除时请求删除接口,所需数据在遍历点击事件时作为变量被事件接收,在事件中发送数据请求删除接口

    5.使用多选按钮组,多选按钮组自带@change事件接收按钮组中按钮发生变化时多选按钮value值,根据选中的按钮的value作为下标,计算总数和总价

    6.动态全选按钮check值和购物车列表check,当全选按钮check改变时,按钮组check值一致动态改变

    7.全选按钮改变后取非,并且从新计算总价和总数

     

    实现效果如下:

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    React Native for Android应用名及图标修改
    如何不使用Navigator空间实现跳转页面?
    ReactNative WebView组件详解
    react-native react-navigation使用
    微信小程序——选择某个区间的数字
    Git分支操作——查看、新建、删除、提交、合并
    Github + Hexo 搭建个人博客
    微信小程序——动态设置swiper的高度
    微信小程序——购物车结算
    解决stackoverflow打开慢的问题
  • 原文地址:https://www.cnblogs.com/hyf689498/p/12354088.html
Copyright © 2020-2023  润新知