├── README.md
└── 小程序
    ├── picker
        └── index.vue
    ├── 图片压缩
        ├── common.js
        └── index.vue
    └── 地图定位
        ├── common.js
        └── index.vue


/README.md:
--------------------------------------------------------------------------------
1 | # code-diary


--------------------------------------------------------------------------------
/小程序/picker/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- <view class="section">
 4 |       <view class="section__title">省市区选择器</view>
 5 |         <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
 6 |           <view class="picker">
 7 |             当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
 8 |           </view>
 9 |         </picker>
10 |       </view> -->
11 | 
12 |   <view class="section">
13 |   <view class="section__title">多列选择器</view>
14 |   <picker mode="multiSelector" @columnchange="changeNextCol" :value="mulIndex" :range="mulArr">
15 |     <view class="picker">
16 |       当前选择：{{mulArr[0][mulIndex[0]]}}，{{mulArr[1][mulIndex[1]]}}，{{mulArr[2][mulIndex[2]]}}
17 |     </view>
18 |   </picker>
19 | </view>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import store from '../../store'
25 | export default {
26 |   data () {
27 |     return {
28 |       region: ['四川省', '成都市', '武侯区'],
29 |       customItem: '全部',
30 |       mulIndex: [0,0,0],
31 |       mulArr:[],
32 |       // 假设json为后端返回的数据
33 |       json: [{type:'汽车', brand:[{name:'领克',cars:['01', '02', '03']},
34 |                                       {name:'丰田',cars:['汉兰达','凯美瑞', '卡罗拉']}]},
35 |                 {type:'摩托车',brand:[{name:'雅马哈',cars:['MT-9','迅鹰']},
36 |                                        {name:'铃木',cars:['钻豹','gw250']}]},
37 |                 {type:'自行车',brand:[{name:'美利达',cars:['挑战者300', '挑战者900']},
38 |                                       {name:'捷安特',cars:['ATX777','XTR']}]}]
39 |     }
40 | 
41 |   },
42 |   components: {
43 |   },
44 |   methods: {
45 |       htmlChange(e){
46 |         // picker 的value改变时触发
47 |         console.log('new index', e.target.value);
48 |         this.mulIndex = e.target.value;
49 |       },
50 |       changeNextCol(e){
51 |         // 列的值改变时触发   我这里是三列：车子类型  品牌名称  车型
52 |         console.log('修改的列', e.target.column, '值为', e.target.value);
53 |         // 监听用户操作，改变mulIndex的值
54 |         this.mulIndex[e.target.column] = e.target.value;
55 |         // mulArr[0]的值是不会随用户操作变更的，因此不需要改变  
56 |         // mulArr[1]的值是由 mulIndex[0]的值决定的
57 |         this.mulArr.splice(1,1,this.json[this.mulIndex[0]].brand.map(function(v){return v.name}));
58 |         // mulArr[2]的值是由 muIndex[1]的值决定的 
59 |         this.mulArr.splice(2,1,this.json[this.mulIndex[0]].brand[this.mulIndex[1]].cars);
60 |         },
61 |       bindRegionChange(e) {
62 |         console.log('修改值为', e.target.value);
63 |         this.region = e.target.value
64 |     }
65 | 
66 |   
67 |    
68 |   },
69 |   computed:{
70 |    
71 |   },
72 |   onLoad () {
73 |     // 初始化picker默认值
74 |     this.mulArr[0] = this.json.map(function(v){return v.type});
75 |     this.mulArr[1] = this.json[this.mulIndex[0]].brand.map(function(v){return v.name});
76 |     this.mulArr[2] = this.json[this.mulIndex[0]].brand[this.mulIndex[1]].cars;
77 |   }
78 | }
79 | </script>
80 | 
81 | <style lang="scss" scoped>
82 | </style>
83 | 


--------------------------------------------------------------------------------
/小程序/图片压缩/common.js:
--------------------------------------------------------------------------------
 1 | //*************** 图片压缩 ***********
 2 | // 判断图片大小是否满足需求
 3 | function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallBack, moreCallBack) {
 4 |     wx.getFileInfo({
 5 |         filePath: imagePath,
 6 |         success(res) {
 7 |             console.log("压缩前图片大小:", res.size / 1024, 'kb');
 8 |             if (res.size > 1024 * limitSize) {
 9 |                 moreCallBack();
10 |             } else {
11 |                 lessCallBack();
12 |             }
13 |         }
14 |     })
15 | };
16 | /**
17 |  * 获取画布图片 
18 |  */
19 | // 利用cavas进行压缩  每次压缩都需要ctx.draw()  wx.canvasToTempFilePath()连用
20 | function getCanvasImage(canvasId, imagePath, imageW, imageH, getImgsuccess) {
21 |     const ctx = wx.createCanvasContext(canvasId);
22 |     ctx.drawImage(imagePath, 0, 0, imageW, imageH);
23 |     ctx.draw(false, setTimeout(function() { // 一定要加定时器，因为ctx.draw()应用到canvas是有个时间的
24 |         wx.canvasToTempFilePath({
25 |             canvasId: canvasId,
26 |             x: 0,
27 |             y: 0,
28 |             width: imageW,
29 |             height: imageH,
30 |             quality: 1,
31 |             success: function(res) {
32 |                 getImgsuccess(res.tempFilePath);
33 |             },
34 |         });
35 |     }, 200));
36 | };
37 | 
38 | // 主调用方法
39 | 
40 | /**
41 |  * 获取小于限制大小的Image, limitSize默认为100KB，递归调用。
42 |  */
43 | function getLessLimitSizeImage(canvasId, imagePath, limitSize = 100, drawWidth, callBack) {
44 |     imageSizeIsLessLimitSize(imagePath, limitSize,
45 |         (lessRes) => {
46 |             callBack(imagePath);
47 |         },
48 |         (moreRes) => {
49 |             wx.getImageInfo({
50 |                 src: imagePath,
51 |                 success: function(imageInfo) {
52 |                     var maxSide = Math.max(imageInfo.width, imageInfo.height);
53 |                     //画板的宽高默认是windowWidth
54 |                     var windowW = drawWidth;
55 |                     var scale = 1;
56 |                     if (maxSide > windowW) {
57 |                         scale = windowW / maxSide;
58 |                     }
59 |                     var imageW = Math.trunc(imageInfo.width * scale);
60 |                     var imageH = Math.trunc(imageInfo.height * scale);
61 |                     console.log('调用压缩', imageW, imageH);
62 |                     getCanvasImage(canvasId, imagePath, imageW, imageH,
63 |                         (pressImgPath) => {
64 |                             getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth * 0.95, callBack);
65 |                         }
66 |                     );
67 |                 }
68 |             })
69 |         }
70 |     )
71 | };
72 | // 图片转basee64    io操作 使用异步方式
73 | function getBase64(img) {
74 |     return new Promise(function(resolve, reject) {
75 |         const FSM = wx.getFileSystemManager();
76 |         FSM.readFile({
77 |             filePath: img,
78 |             encoding: 'base64',
79 |             success(data) {
80 |                 resolve(data)
81 |             }
82 |         })
83 |     })
84 | }
85 | 
86 | export { getLessLimitSizeImage, imageSizeIsLessLimitSize, getCanvasImage, getBase64 }
87 | 


--------------------------------------------------------------------------------
/小程序/图片压缩/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="content">
  3 |         <div class="infoItem">
  4 |             <div class="leftCont"><span>*</span>照片：</div>
  5 |             <div class="rightCont rightImg">
  6 |                 <div class="imgList">
  7 |                     <div v-for="(item,ind) in imgFiles" :key="ind" >
  8 |                         <div class="imgItem" >
  9 |                             <div class="remove" @click="removeImg(ind)"><image src="/static/img/delete.png"></image></div>
 10 |                             <image :src="item" alt="" @click="previewImg(ind)" mode="aspectFit" style="width:50px;height:50px"></image>
 11 |                         </div>
 12 |                     </div>
 13 |                 </div>
 14 |                 <div class="addImg" @click="chooseImg">
 15 |                     <div class="addImgBtn">+</div>
 16 |                 </div>
 17 |             </div>
 18 |         </div>
 19 |         <canvas class="canvas" canvas-id="canvas" :style="{width:cWidth+'px',height:cHeight+'px', visibility: 'hidden', 'position':'absolute', 'z-index': '-1', left: '-10000rpx',top:'-10000rpx'}"></canvas>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import { getLessLimitSizeImage, imageSizeIsLessLimitSize,getCanvasImage, getBase64} from '../../../static/js/common'
 25 | export default {
 26 |   data () {
 27 |     return {
 28 |         cWidth: 2000,
 29 |         cHeight:2000,
 30 |         mapCtx:{},
 31 |         imgFiles:[],
 32 |         compressImgs:[],
 33 |       }
 34 |     },
 35 |   methods: {
 36 |       chooseImg(e){
 37 |           let maxSize = 400;
 38 |           let dWidth = wx.getSystemInfoSync().windowWidth;
 39 |           console.log(dWidth);
 40 |           let that = this;
 41 |           wx.chooseImage({
 42 |               sizeType:['compressed'],
 43 |               sourceType:['album','camera'],
 44 |               success:function(res){
 45 |                   // 返回选定图片的本地文件列表，tempFilePaths可以作为img标签的src列表
 46 |                   // 当一次选择多张图片的情况
 47 |                   res.tempFilePaths.forEach(v=>{
 48 |                       that.imgFiles.push(v);
 49 |                       wx.getFileInfo({
 50 |                         filePath:v,
 51 |                         success:function(res){
 52 |                             var cW = res.width,cH = res.height,rat = 1.1;
 53 |                             that.cWidth = cW;
 54 |                             that.cHeight = cH;
 55 |                         }
 56 |                     })
 57 |                     getLessLimitSizeImage('canvas', v, maxSize, dWidth, function(img){
 58 |                         that.compressImgs.push(img);                        
 59 |                         wx.getFileInfo({
 60 |                             filePath:img,
 61 |                             success:function(res){
 62 |                                 console.log('压缩后：'+res.size/1024+'kb')
 63 |                             }
 64 |                         })
 65 |                 })
 66 | 
 67 |                   });
 68 |               },
 69 |               fail:function(err){
 70 |                   console.log(err)
 71 |               }
 72 |           })
 73 |       },
 74 |       // 预览图片
 75 |       previewImg(ind){
 76 |           var that = this;
 77 |           wx.showActionSheet({
 78 |               itemList:['预览','删除'],
 79 |               success:function(res){
 80 |                   if (res.tapIndex == 0){
 81 |                       wx.previewImage({
 82 |                           current:that.imgFiles[ind],
 83 |                           urls:that.imgFiles
 84 |                       });
 85 |                   }else{
 86 |                       that.imgFiles.splice(ind,1);
 87 |                   }
 88 |               }
 89 |           })
 90 |       },
 91 |   },
 92 |   
 93 |   computed:{
 94 |   },
 95 |   onLoad(){
 96 |   },
 97 |   mounted () {
 98 |   }
 99 | }
100 | </script>
101 | 
102 | <style lang="scss" scoped>
103 | @import '../../../static/css/caraply.scss';
104 | </style>
105 | 


--------------------------------------------------------------------------------
/小程序/地图定位/common.js:
--------------------------------------------------------------------------------
 1 | // *********** 地图 ************
 2 | import QQmapWX from './qqmap.min'
 3 | 
 4 | //通过经纬度得到地址相关信息   该操作是异步操作，所以最好加个callback
 5 | // function getAddress(long, lat, callback) {
 6 | //     // long 经度   lat 纬度
 7 | //     var address = '';
 8 | //     var locationString = lat + "," + long;
 9 | //     console.log(locationString);
10 | //     wx.request({
11 | //         url: 'http://apis.map.qq.com/ws/geocoder/v1/',
12 | //         data: {
13 | //             "key": "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxx",
14 | //             "location": locationString
15 | //         },
16 | //         method: 'GET',
17 | //         success: function(r) {
18 | //             //输出一下位置信息
19 | //             console.log('用户位置信息', r.data.result.address);
20 | //             //r.data.result.address获得的就是用户的位置信息，将它保存到一个全局变量上
21 | //             address = r.data.result.address;
22 | //             callback(r.data.result);
23 | //         },
24 | //         fail(err) {
25 | //             console.log(err)
26 | //         }
27 | //     });
28 | //     return address
29 | // }
30 | 
31 | function sdkAddress(long, lat, callback) {
32 |     var address = '';
33 |     var qqmapsdk = new QQmapWX({
34 |         key: 'xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxx'
35 |     });
36 |     qqmapsdk.reverseGeocoder({
37 |         location: {
38 |             longitude: long,
39 |             latitude: lat
40 |         },
41 |         success(res) {
42 |             // 输出位置信息
43 |             address = res.result.address;
44 |             callback(res.result.address);
45 |         }
46 | 
47 |     });
48 |     return address
49 | }
50 | export { getAddress, sdkAddress }
51 | 
52 | 


--------------------------------------------------------------------------------
/小程序/地图定位/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="content">
 3 |         <div class="infoItem">
 4 |             <div class="leftCont"><span>*</span>定位：</div>
 5 |             <div class="rightCont">
 6 |                 <div class="address">{{address}}</div>
 7 |                 <map id="my-map"
 8 |                      class="my-map"
 9 |                      :longitude="!mapInit&&formData.longitude"
10 |                      :latitude="!mapInit&&formData.latitude"
11 |                      :markers="marker"
12 |                      @regionchange="regionChange"
13 |                      @begin="begin"
14 |                      @end="end"
15 |                      show-location
16 |                                  ></map>
17 |             </div>
18 |         </div>
19 |     </div>
20 | </template>
21 | 
22 | <script>
23 | import { sdkAddress } from '../../../static/js/common'
24 | export default {
25 |   data () {
26 |     return {
27 |         mapCtx:{},
28 |         touchTimeStamp:0,
29 |         address:'',
30 |         mapInit: false,//防止用户拖动地图时，经纬值变化带来的位置闪烁bug
31 |       }
32 |     },
33 |   methods: {
34 |       // 获取用户当前位置信息
35 |       getLocalInfo(){
36 |           var that =this;
37 |           that.mapCtx = wx.createMapContext('my-map');
38 |           wx.getLocation({
39 |               type:'gcj02',
40 |               success(res){
41 |                   that.formData.longitude = res.longitude;
42 |                   that.formData.latitude = res.latitude;
43 |                   sdkAddress(res.longitude, res.latitude, function(ad){
44 |                       that.address = ad;
45 |                   })
46 |               }
47 |           });
48 |       },
49 |       regionChange (param) {
50 |       console.log('change', param) // （实测不会输出）
51 |     },
52 |     // 开始拖动
53 |     begin ({timeStamp}) {
54 |         console.log(1111);
55 |       this.touchTimeStamp = timeStamp
56 |     },
57 |     // 结束拖动
58 |     end ({timeStamp}) {
59 |         console.log(2222);
60 |      // 添加拖动时长判断，防止误触操作
61 |         if (timeStamp - this.touchTimeStamp > 100) {
62 |             console.log(3333);
63 |         }
64 |     },
65 |   },
66 |   
67 |   computed:{
68 |   },
69 |   onLoad(){
70 |   },
71 |   mounted () {
72 |       this.getLocalInfo()
73 |   }
74 | }
75 | </script>
76 | 
77 | <style lang="scss" scoped>
78 | @import '../../../static/css/caraply.scss';
79 | </style>
80 | 


--------------------------------------------------------------------------------