专栏首页AnRFDev「小程序」开发记录

「小程序」开发记录

wxml

标签严格闭合。 rpx(responsive pixel)尺寸单位。 大小写敏感。

我们只要保持一个原则就可以提高小程序的渲染性能:每次只设置需要改变的最小单位数据。 此外需要注意以下3点:

  • 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
  • 由于setData是需要两个线程的一些通信消耗,为了提高性能,每次设置的数据不应超过1024kB。
  • 不要把data中的任意一项的value设为undefined,否则可能会有引起一些不可预料的bug。

“用户在渲染层的行为反馈”以及“组件的部分状态反馈”抽象为渲染层传递给逻辑层的“事件”

数据绑定

通过 大括号大括号 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在其中进行简单的逻辑运算。 大括号大括号中还可以直接放置数字、字符串或者是数组。

使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供:

  • 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  • 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入

WXML 提供两种文件引用方式import和include。

import 可以在该文件中使用目标文件定义的 template

import 不具有递归的特性。

条件渲染

在wxml中使用wx:if

<text wx:if="{{showPing}}">{{s.ping}} </text>

WXML 中,使用 wx:if=”“ 来判断是否需要渲染该代码块。标签定义的前部使用逻辑判断。

使用 wx:elif 和 wx:else 来添加一个 else 块。

排版布局

水平居中内容

<view style="width:100%; display:flex;flex-direction:row;justify-content:center;">

</view>

flex垂直方向居中

主要靠align-items: center;。 不设置高度的时候。

.cfg-start {
  display: flex;
  flex-direction: row;
  margin-right: 20px;
  align-items: center;
}

设置了绝对定位。需要同时设置高度。

.cfg-end {
  position: absolute;
  right: 0px;
  height: 5vh;
  display: flex;
  flex-direction: row;
  margin-right: 2px;
  align-items: center;
}

确定宽高的view里居中内容

需要设置display: flex;justify-content:center;align-items: center;

.ball {
  width: 30px;
  height:30px;
  margin: 2px 2px;
  display: flex;
  justify-content:center;
  align-items: center;
  border-radius: 15px;
  color:white;
  font-size: 12px;
}

view位于父容器底部

或者叫做div位于父容器底部。 父容器设置position: relative。 子view设置position: absolute。 如果父容器没有设置relative属性,子div(或子view)会相对于页面的底部。

CSS DIV在另一个DIV底部居中例子

<div style="min-height: 360px;position:relative;">
	<div style="position: absolute;bottom: 0px;left: 50%;transform: translate(-50%, -50%);">
	</div>
<div>

设置bottom的时候记得带单位。

动态判断背景色。idx表示下标。

<view style="background:{{idx%2 == 0? '#757575':'#424242'}}">五</view>

动态改变文字颜色

<view bindtap="onTapShowType" data-type='1' style="color:{{ showLetterType == 1? '#4fa003':'#424242'}}">五</view>

text

font-size 字体大小。 font-weight 字体粗细,580左右能有粗体效果。

scroll-view

使用scroll view。

<scroll-view class='word-field' enable-back-to-top scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" >
  <view class="child-field">

  </view>
</scroll-view>

wx:for子项方向

wx:for的子项方向其实是由它的父view来决定的。

列表自动换行

假设横向(row)排列子项,子项太多的时候会换到下一行。 需要设置flex-flow

.correct-field {
  display: flex;
  flex-flow: row wrap;
}

css 圆角

只设置一个值的话,是4个圆角。

border-radius: 4px;

单位是px。如果单位用rpx,则不显示圆角。

背景半透明

真机调试时,小程序设置background: #895fcce0;是无效的,看不到颜色。 要使用opacity属性来设置不透明度。

background: #895fcc;
opacity:0.85;

背景渐变色

https://developers.weixin.qq.com/community/develop/doc/06e11913e57af653ca251462fcc134f2

css class 按条件选择

<view class="{{showPage==1?'chooser.chosen':'chooser'}}" >sample</view>

用大括号里的三目判断。

例子? - 进度条和文字

需求:显示做题的进度。 进度条作为背景。文字盖在上面。头尾各一个文字。

.top-bar {
  position: relative;
  height: 40px;
}

.pb {
  position: absolute;
  width: 100%;
}

.top-title-field {
  position: absolute;
  margin-left: 10px;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}
<view class="top-bar">
  <progress class="pb" stroke-width="40px" activeColor="#42A5F5" percent="40" />
  <view class="top-title-field">
    <text>单项选择</text>
  </view>
  <view class="progress-text">
    <text>4/10</text>
  </view>
</view>

播放音频

播放音频需要用到InnerAudioContext

播放本地文件

播放本地音频。 音频文件在audio目录里。audio目录和pages目录同级。 先创建InnerAudioContext。并且在onLoad方法中设置监听。 注意本地音频文件的路径写法,不用写相对路径,用绝对路径就好。

const iac = wx.createInnerAudioContext()

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.registerAudioContext()
    console.log('ac ', iac)
  },

  onTapSound: function(event) {
    // console.log(event)
    var word = event.currentTarget.id;
    console.log('cilck', word)
    iac.src = 'audio/a.mp3'
    iac.volume = 2
    iac.loop = false
    iac.play()
    console.log('tap sound done. ')
  },

  // 注册音频
  registerAudioContext: function() {
    iac.onEnded((res) => {
      console.log('on ended', res)
    })

    iac.onError((res) => {
      // 播放音频失败的回调
      console.log('播放音频失败', res);
    })

    iac.onStop((res) => {
      console.log('播放结束!');
    })

  },
})

测试发现,安卓手机播放的音频支持mp3与pepm。iPhone Xs不能播放pepm。

在本地放音频文件时,小程序会提示“文件未上传”。可能是小程序编译完成需小于某个大小(2M)才能上传。

那么我们把音频文件放在服务器上吧。

可以使用微信云开发里的存储。上传文件后,找到文件的下载地址,https开头的。设置给iac的src。

播放网络音频

找到音频文件的url,赋值给iac.src。然后播放。

iac.src = 'https://audio....'

文件系统

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/file-system.html

使用FileSystemManager的方法。

判断文件是否存在

异步的方式判断文件是否存在。

var fs = wx.getFileSystemManager()
fs.access({
  path: audioDir,
  success(res) {
    console.log(audioDir, remoteDir, res)
  },
  fail(err) {
    console.log(err)
  }
});

同步判断。如果不存在则会报错。

try {
  fs.accessSync(localFilePath)
} catch (t) {
  console.log(localFilePath, 'not exists.')
}

创建目录 mkdir

fs.mkdir({
  dirPath: audioDir,
  success(res) {
    console.log(res)
  },
  fail(err) {
    console.log('Can not create dir.', audioDir, err)
  }
})

界面

跳回上一个界面

wx.navigateBack({})
wx.navigateBack({
  delta: 1
})

定时任务

setTimeout(function() {
  // 操作
}, 1000)

下载

微信小程序提供了下载api。

下载文件

wx.downloadFile({
  url: targetUrl,
  filePath: localFilePath,
  success: res => {
    console.log('download success')
  },
  fail: err => {
    console.log('download fail',err)
  }
})

点击事件

点击事件主要靠bindtap方法。

点击事件传递参数

数据在soundRowA里面。渲染一个列表。 wxml中加上data类型,这里是data-word。也可以起别的名字,但一定要data-开头。

<view wx:for="{{soundRowA}}" wx:for-index="idx" wx:for-item="s">
  <view bindtap="onTapSound" data-word='{{s}}'>
    显示一些数据
  </view>
</view>

js中实现onTapSound方法。获取点击事件event。

传递回来的数据是在event.currentTarget.dataset中。

根据wxml中data-word,传递回来的数据的key是word

onTapSound: function(event) {
  var word = event.currentTarget.dataset.word
},

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序·云开发实战 - 体重记录小程序

    前一段看到朋友圈里总是有人用txt记录体重,就特别想写一个记录体重的小程序, 现在小程序的云开发有云函数、数据库,真的挺好用,很适合个人开发者,服务器域名什么都...

    腾讯云开发TCB
  • 小程序开发_小程序定制_小程序定制开发_小程序开发公司

    在互联网时代,所有行业的竞争无论是时间维度还是空间维度都是不断扩大的,餐饮业的运营肯定也是绕不开的。而由于微信小程序的出现,更是给企业、商家开放了另一个空间。

    用户3711474
  • 微信小程序开发笔记

    Spaceack
  • 小程序开发问题笔记

    最近从0开始,开发了【企鹅速算检查】小程序,在开发过程中遇到一堆的问(巨)题(坑),这里记录下来分享给大家。

    IMWeb前端团队
  • 微信小程序开发笔记

      因为前段时间一直在做关于微信小程序方面的项目,作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的,当然前提是要理解微信小程序的基...

    追逐时光者
  • 小程序开发-梳理登录流程-v1.0

    在小程序官网里面会提到一个小程序的登录逻辑,这是官方推荐的登录逻辑,也就是所谓的小程序登录态维护逻辑,这里是官方的图:

    前端正义联盟
  • 微信小程序云开发数据库操作更新记录

    王小婷
  • 微信小程序云开发数据库操作查询记录

    数据库操作参考API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-cl...

    王小婷
  • 微信小程序云开发数据库操作删除记录

    界面里点击添加之后,打开云开发控制台,查看数据库栏目,会发现多出来一条记录,执行删除语句之后,再次打开云开发控制台,那条语句会被删除。

    王小婷
  • 反编译小程序记录

    1.使用自己手机上的微信打开"人堆"小程序,可以添加到"我的小程序" 2.打开模拟器的微信并登录 3.在模拟器微信的下拉小程序最近使用历史中打开"人堆",如...

    用户1437675
  • 会员管理小程序实战开发教程-消费记录功能

    我们前边利用六篇篇幅介绍了会议管理小程序的各项功能,今天我们先复习一下我们已经完成的功能:

    低代码布道师
  • 记录一次OCR程序开发的尝试

    最近工作中涉及到一部分文档和纸质文档的校验工作,就想把纸质文件拍下来,用文字来互相校验。想到之前调用有道智云接口做了文档翻译。看了下OCR文字识别的API接口,...

    呆呆
  • 小程序开发

    .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件

    达达前端
  • 微信小程序开发实战(27):录音

    通过wx.startRecord和wx.stopRecord方法,可以录制和停止录制音频。如果成功录制音频,会将音频存在临时文件中,并返回临时音频文件名,以便后...

    蒙娜丽宁
  • 微信小程序怎么开发小程序发布流程小程序价格开发小程序公司

    注意:小程序的主题最好是企业或者个体工商户,且要经过微信认证并开通微信支付商户,个人小程序审核时间较长,而且没有支付功能,一般仅作展示使用

    微信小程序开发加盟服务商
  • 微信小程序云开发数据库操作一添加记录

    微信小程序云开发 初学者入门教程二-前端操作数据库模块:https://www.jianshu.com/p/fb5be2e7f507中有写到对数据库的一些简单的...

    王小婷
  • 微信小程序开发(一) 微信登录流程

    做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了关键,我将项...

    开发者技术前线
  • 微信小程序踩坑记录

    flytam
  • 安全开发小知识记录

    Q:a标签target="_blank"的安全问题及解决办法 答:A标签的target属性规定在何处如何打开链接文档常用的有_self & _blank,如果在...

    WeiyiGeek

扫码关注云+社区

领取腾讯云代金券