逆战———微信小程序

微信小程序

简介

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

优缺点

优点
1、对用户使用上来说，确实方便，要用的时候打开，不用的时候关掉，即用即走。这点比需要下载，还要占用手机内存空间的APP要好。
2、主要的样式代码都封装在微信小程序里面，所以打开速度比普通的H5要快，接近原生APP。
3、可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景。
4、在安卓手机上可以添加到手机桌面，看上去跟原生APP差不多，但仅限安卓手机，iphone就不行了。
5、运行速度跟APP差不多，也能做出很多H5不做到的功能，开发成本跟H5差不多，相对来说开发成本比APP要低。
缺点
1、微信小程序只有1M的大小，这样导致无法开发大型一些的小程序。所以目前你会看到很多小程序真的很小很简单。
2、小程序的技术框架还不稳定，开发方法时常有修改，导致短时间内经常要升级维护。
3、不能跳转外链网址，所以间接影响了小程序的开放性。
4、不能直接分享到朋友圈，哎呀，少了一个重要的推广方式。
5、需要像APP一样审核上架，这点比HTML5即做即发布要麻烦些。

电商项目

配置小程序
全局配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"   //添加tab（数量在2~5）
  ],
  "window": {
    "navigationBarTitleText": "Demo"//导航栏标题文字内容	
  },
  "tabBar": {//tab页面的配置
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页" 
      "iconPath":"" //小图标
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {//各类网络延迟
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,//调试debug
  "navigateToMiniProgramAppIdList": [  //id
    "wxe5f52902cf4de896"
  ]
}

页面配置

{
  "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色，如f66
  "navigationBarTextStyle": "black",//导航栏标题颜色，仅支持 black / white
  "navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容	
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light" //下拉 loading 的样式，仅支持 dark / light
}

购物车流程
1、全选功能

 allselected () {
        this.allchecked = !this.allchecked
        console.log(this.allchecked)
        // 如果为真，修改数据的每一项的flag的值都为真，否则都为假
        if (this.allchecked) {
          this.cartlist.map( item => {
            item.flag = true
          })
        } else {
          this.cartlist.map( item => {
            item.flag = false
          })
        }
      },
       selected (item) {
        console.log('test', item)
        item.flag = !item.flag
        console.log(this.cartlist)
        // 如果单独某一项没被选中，那么全选一定不被选中
        // 如果单独某一项被选中了，检测其他项是否都被选中，如果都选中了，全选被选中
        if(!item.flag) {
          this.allchecked = false
        } else {
          // 检测其余项是否被选中 --- 一假则假
          const test = this.cartlist.every(item => {
            return item.flag === true
          })
          
          if (test) {
            this.allchecked = true
          } else {
            this.allchecked = false
          }
        }
      },

减数功能

	reduce (item) {
        // 如果当前的个数为1 不操作，如果大于1减1操作
        let num = item.num
        if (num > 1) {
          num -= 1
        } else {
          num = 1
        }
        let token = uni.getStorageSync('token')
        request({
          url: '/cart/update',
          data: {
            token,
            cartid: item.cartid, // item包含购物车记录id
            num
          }
        }).then(res => {
          if (res.data.code === '10019') {
            toast({title:'请先登录'})
            uni.navigateTo({
              url: '/pages/login/login'
            })
          } else {
            toast({title:'修改数量成功'})
            item.num -= 1 // 服务器返回成功之后  视图才更新
          }
        })
      },

加数

	 add (item) {
        // item.num += 1
        // 加1
        let num = item.num
        num += 1
        let token = uni.getStorageSync('token')
        request({
          url: '/cart/update',
          data: {
            token,
            cartid: item.cartid, // item包含购物车记录id
            num
          }
        }).then(res => {
          if (res.data.code === '10019') {
            toast({title:'请先登录'})
            uni.navigateTo({
              url: '/pages/login/login'
            })
          } else {
            toast({title:'修改数量成功'})
            item.num += 1 // 服务器返回成功之后  视图才更新
          }
        })
      },

删除功能

  del (item,index) {
        let token = uni.getStorageSync('token')
        request({
          url: '/cart/delete',
          data: {
            token,
            cartid: item.cartid
          }
        }).then(res => {
          if (res.data.code === '10019') {
            toast({title:'请先登录'})
            uni.navigateTo({
              url: '/pages/login/login'
            })
          } else {
            toast({title:'删除数据成功'})
            this.cartlist.splice(index, 1) // 删除当前的数据
            // 如果点击删除 删完之后要显示没有数据了
            this.cartlist.length === 0 ? this.flag = true : this.flag = false
          }
        })
      }

总数功能

  totalNum () {
        let totalNum = 0;
        this.cartlist.map(item => {
          item.flag ? totalNum += item.num : totalNum += 0
        })
        return totalNum
      },

总价格功能

 totalPrice () {
        let totalPrice = 0;
        this.cartlist.map(item => {
          item.flag ? totalPrice += item.num * item.price : totalPrice += 0
        })
        return totalPrice
      }