微信小程序学习笔记

取像素点颜色的方法

我们常常需要一些字体的具体颜色，这个可以用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;
}