初识微信小程序

微信小程序入门

什么是微信小程序

小程序是⼀种新的开放能⼒，在微信内被便捷地获取和传播。

⼩程序的优势和劣势

优势

成本更低
使⽤便捷
容易推⼴
体验良好

劣势

受微信的限制，不能涉及积分和虚拟交易
单包⼤⼩限制2M
发布麻烦
小程序的模版语法wxml

逻辑渲染

<view wx:if="{{case1}}">1</view>
<view wx:elif="{{case2}}">2</view>
<view wx:else>3</view>

列表渲染

<view wx:for="{{list}}" >item</view>

模版

template
使⽤

<template name="a">
{{a}}
</template>

在其他⻚⾯调⽤
导⼊的是除模版之外的所有内容

<template is="a"></template>

小程序的wxss

尺寸单位

rpx:(屏幕宽度/750)px = 1rpx

样式的导入

@import ‘样式的路径’

小程序中的js

小程序中的运⾏环境分成渲染层和逻辑层
同时修改渲染层和逻辑层的数据:this.setData()

程序和界面

程序

onLaunch: 当⼩程序初始化完成时，会触发 onLaunch（全局
只触发⼀次）
onShow：当⼩程序启动，或从后台进⼊前台显示，会触发
onShow
onHide：当⼩程序从前台进⼊后台，会触发 onHide
onError：当⼩程序发⽣脚本错误，或者 API 调⽤失败时，会
触发 onError 并带上错误信息。
globalData：全局数据
⻚⾯获取 getApp()

界面

onLoad：⽣命周期函数–监听⻚⾯加载，触发时机早于onShow和onReady
onReady：⽣命周期函数–监听⻚⾯初次渲染完成
onShow：⽣命周期函数–监听⻚⾯显示，触发事件早于onReady
onHide：⽣命周期函数–监听⻚⾯隐藏
onUnload：⽣命周期函数–监听⻚⾯卸载

事件

绑定

bind:事件类型

传参

data-变量=“值”
阻⽌冒泡事件：⽤catch绑定事件

<button bind:tap="function1"></button> 
//点击触发函数1，会产生事件冒泡
<button catch:tap="function2" data-value="dome"></button> 
//点击触发函数2，不会产生事件冒泡，传参value的值为"dome"

事件对象⾥⾯的属性

function2(e){
log(e.currentTarget.dataset.value) //打印dome
} 

currentTarget为当前事件所绑定的组件，⽽target则是触发该事件的源头组件