2020年暑期小程序项目总结（二）

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}const getyear = date => {const year = date.getFullYear()return year;
}const getmonth = date => {const month = date.getMonth() + 1;return month;
}

第一个是自带的函数，后两个是我自己仿照的，具体使用参照我封装的Req函数

 var year=app.func.getyear(new Date());

一个模拟框渲染不同的数据

通过一个模拟框显示列表中不同的数据，这里也需要使用data- 来绑定对应的数据，进而赋值给模拟框中的显示数据，即将模拟框中的数据也变量化，再用setdata进行实时改变：（这里我深刻体会到了响应式开发的优势）
Wxml中：

<view class="action bg-blue round padding-sm" bindtap="showModal2" data-target="Modal" data-id="{{index}}" data-content="{{item.cjzc_list}}"><text class="text-white text-lg ">总  评:{{item.bfzcj}}</text></view></view>

Js中：

showModal2(e) {this.setData({modalName2: e.currentTarget.dataset.target,pscjname:e.currentTarget.dataset.content[0].component_name,pscjratio:e.currentTarget.dataset.content[0].component_ratio,pscjscore:e.currentTarget.dataset.content[0].component_score,qmcjname:e.currentTarget.dataset.content[1].component_name,qmcjratio:e.currentTarget.dataset.content[1].component_ratio,qmcjscore:e.currentTarget.dataset.content[1].component_score,})},hideModal2(e) {this.setData({modalName2: null})},

模拟框对应的wxml：

<view class="cu-modal {{modalName2=='Modal'?'show':''}}"><view class="cu-dialog  "><view class="cu-bar bg-blue light justify-end"><view class="content ">成绩明细</view><view class="action" bindtap="hideModal2"><text class="cuIcon-close text-red"></text></view></view><view class="padding-top"><text class="text-black  text-xl"> {{pscjname}}</text><text class="text-black  text-xl">:{{pscjscore}} </text><text class="text-grey  text-xl">( {{pscjratio}} )</text></view><view class="padding"><text class="text-black text-xl"> {{qmcjname}}</text><text class="text-black text-xl">:{{qmcjscore}} </text><text class="text-grey text-xl">( {{qmcjratio}} )</text></view></view>
</view>

选择器

微信自带日期，时间，地点的选择器，只需要在picker中写明mode属性，其中地点是一个数组形式：

<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view></picker>

而微信自带的这些选择器在js中获取相应的值时也与自制的选择器不同：

RegionChange: function(e) {this.setData({region: e.detail.value})},

而自制的：
得到的value值是元素的下标

transChange:function(e){this.setData({trans:this.data.transArray[e.detail.value]})},
transArray: ['火车', '高铁', '飞机', '自驾', '长途车', '其他'],

 <picker style="width:20%" bindchange="transChange" value="{{indexTrans}}" range="{{transArray}}" class="pickerStyle" style="color:blue;"><view class="picker">{{trans}}</view></picker>

radio组件

 <radio-group class="block"><view class="cu-form-group"><view><radio class="red radio" data-id="1" bindtap="getinfo4"></radio>是<radio class="blue radio margin-left-sm" data-id="0" bindtap="getinfo4" ></radio>否</view></view></radio-group>

JavaScript增加数组元素

项目中有一个增加中转行程的需求，每一个中转对应起始站，座位号，位次等，而且中转个数也不确定，本来按照c++的思路用链表更方便哈，但是JavaScript对添加数组的元素很友好，使用array.push(),array.splice()可以很方便的添加和删除数组，故采用了对象数组
增加中转：

addList: function() {n = n + 1;console.log(n)let item = {};item.id = n;item.start = '';item.trans = '火车';item.stop = '';item.timetable = '';item.seat='';this.data.path.push(item);let tem = this.data.paththis.setData({path: tem})console.log(this.data.path)
},

其中n是全局变量，注意此处push以后path数组并没有被改变，还需要setdata操作（不知道为什么）
删除数组操作：

deleteList: function(e) {let n = e.currentTarget.dataset.miindexconsole.log(n)this.data.path.splice(n, 1)let tem = this.data.pathconsole.log(this.data.path)this.setData({path: tem})
},

n为所要删除的数组的下标，此时的n不是全局变量
那么将输入的值进行存储也需要首先获得下标：

getmiddleStart: function(e) {let n = e.currentTarget.dataset.miindexlet tem = this.data.pathtem[n].start = e.detail.valuethis.setData({path: tem})console.log(this.data.path)
},

在这些操作中对元素的定位很关键（即下标）
字符串的拼接（是真的好用！）

图片预览

图片预览，只能使用网络图片

data: {imgArr:['url']},previewImg:function(){var imgArr = this.data.imgArr;wx.previewImage({current: imgArr[0],     //当前图片地址urls: imgArr,               //所有要预览的图片的地址集合 数组形式success: function(res) {},fail: function(res) {},complete: function(res) {},})},

且必须是一个数组的形式存储，项目中的需求是只需要一个图片

Wx：if的妙用：

  <text wx:if="{{stu_id}}" bindtap="gotomyinfor">{{stu_id}}　></text><text wx:else bindtap="toLogin">请登录　></text>

在两种情况下分别绑定不同的函数，使得执行不一样的功能，自我感觉很是高级（在开发过程中突然领悟到的hhh）

colorUI组件库的使用

在该项目中，我使用了colorUI组件库，确实为我省了不少活，（老实说我的css不咋地，还需要重新好好梳理一遍）
Colorui组件库中内置许多类名（如：text—bold，margin-top等），一读即懂，需要时直接添加即可，比如下述操作可以将小按钮居中，自己在开发中了解并记住了很多，估计以后不用了过不了多久就忘光了（我还是对自己有一个清晰的认识捂脸）

 <view class="bg-white flex justify-center"><button wx:if="{{stu_id}}" class="cu-btn round bg-red margin-tb-sm lg shadow" bindtap="loginOut">注    销</button>

在一些类名中，存在一些css类名是变量的情况，需要结合对应的js文件进行分析：

 <view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">

还比如这一个：class中list可以替换成图标库里的任意一个图标

<text class="cuIcon-list text-blue  "></text>

总之 colorUI组件真的太好用了，太方便了，以后还要继续总结，至少现在自己有一个想法，可不可以自己仿照这个做一个组件库，应用到自己以后的web开发学习中（hhh），长路漫漫，吾将上下而求索。