Wechat applet

brief introduction

Wechat applet is a new way to connect users and services. It can be easily obtained and spread in wechat, and has an excellent use experience.

Advantages and disadvantages

Advantage
1. It's really convenient for users to use. When they want to use it, they can turn it on and off when they don't use it, that is, they can use it and go. This is better than apps that need to download and occupy the memory space of mobile phones.
2. The main style code is encapsulated in the wechat applet, so the opening speed is faster than the ordinary H5, close to the native APP.
3. More mobile phone system functions than H5 can be called for development, such as GPS positioning, recording, video recording, gravity sensing, etc., which can develop more rich use scenarios.
4. It can be added to the mobile desktop on Android phones. It looks like a native APP, but only for Android phones, the iphone doesn't work.
5. The operation speed is similar to that of APP, and it can also make many functions that H5 does not. The development cost is similar to H5, and the development cost is relatively lower than APP.
shortcoming
1. Wechat applets are only 1M in size, which makes it impossible to develop larger applets. So now you will see a lot of small programs are really small and simple.
2. The technical framework of the applet is not stable, and the development method is often modified, resulting in frequent upgrade and maintenance in a short time.
3. Can not jump outside the chain URL, so indirectly affect the openness of the applet.
4. Can't share directly to the circle of friends. Alas, there's an important promotion way missing.
5. It needs to be reviewed and put on the shelf like an APP, which is more troublesome than HTML5's do it now release.

Electricity supplier project

Configure applet
Global configuration

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"   //Add tab (quantity is 2-5)
  ],
  "window": {
    "navigationBarTitleText": "Demo"//Navigation bar title text content	
  },
  "tabBar": {//tab page configuration
    "list": [{
      "pagePath": "pages/index/index",
      "text": "home page" 
      "iconPath":"" //small icons
    }, {
      "pagePath": "pages/logs/index",
      "text": "Journal"
    }]
  },
  "networkTimeout": {//All kinds of network delay
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,//Debug debug
  "navigateToMiniProgramAppIdList": [  //id
    "wxe5f52902cf4de896"
  ]
}

Page configuration

{
  "navigationBarBackgroundColor": "#ffffff", //Navigation bar background color, e.g
  "navigationBarTextStyle": "black",//Navigation bar title color, black / white only
  "navigationBarTitleText": "Wechat interface function demonstration",//Navigation bar title text content	
  "backgroundColor": "#eeeeee",//Background color of window
  "backgroundTextStyle": "light" //Drop down loading style, only support dark / light
}

Shopping cart process
1. Select all

 allselected () {
        this.allchecked = !this.allchecked
        console.log(this.allchecked)
        // If it is true, the flag value of each item of modified data is true, otherwise it is false
        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 a single item is not selected, select all must not be selected
        // If a single item is selected, check whether other items are selected. If all items are selected, select all
        if(!item.flag) {
          this.allchecked = false
        } else {
          // Check whether the remaining item is selected --- if it is false, it will be false
          const test = this.cartlist.every(item => {
            return item.flag === true
          })
          
          if (test) {
            this.allchecked = true
          } else {
            this.allchecked = false
          }
        }
      },

Subtraction function

	reduce (item) {
        // If the current number is 1, do not operate. If it is greater than 1, subtract 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 contains cart record id
            num
          }
        }).then(res => {
          if (res.data.code === '10019') {
            toast({title:'Please login first.'})
            uni.navigateTo({
              url: '/pages/login/login'
            })
          } else {
            toast({title:'Quantity modified successfully'})
            item.num -= 1 // The view will not be updated until the server returns successfully
          }
        })
      },

Addition number

	 add (item) {
        // item.num += 1
        // Plus 1
        let num = item.num
        num += 1
        let token = uni.getStorageSync('token')
        request({
          url: '/cart/update',
          data: {
            token,
            cartid: item.cartid, // item contains cart record id
            num
          }
        }).then(res => {
          if (res.data.code === '10019') {
            toast({title:'Please login first.'})
            uni.navigateTo({
              url: '/pages/login/login'
            })
          } else {
            toast({title:'Quantity modified successfully'})
            item.num += 1 // The view will not be updated until the server returns successfully
          }
        })
      },

Deleting function

  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:'Please login first.'})
            uni.navigateTo({
              url: '/pages/login/login'
            })
          } else {
            toast({title:'Delete data succeeded'})
            this.cartlist.splice(index, 1) // Delete current data
            // If you click delete, no data will be displayed
            this.cartlist.length === 0 ? this.flag = true : this.flag = false
          }
        })
      }

Total function

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

Total price function

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