背景图片在手机里无法显示
小程序无法加载本地图片为背景图片，需要base64转码：
background:'/images/backgroundlo.jpg'
let base64 = wx.getFileSystemManager().readFileSync(that.data.background, 'base64');
that.setData({
background: 'data:image/png;base64,' + base64
});
<image class='background' src="{{background}}" mode="aspectFill"></image>
在接受照片信息时，我刚开始以为是一堆乱码（一些什么框框），后来明白其实不是，只是一些二进制编码，这是也需要base64转码，而且在请求文件里还需要注明：
header: { 'content-type': 'application/json'},
method: 'GET',
responseType: 'arraybuffer',
success: (result) => {
console.log(result.data)
that.setData({
photo: wx.arrayBufferToBase64(result.data)
})
在html里：
<image style=" height:180rpx;width:180rpx; margin-left:80rpx;margin-right:50rpx; margin-top:50rpx" src="data:image/jpg;base64,{{photo}}"></image>
另外，当从后台获取base64格式的图片时，要注意当显示不出来时，可能是因为字符串中有换行，需要将他们替换成空串
capthcha:res.data.captchaBase64.replace(/[\r\n]/g, ''),//必须将换行符替换成空字符才能显示出来
获取时间
在util.js里提供了获取时间的函数，但是我只需要得到年月即可，所以仿照自带函数自己编了两个：
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const 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.path
this.setData({
path: tem
})
console.log(this.data.path)
},
其中n是全局变量，注意此处push以后path数组并没有被改变，还需要setdata操作（不知道为什么）
删除数组操作：
deleteList: function(e) {
let n = e.currentTarget.dataset.miindex
console.log(n)
this.data.path.splice(n, 1)
let tem = this.data.path
console.log(this.data.path)
this.setData({
path: tem
})
},
n为所要删除的数组的下标，此时的n不是全局变量
那么将输入的值进行存储也需要首先获得下标：
getmiddleStart: function(e) {
let n = e.currentTarget.dataset.miindex
let tem = this.data.path
tem[n].start = e.detail.value
this.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），长路漫漫，吾将上下而求索。
扫一扫
1093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
