前端开发-微信小程基础语法整理
Text
显示文本
相当于span标签,是行内元素
<!-- 文本渲染，使用{{}} -->
<text>{{msg}}</text>
View
包裹作用
相当于是div
image
显示图片
默认的高度和宽度
320px
240px
实际开发时,需要设置高度和宽度
属性:
mode 来控制图片的结构:
scaleToFill: 默认值：不保持纵横比缩放图片
aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来
widthFix：宽度不变，高度自动变化
heightFix：高度不变，宽度自动变化
button
按钮
size:mini表示小的按钮
{{ }}
显示数据, 可以写表达式
<view class="box {{isRed?'red':''}}"></view>
wx:for
遍历
<!-- 遍历,{{}}默认的元素别名item,默认的索引别名index --><view wx:for="{{movieList}}">{{item}}--{{index}}</view>
wx:for-item可以指定元素别名
wx:key的设置:
如果不设置wx:for的key值，会报警告，警告提示：添加key提升性能
如果wx:for遍历数组的每一项是对象的话，那么wx:key设置元素一个属性名，要求属性对应的值是唯一的
<view wx:for="{{objectArray}}" wx:key="id">
{{item.unique}}
</view>
如果wx:for遍历数组，每一项不是对象的话，如果想给wx:key唯一标识， wx:key="*this" （等同于 :key="index"）
相当于vue :key="item"
<view wx:for="{{numberArray}}" wx:key="*this">
{{item}}
</view>
wx:if
显示与隐藏
<!-- 条件判断{{}} 如果条件满足就展示对应的dom -->
<view wx:if="{{isHandsome}}">很帅</view>
<view wx:else>丑B</view>
注册事件
bind事件名
<button bind事件名="事件处理方法">点我呀</button>
Page({
事件处理方法(){
}
})
事件处理方法声明在和data平级
bindtap点击事件
消息提示
wx.showToast({
title: '点疼我了', //提示的文案
// icon:'loading'
icon:'none', //提示框图标
duration:3000,//提示时长
mask:true //是否显示遮罩
})
this
方法中的this
小程序中的 this 指向就的当前小程序页面实例，可以通过 this 取得对象上的属性与方法
注意点
- 方法访问data属性 this.data.属性名
- 方法访问方法 this.方法名
- 改变data属性 this.setData({属性名:值})
// 如果直接修改 data 中的属性，数据是没有响应式的特点的
// 如果需要修改的数据有响应式的特点，请认准： setData 方法
// vue 数据双向绑定：
// data 改变，视图也改变 （数据的响应式）
// 视图 改变， data 也改变
模块化
nodejs 中的模块化
导入：var fs = require('fs')
导出：module.exports = {}
ES6 中的模块化
导入：import xx from 'xx'
导出： export deafult {}
小程序中
使用方法
在模块js中暴露方法属性或者对象
// 对外暴露
export default sayHello
需要使用模块的js里面引入
// 引入模块
import sayHello from '../../utils/hello'
注意点
import路径不支持绝对路径，所以写相对路径即可
总结: 小程序开发在现在前端开发中还是很火热的, 也是前端必备技能之一,这里整理的只是一部分,我们一起学习,接下来还会陆续分享.