微信小程序阶段性小总结-CFANZ编程社区

一微信小程序入门

20220223

1 学习了如何自己注册一个小程序开发账号，了解并使用微信小程序开发工具

2 如何新建一个页面（在app.json里添加）"pages/index/index"

20220225

1 引入文字参数<test>

2引入视图容器<view>

3

4引入图片<image>，image下的mode="aspectFit让图片保持纵横比缩放图片

20220301

1 wxss里的背景图不能用本地图片，可用网络图，也可用base64位图，网址：https://tool.css-js.com/base64.html

2 rpx为相对单位

3 wxml:书写页面结构类似于之前的html。称为组件。wxss:书写页面样式。和之前的css基本一样。json配置文件。js书写动态效果

4 小程序中使用js变量的时候，要用双大括号{{}}

5{{}}可以放置变量或表达式

6 点击事件 bindtap=“方法名”，方法名后不用加（）

7小程序控制的就是数据

8方法名可直接定义，如function（）{}

9获取数据：this.Data+变量名

修改数据：this.setData({})变量名：值

20220302

1 小程序中事件传参 data-js中允许名字="传递参数"如：data-id="{{index}}">{{item}}-{{index}}</view>

2 例：<button class="{{txt}}" bindtap="add">+</button> 类名是变量txt对应的值

3 例： <button class="txt" bindtap="sub">-</button>txt在此处为类名

4 <a?'b':'c'如果a为真的时候，得到b否则c>

5 e.target.dataset.wxml参数名

20220304

1 wx:if="表达式"表达式为真的时候显示表达式为假的时候隐藏例：<button wx:if="{{1==2}}">按钮</button>

20220308

1 不换行 white-space: nowrap;

2 swiper 实现轮播图效果 autoplay="true"自动播放，indicator-dots="true" 轮播图下的小点，显示轮播图张数

20220309

1 小程序本地文件大小不超过2m，某些东西不支持云平台，可使用下载地址

20220311

// 创建音频
const innerAudioContext = wx.createInnerAudioContext()
// 播放地址
innerAudioContext.src='cloud://zsh-gmx9p.7a73-zsh-gmx9p-1257218395/aa.m4a'
// 自动播放
innerAudioContext.autoplay = true
// 循环播放
innerAudioContext.loop=true

 // 播放音乐
      innerAudioContext.play()
// 暂停音乐
      innerAudioContext.pause()

1 a?b:c 如果a为真的时候得到b类名否则c类名

2 bindtap绑定点击事件

/* 使用动画 */
  animation: move 1s infinite linear;’
 /* 暂停动画 */
  animation-play-state: paused;
/* 定义动画 */实现图片旋转
@keyframes move{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }

20220315

<!-- bindinput获取表单元素的值 -->

video属性上使用弹幕<danmu>元素

地图map

<map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>

 translateMarker: function() {
        this.mapCtx.translateMarker({
          markerId: 1,
          autoRotate: true,
          duration: 1000,
          destination: {
            latitude:23.10229,
            longitude:113.3345211,
          },
//设置经纬度和比例尺以及自动旋转//

send:function(){
        // 实时发送弹幕
        this.video.sendDanmu({
            text:this.data.con,
            color:'pink'
        })
    },
//发送实时弹幕

  */
    onReady: function () {
        // 获取音频
        this.video=wx.createVideoContext('myVideo')
        this.mapCtx = wx.createMapContext('myMap')
    },