web技术学习

切换模式

本文总阅读量 次

微信小程序基础入门 ​

基础语法 ​

app 实例只有一个，页面级别使用 Page()

js
getApp() // 获取 app 级别实例
getCurrentPages() // 获取页面栈历史路由数组,不要修改

wxml 语法 ​

遍历 ​

  1. wx:for="5"可以遍历数组，对象字符串，数字
  2. " 5 "引号和挂括号中间不能有空格
  3. wx:key="*this" 设置 key 值，this 是关键字，代表每个 item 的引用地址
  4. 遍历默认 为 index 与 item 修改名字需要用 wx：for-index="xxx" wx:for-item='xxx'

条件语句 ​

wx:if="{{xxx}}" wx:elif="{{xx}}" wx:else="{{xx}}"

显示隐藏 ​

wx:hidden="{{true}}" true 为隐藏

wxss ​

本地图片不能作为背景图，可以在线转换成 base64 格式使用

以 iPhone6 位设计稿，测量 1px=2rpx，以 750px 为基准

@import 可以导入另一个 wxss 文件

内联样式使用 ​

html
<view style="color:{{color}};" />

选择器 ​

仅支持 class id 组件名 标签名 ::after ::before

页面局部样式会覆盖 app 全局样式

使用字体图标，下载 iconfont 解压，iconfont.css 里面有转好的 base64 格式，复制到 wxss 内就可以使用

html
<view class="iconfont 你的图标类"></view>

绑定事件 ​

bindtap="xxx"  // 绑定事件,事件后面不能加括号传参
data-cur="{{index}}" // 传参需要自定义属性
catchtap='事件' 阻止冒泡

获取参数 ​

js
change(e){
 e.target.dataset.cur
}

e 为 event 对象，包含 target 与 currentTarget 两个

target 为当前触发的元素

currentTarget 为绑定事件的元素

一般传参在绑定事件的元素上传，接参也用 currentTarget 接

block 不会被渲染，可以用来遍历等

html
<block wx:for="{{3}}">
 xxx 
</block>

模板 ​

name 定义模板名称，import 引入只会渲染 template 标签，include 引入会渲染 template 以外的内容

引入只会 template 使用 is 属性设置模板，data

模板文件.wxml

html
<template name="tem1">
 <view>{{txt}}</view>
</template>
<text>只能include引入</text>

使用

html
<import src="../../templates/temp1.wxml" />
<template is="tem1" data="{{txt:'123'}}"></template>
<include src="../../templates/temp1.wxml" />

wxs ​

在 wxs 标签内定义方法属性，commonjs 语法对外暴露，module 定义模块名字

每一个 wxs 标签或文件都是一个模块互不影响

不能使用 es6 语法，对象简写箭头函数等

html
<view>{{w1.name}}</view>
<wxs module="w1">
 module.exports = {
  name: 'nn'
 }
</wxs>

导入文件 src 导入, 注意 wxs 文件内导入另一个 wxs 文件需要用 require 引入

html
<wxs src='./in.wxs' module="m1"></wxs>

组件 ​

text ​

html
<text></text>
  • user-select：文本是否可被选中
  • space：是否能连续空格 ensp 中文一半 emsp 中文一个字宽 nbsp 字体大小宽
  • decode：是否解码 如 >

swiper 轮播图 ​

  • indicator-dots：小圆点
  • indicator-color：圆点背景
  • indicator-active-color：当前圆点背景
  • autoplay：自动播放
  • current：当前下标第几张
  • interval：切换时间
  • bindchange：绑定事件

scroll-view 滚动区域 ​

  • scroll-x：允许横向滚动
  • scroll-y：允许纵向滚动
  • scroll-into-view：滚动到子元素的id的位置
html
<scroll-view class="scroll-y" scroll-y="{{true}}" scroll-into-view="aa">
 <view id="aa">导航12</view>
</scroll-view>

image 组件 ​

html
<image src="/static/erha1.jpg" lazy-load="{{true}}" bindload="_load"></image>
  • lazy-load 懒加载

评论