取像素点颜色的方法
我们常常需要一些字体的具体颜色,这个可以用3d画图打开我们的demo效果图
注意这个颜色有些可能为比如120:20:30这样,本质上就是把每个数字转换成十六进制即可。
然后用颜色选取器即可看到自定义颜色的标号。
小程序背景图片设置
background-image: url(‘data:image/jpeg;base64,xxx’)
xxx是图片base64加密后的效果
一个很好的图标下载网站
Iconfont-阿里巴巴矢量图标库,可以下载很多图标资源
https://www.iconfont.cn
基本的wxss排版:
position: absolute//这个是绝对定位
margin-top: 1097rpx;//定位中距离顶部距离
margin-left:512rpx;//定位中距离左部距离
text-align:left;//文字在框中的位置
font-size: 33rpx;//文字的大小
color:#9f9f9f;//文字的颜色
font-family:Arial, Helvetica, sans-serif ;//文字的字体
发出请求Params
小程序中:
发出请求json
小程序中:
刷新页面,更新数据
微信小程序向原数组添加数组
参考:https://blog.csdn.net/u012693479/article/details/97934232
padding-bottom
参考:https://www.w3school.com.cn/cssref/pr_padding-bottom.asp
padding-bottom 属性设置元素的下内边距(底部空白)。
使得滚动可以看到下面的内容
上传文件(图片等)
参考:https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
wxml文件
<text class="title">上传左脚照片</text>
<view class="wrap" >
<wux-upload listType="picture-card" max="5" uploaded="false" url="{{pictureUrl}}" bind:change="onChangeLeft" bind:success="onSuccessLeft" bind:fail="onFail" bind:complete="onComplete" bind:preview="onPreview">
<view class="upload">
<van-icon name="photo-o" size="23px" color="#999" />上传图片</view>
</wux-upload>
</view>
js文件
onSuccessLeft(e){
let file=e.detail.file;
console.log(e);
console.log(file);
let that=this;
wx.uploadFile({
url: getApp().globalData.server+'/file/fileUpload', //仅为示例,非真实的接口地址
filePath: file.url,
name: 'file',
formData: {
'user': 'test'
},
success (res) {
const data = res.data
//let imageTempObj = JSON.parse(data);
console.log(data);
let imageTempObj = JSON.parse(data);
console.log(imageTempObj);
that.data.leftFootUrl.push({markurl:file.url,url:imageTempObj.result});
console.log(that.data.leftFootUrl);
//do something
}
})
},
success表示成功上传,url为后台的图片上传接口
setData
将wxml的前端可视数据进行动态同步,如果不同步则为初始载入Load时的值
之后在js页面中获取所有图片信息后进行setData
前端用户界面即可看到新加载出来的信息
continue
continue要用在普通的for循环里,在普通的for循环中continue正常即可,forEach中不能用。
模版字符串
上下两种效果等价(第二种不能同步渲染层,但是对于data的值的改变都是相同的效果)
setData({})
可以理解成不仅改变了data的值,同时把新的data在渲染层同时表现出来
微信小程序轮播图设置
参考:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
发现只显示了一部分
改成
加入了mode=“aspectFill”
即可正常显示
微信小程序播放视频播放
参考:https://blog.csdn.net/qq_36538012/article/details/86622153
wxml
<video style="height:240px;width:320px;" src="{{mapUrl}}"> </video>
js
Page({
data: {
mapUrl: "",
},
onLoad: function () {
this.setData({
mapUrl: "http://123.60.56.46:8000/static/file/%E4%B8%BE%E9%87%8D%E5%A4%B1%E8%AF%AF%E9%9B%86%E9%94%A6.mp4"
})
},
})
也可以直接
<video src="http://123.60.56.46:8000/static/file/%E4%B8%BE%E9%87%8D%E5%A4%B1%E8%AF%AF%E9%9B%86%E9%94%A6.mp4"></video>
效果如下
注意的是如何获取视频地址,在视频页面选择视频,右键->复制视频地址
http://123.60.56.46:8000/static/file/%E4%B8%BE%E9%87%8D%E5%A4%B1%E8%AF%AF%E9%9B%86%E9%94%A6.mp4
发现后面的中文转成了%格式,进行了转码,因为直接在微信小程序中用中文地址,会出错
微信小程序设置文本字体粗细font-weight
参考:https://blog.csdn.net/diana_jiuri1314/article/details/80491948
微信小程序:placeholder字体大小和颜色设置
在页面的wxml文件中定义 placeholder-class=“phcolor”
在页面的wxss文件中定义 phcolor对应的样式内容
page.wxml
<input class="weui-input" auto-focus placeholder="请输入假名,+空格表示结束" placeholder-class="phcolor" bindinput="bindinputjiaming" />
page.wxss
.phcolor{
color:#aaa;
font-size: 12px;
}