知识点总结

1，页面结构

image.png image.png

2，js页面的接口配合

image.png

3，公用弹窗

image.png

通过app的方式引入：

image.png

使用：

image.png

小程序里面自带的弹窗：

  wx.showModal({
        content: '成为会员才能查看账单噢，非会员请联系400-900-9088',
        showCancel: false,
   });

4，事件绑定

下面这个 [删除] 功能

image.png
image.png

5，注意下面这个浮窗的操作

image.png
image.png

6，本地数据缓存

https://blog.csdn.net/sinat_33348723/article/details/79691310

存储数据：

  wx.setStorage({
        key: keyname ,  //存储数据的名字  （可以使用接口来命名字）
        data: storagedata,   //存储的数据
        success: () => {    //数据存储成功的操作
               
        }
    });

获取存储的本地数据：

     wx.getStorage({
        key: keyname ,   //存储数据的名字
        success: (res) => {     //数据获取成功的操作 res里面就是获取回来的缓存数据
        } 
    })

7，账单有数据的账号

18780233051

8，跳转及一点缺陷

类似a标签：
（跳转的路径是一个相对路径）

     <navigator class='navigator_white' url='../../mine/minebilldetails/minebilldetails?id={{item.id}}'>
     </navigator>

js里面的跳转：

 wx.navigateTo({
      'url': '../../mine/minebilldetails/minebilldetails?id=7077'
 });

image.png

防止点击的时候页面外部框框变灰

image.png

9，注意一个按钮的布局

image.png

当页面很长 最下面有一个有作用的按钮 最好把按钮固定在最下面的屏幕上

一般出现的场景：
1，确认反馈按钮
2，比较多的表单信息提交按钮

10，一个日期API的使用

 <picker mode="date" value="{{date}}"  bindchange="bindDateChange">
 </picker>

image.png
image.png

11，图片上传及预览

图片上传：

image.png

调用的函数

  chooseImage: function (e) {
     wx.chooseImage({
        count: 5,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
    
             let tempFilePath = res.tempFiles;  //从本地相册拿到的图片数组
    
            //如果有多张图片 则循环调用上传图片到服务器的接口
            for (var j = 0; j < tempFilePath.length; j++){
                   this.uploadImage(tempFilePath[j]);
             }
         }
      })
   },


uploadImage: function (item) {
    //判断图片的大小  
    if (item.size > 1024 * 1024) {
        this.prompt("图片过大，请裁剪后上传！");
        return;
    };
   // this.setData({
      // isShowLoading: true,
     // loadingMessage: "正在上传"
  // });
    wx.uploadFile({
      url: Api.UPLOAD_IMAGE,   //图片上传的接口
      filePath: item.path,   //图片在本地的路径
      name: 'file',
      header: {
        'Content-Type': 'multipart/form-data'
      },
      formData: {},
      complete: (res) => {
           let resdata = JSON.parse(res.data);
           if (resdata && resdata.statuscode == Api.SUCCESS) {
               let uploatimagearr = this.data.uploatimage,  //当前页面存储图片的数组
                   urldata = resdata.data.url,  //从后端返回的图片地址
                   urldataArr = urldata.split("/"), //通过后端返回的地址 获取地址里面的图片名字
                   imgobj = {
                       name: urldataArr[urldataArr.length - 1],  //通过地址获取图片名字
                       size: item.size,    //图片大小
                       url: 'http:' + urldata   //后端返回的图片地址没有 协议头 的情况
                    };

                uploatimagearr.push(imgobj);   //把新上传的图片push到当前页面存储图片的数组

                this.setData({    //更新当前页面存储图片的数组
                    uploatimage: uploatimagearr
                });
            } else {
               wx.showModal({
                 title: '提示',
                 content: '上传失败',
                 showCancel: false
               });
            // this.setData({
              //   isShowLoading: false
           // });
               return;
           };
       }
    })
  },

12，表单数据

image.png

下面的做法原因是页面 input的默认值拿到的是data里面的数据 但是提交表单的时候取的是 this里面的值

image.png image.png

13，表单设置最大输入长度

image.png

    maxlength = "20"  //设置最大输入长度